以下是我对于设计图标的一些建议——关于从一个简单的单色图形到一个细节丰富的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 中成为一个单独的新图层了。