图标设计，分享图标设计流程及小技巧

图标设计要求熟练运用软件，涉猎各种矢量特性、蒙板以及构造实体几何，因此，会需要同学们运用不同的软件工具与技巧，今天的译文全都是超实用的技巧干货，周末来补充点有料的。

我认为，对矢量路径的创建和图形样式的设定作出正确的区分是十分重要的，因为它们需要通过两种截然不同的设计软件来实现——Photoshop 和 Illustrator。

Photoshop 的渲染质量和蒙板功能几乎超越了所有的设计软件，而 Illustrator 则囊括了丰富的矢量功能。在我的漫漫图标征途中，Illustrator 可谓是矢量路径界的王者。

值得庆幸的是，Photoshop 和 Illustrator 两者之间的转换算得是无缝连接了。通常我的工作流程是这样的：在 Photoshop 中进行简单图形操作，但如果涉及到整套图标或任何复杂图形，我会先选用 Illustrator 进行创建，而后移步 Photoshop 进行样式处理。

简而言之，Illustrator 用于创建图形，Photoshop 用于设定样式及输出。

如果你可以控制图标尺寸，那么图标样式和线条粗细应有助于规格的制定，因为许多图标都必须有一条中线。也就是说，如果一个图标的宽度为偶数，那么中线的宽度便不能为奇数。同理，如果一个图标的宽度为奇数，那么其中线的宽度便不可为偶数。

当你使用的线条宽度为偶数时，图标尺寸应为：偶数（宽）x 偶数（高）。当线条宽度为奇数时，那么图标尺寸应为：奇数（宽）x 奇数（高）。

尽可能不要混合使用奇数和偶数尺寸（除非你不混合会抓狂，那么也确保不同轴使用不同粗细的线条）。

勿用高分别率来掩盖这个问题——在奇数宽度的图标中使用1pt（或 1dp）的线条，也许在 Retina 配置中看起来没有问题，但绝对会在1× 和 3× 尺寸的分辨率中发现让你头大的问题。

其实，大家只要把所有的点都想象成图标的基础网格，避免过于细小的偏移定位，一切也没那么复杂。要确保所有的图标设计应该从 1× 开始。

使用简单的网格系统可有助应用图标的绘制。OS X 的应用图标尺寸均为成倍增长，因此，我可以通过 16×16 像素的图标大致界定 1024×1024 图标的定位，这样的工作流程就轻松多了。对于那些极小的版本，也就无需过多调整细节了。

然而，苹果的图标并没有完全吻合网格系统。不知为何，它们有着几个像素的偏差——Safari 图标的直径为 898 像素，而非完全吻合 1/16 网格的 896 像素。

综上所述，我定义的图标尺寸与 Safari、iTunes和其它苹果图标并不完全相同，不过只是 1024 像素中的 2 像素差别而已，遵循网格对我来说更为重要。很好奇苹果为何选择这个尺寸。

iOS 应用图标的尺寸不如 OS X 图标那么具有匹配度，工作流程略微复杂一些。以下所列为如今所有 iOS 图标的尺寸。

?29×29?40×40?58×58?76×76?80×80?87×87?120×120?152×152?180×180?1024×1024（应用商店）

目前总共有 10 种尺寸。但是，如果你只需制作 1x 的网格尺寸，那就只需关注 5 种主要尺寸即可。

?29 (1×), 58 (2×), 87 (3×)?40 (1×), 80 (2×), 120 (3×)?60 (1×), 120 (2×), 180 (3×)?76 (1×), 152 (2×), 228 (3×)?1024×1024（应用商店）

4 种基础尺寸加上应用商店尺寸 1024×1024 像素，工作量直线减半。另有一个好消息，要是哪天苹果发布 3x 尺寸的 iPad，那你基本也已经完成了适合该规格的图标。