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