我的图标设计工作流程

原文链接

以下是我对于设计图标的一些建议——关于从一个简单的单色图形到一个细节丰富的APP图标。

有很多细节 我的 app 设计流程 这篇文章没有涉及到,特别是图标的图形设计方面。图标的设计通常是被设计软件推动的,充分利用软件的向量、蒙板和建模功能。正是这些原因导致了图标需要多种工具和技术。

创作与造型

我认为应该把矢量路径的创作和造型分开来讨论,因为两个我主要使用的工具——Photoshop和Illustrator——它们有截然不同的功能特点和长处。

Photoshop的渲染能力和蒙板功能比其他设计功能高到不知道哪里去了,但是Illustrator有更多更好的矢量工具。在图标路径设计方面,我还没有用过比得上Illustrator的工具。

还好,这两个工具之间几乎是无缝切换。Photoshop可以直接产生既快速又简洁的工作成果;先在Illustrator里画出图标组或其他复杂的图形,然后通过粘贴图层导入到Photoshop里进行处理。

Illustrator用来创造,Photoshop用来渲染和导出。

尺寸

你需要设计图标的尺寸,协调图形和线的宽度。这时因为很多图标需要有一条中心线,如果图形的宽度是偶数的,同时线的宽度是奇数的,或者图形的宽度是奇数的,同时线的宽度是偶数的,你的图标有就没办法有一条中心线了。

如果你的线的宽度是偶数的,你的图标宽高尺寸就应该是偶数 × 偶数;如果你的线的宽度是奇数的,你的图标宽高尺寸就应该是奇数 × 奇数。

尽量不要把奇数和偶数尺寸混合使用(除非你突发异想,横竖的线宽使用不同的尺寸)。

避免使用高像素设计 —— 在Retina屏幕(两倍密度)下1像素的线宽和奇数的图标宽看起来挺好,但是到其他1倍或者三倍密度的屏幕下就会很糟糕了。

如果你整体上基于网格并且避免出现分数那么工作会轻松很多,这意味着你的设计都是基于1倍屏幕来做的。

OS X app 图标

使用大网格。OS X的图标尺寸很多但都是成倍数的,可能你的设计一个1616像素的图标会用来定位10241024像素图标的样子,这样使得建立图标的所有尺寸更容易。除了最小的尺寸,基本上不需要针对不同尺寸对图标进行调整。

苹果的图标不太符合网格。不知什么原因,它们总是差几个像素—— Safari 的图标尺寸是898像素,而不是正好对齐为网格1/16的896像素。

IOS app 图标

和OS X不一样,IOS app 图标尺寸之间没啥关系。这样就有些难办了。以下是目前全部的尺寸列表(你可以在这里找到更好的列表Bjango App Icon Template help).

  • 29×29
  • 58×58
  • 60×60
  • 76×76
  • 80×80
  • 87×87
  • 120×120
  • 152×152
  • 167×167
  • 180×180
  • 1024×1024 (App Store)

一共是11种尺寸。从60px的图标开始设计,然后扩大成它的的两倍三倍,也就是120px和180px,只需要成倍扩大图标,不需要调整。避免一开始就设计大尺寸高保真的图标会帮你节省很多时间,还可以创造更好、更可维护的图标。从1倍开始。当你准备好之后再设计2倍3倍4倍的。

除了特殊情况,否则我建议不要用智能对象,因为它们缩放的方式

从Illustrator开始

除了能一边看全保真的矢量图一边处理1倍网格,Illustrator 有很多其他软件都没有的特点。很多特点是我离不开的,这是为什么我用Illustrator作为我设计图标的主力。

设置

我不喜欢 Illustrator 的像素对齐功能,但是我可以打开 视图 - > 对齐到网格,关闭“对齐新的对象到网格” ,这样完美了。第二个方法是在新建文档的窗口下面有个对齐到网格的选项。

如果你需要非整数的调整,可以使用“移动”窗口。(对象-> 变换 ->移动,或者选中对象,点击“enter”建来打开“移动”窗口)

自定义工具面板

最近,我在尝试自定 义工具面板,移除不常用的工具,把常用的工具从弹出的菜单中拿出来。

路径选择工具

如果你尝试增加、减去或者排除相交图形(通常叫布尔运算或者构造几何),Illustrator的路径选择器是最好用的矢量编辑器之一。

我最喜欢路径选择器的功能分割功能——把图形切分成独立的路径,这样可以轻松的把不想要的部分去除。

形状生成工具

形状生成比路径选择器晚一点出现,而且用起来很快捷。选择形状生成工具点击图形区域生成图形,(可以是重叠的,但是要是闭合的区域),拖拽不同图形从而结合图形,按住 option (Mac)减去图形。

形状生成工具快捷键:shift + M

动态圆角工具

Illustrator CC 2014 增加了动态圆角功能,通过控制一个角来控制整个圆角。选中所有想要改变的角的锚点,拖动其中一个控制圆角的控制点,拖动改变圆角大小就行。整个不仅适用于矩形,适用于所有图形。

动态圆角可以创造出用其他方式不好做或者做起来很费时的图形,用起来很方便。

如果你需要精确的圆角数值,你可以在控制栏输入数值。

封套扭曲

如下图,可以弯曲、扭曲图形,赋予图形生命。(下图在 cc 2015 中,在编辑 ->封套扭曲 -> 用变形建立,还有其他的扭曲选项)

轮廓化描边

在把图形导入 ps 中进行处理的时候,我通常会把图形轮廓化描边。有一些其他工具有这个功能,但是不多。但是这个功能好像是矢量设计软件必有的功能。

各种描边宽度

Illustrator 宽度工具可以变换描边的宽度。

选择宽度工具(shift + W),双击锚点出现出现宽度点数编辑弹窗。不同的描边宽度可以精确地构造用其他方式很难实现的图形。

虚线

Illustrator 包含两种虚线模式。如下图两种。illustrator 对虚线的优化处理在大多数其他的软件中没有。虚线还可以 作为路径导入 ps 。

分别变换(对象 -> 变换 ->分别变换)

同时缩放、旋转以及移动多个对象在 illustrator 中很方便。很简单的功能,但是能节省很多时间。

套索工具

套索工具可以灵活的选择,同时可以结合 shift(增加)和 option(减去)使用。

图形样式

我设置了一些图形样式方便工作。如果你要设计一套有同样特点的 icon,使用图形样式会很方便。

像素预览

……(作者写了很多,大意是不要相信 illustrator 的像素预览,这个功能很糟糕)下面是 illustrator 的抗锯齿像素预览和 ps 中的抗锯齿图形预览。illustrator 的效果很糟糕。

在 ps 中处理

我在 illustrator 中设计好 icon 路径之后,我会把它们作为形状图层粘贴到 ps 中。但是注意别在 illustrator 中一口气复制所有形状,然后粘贴到 ps 中,那样的话在 ps 里这些形状都成了一个图层,没法编辑了。正确做法是:把所有路径从 illustrator 中粘贴到 ps 中,在 ps 中选择单个路径,按「shift +cmd + J」这样在 ps 中成为一个单独的新图层了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,524评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,869评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,813评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,210评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,085评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,117评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,533评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,219评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,487评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,582评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,362评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,218评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,589评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,899评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,176评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,503评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,707评论 2 335

推荐阅读更多精彩内容

  • 类似Iconfinder的图标和矢量图形市场,为网页和印刷设计者提供了丰富的实惠可用的矢量图标资源。 我们会对每一...
    Kemr阅读 2,672评论 1 30
  • 这篇文章讨论了图标设计准则的6个步骤。这6个步骤遵循了图标设计的基础,包括一致性、易识别和清晰。高效图标设计的原则...
    Nicebook阅读 2,093评论 0 3
  • 使用sketch最重要的一点是设计好控件的规范。 为做好设计规范需要对色彩进行编号,比如:color_a”_1,c...
    youyeath阅读 26,082评论 2 237
  • 简介: “你还不明白吗,你说你还爱我,其实你是怀念我们曾经相爱,怀念那时的我爱着的那个时候的你。可是,现在,我已经...
    洋阿洋阅读 1,073评论 8 6
  • 风卷残云云走月, 晕灯黄火照无言, 落落几重池雨烟。
    没石雨阅读 207评论 0 0