这份指导分为4个部分，包括建立文件，窍门和技巧，icon栅格，导出icon
1. 建立文件
icon设计的起点应该是建立合适的文件。这会帮你起一个精确和统一的开头。
image
从左到右，分别是：Illustrator, Sketch 和 Affinity Designer
有很多不同的软件来绘制icon。其中最知名的应该是 Adobe Illustrator，Sketch 和 Affinity Design。笔者更倾向于使用Ai因为它为画icon提供了最简单和最高效的工具（钢笔工具，路径查找器......），对于我来说，这就是绘制icon最重要的工具。Scott Lewis, iconfinder的开发者和内容主编，在他的文章《Sketch或者Affinity Designer可以替换 Adobe Illustrator吗？》里写到过三种软件的比较。
「我承认多年的使用造成我有一定的偏见，但是用Illustrator的钢笔工具绘图就像使用钢笔，而使用Sketch 和 Affinity Design更像在用粉笔绘图。」
我完全同意这点。
建立一个新的文件
建立文件的之前的第一步应该是定义一些关键的元素：
-
在画板尺寸上，宽和高应该是偶数（不要有小数！）。
-
确保勾选了「使新建对象与像素网格对齐」，这样你每次去新建一个icon的时候，你画的图形会自动贴到最近的像素格。
-
如果你已经知道了你要建立多少个icon，你也可以定义下画板数量，间距和列数。
-
你的高级设置应该和下图一样：
image
创建新文件的弹窗
常规设置
在建立了一个新文件之后，你还需要做一些小的调整：
-
进入Illustrator > 首选项 > 常规（或者按下 Cmd＋K）
-
在常规里，调整你的键盘增量为1px。这样的话，当你移动你的icon，它们就会呆在像素格子内。
image
常规设置的弹窗
-
到单位选项里，修改常规和描边的单位为像素。如果你喜欢的话，你也可以修改字体单位为像素（没有特别必要，除非你想把字体用在icon里）
image
单位设置的弹窗
2. 窍门和技巧
现在你已经成功建立了文件，现在是时候去尝试一些便利的窍门和技巧了。
窍门
窍门1：使用整数。
任何时候你输入一个数字，确保你用手工输入且输入的是个整数（再说一次，不要小数……！）。为了确保你使用的是整数，使用形状工具来画图（矩形工具，椭圆工具等等）而不是使用自由的手画。
窍门2: 所有数字应该是偶数！
考虑到icon经常要更换尺寸使用，所以使用偶数至关重要。举个例子，如果你的icon尺寸是64x64，这时你需要将它缩小到32x32（一半大小），你的icon尺寸仍然是偶数，不会出现奇数，甚至出现小数。因此，也就不会有模糊的情况。
窍门3: 保证你的变换窗口打开
变换窗口（窗口 > 变换 或者 shift+F8) 帮助你时刻留意意外出现的小数值。如果不小心出现了，你可以随时输入最接近的整数来修正。
image
你的变换窗口应该是这样的
技巧
技巧1：打开像素预览
不论什么时候，打开像素预览都是十分有用的（视图 > 像素预览 或者 alt + cmd + Y）。此预览模式给你展示了icon位图化的状态，帮助你找到有半像素的地方。这就是你存成png或者各种位图格式后看到的icon。
技巧2: 比起数字，请更相信你的眼睛
设计你的icon时，确保时不时把他们都放在一个画板上来查看。这会帮助你发现icon之间最合适的平衡状态。他们可能会有不同的大小和形状，但是最后他们会看起来像一套icon。
技巧3: 使用标准尺寸
如果你的需求方不要求一个特殊的尺寸，请使用安全方法即使用标准的尺寸（比如：16x16、48x48、64x64、92x92、等等）。如果你是在为特定的平台设计icon，例如安卓和iOS，去查看他们的设计规范，并使用他们的标准尺寸。这对icon的一致性和平衡性很重要。
技巧4: 从最大尺寸设计
设计icon时，我个人建议你从需要的最大尺寸开始设计，然后再调整到其他尺寸。从更大尺寸开始会让你有更多的空间去设计复杂的icon形状。然后一旦你要缩小你的icon，你可以等比例缩小，或者简化icon的设计，方法根据你的需要来。一些大icon里的细节设计在小尺寸下可能需要做一定的简化。
如果你需要一些icon设计的灵感，可以查看这几个icon库：
The noun project（https://thenounproject.com/）
UI Parade（http://www.uiparade.com/skill-type/icons/）
Flaticon（http://www.flaticon.com/）
Iconfinder（https://www.iconfinder.com/）
Icons8（https://icons8.com/）
3. icon栅格
当我第一次开始要创建一个icon时，我觉得我需要一个网格，这种想法有的时候在一个icon都没画之前就产生了。当我忧郁了很久，并尝试了n种方法之后，我意识到并不需要一开始就有一个栅格。实际上，在建立栅格之前，你需要先做一系列的icon作为你建立栅格的依据。
也就是说，使用栅格设计icon是一个普遍认为比较好的做法，因此后面我会解释栅格是什么以及什么时候使用并且如何使用栅格。
- 什么是栅格？
一个icon的栅格是一套决定了你的整套icon结构的规则，确保了你整套icon的一致性。
- 何时使用以及如何使用栅格
在使用栅格时请考虑以下主要的几点
「所有优秀的icon集都有一个栅格系统，但是不好的icon也严格坚持了他们的栅格。」
** -Justas, Icon Utopia**
规则1:不要因为icon不符合栅格就牺牲了icon表达含义的清晰程度。
如果因为你的icon不太贴合你的栅格，使得icon丢失了清楚的含义，或者就是看上去丑的不行，大胆的跳出你的栅格吧。
如果你需要一些建立栅格的启发，你可以看这篇文章《Icon Grid: When And How To Use It?》：http://iconutopia.com/icon-grid-when-and-how-to-use-it-bonus-grids/
4. ****导出icon
在你设计完你的icon之后的一步就是导出他们，这样你可以把你设计的icon用在你的网页或者app上。这里包含两个主要的步骤：准备和保存文件
- 保存
-
点击 文件 > 另存为，然后为你的文件建立一个简短和有意义的名字。
-
修改文件类型为SVG，然后勾选使用画板选项，这样就能导出你的icon了。如果你想导出某个特定的icon，勾选范围并输入你需要导出的icon的画板顺序的数字。为什么是SVG而不是EPS？因为SVG是网页使用的标准格式，而EPS多用在印刷内容。
-
选择你要保存的位置并点击保存。
-
最后，选择导出的icon，重命名他们即可。或者可以在文件里直接命名好画板的名字，导出的icon文件名即是 ai文件名+你的icon画板名。
网友评论