【ICON 绘制】从打开 Ai 到输出文件，我的独门秘技之 01 设置篇

这篇文章所讲的全部是和 Ai 相关的（我使用的是 2017 版本，推荐使用 Ai cc 2015 以上的版本，因为有实时圆角功能，对 icon 的绘制非常有帮助），当然用其他软件绘制 icon 的朋友也可以看一看，也许能从中获得一些灵感

工欲善其事，必先利其器

首先，我们要对 Ai 进行一些设置（适用于 Ai cc 2017 版本，其他版本可能稍有不同），这样能够保证 icon 在绘制的过程中保持像素对齐（当然仅靠设置是不够的，还有一些其他需要注意的地方我会在后面讲到），首先是首选项（ctrl+k）中的设置：

（这个设置主要是我们在 icon 微调的过程中，拉伸圆角矩形，圆角不会因此变化，下面的缩放描边和效果也要关闭）

（边角构件即实时圆角那个小点，这个可以关掉，一般我们都是需要边角构件来拉圆角的）

· 需要注意的是，即使我们关掉这个选项，在角度过小或者过大的时候，边角构件还是不会出现，另一种不会出现的情况是构成角的两条路径中的一条过短（约小于 1.5px），前者我暂时没找到解决办法，后者可以先整体放大，做完圆角之后再缩小回原来的尺寸（ 在我的这篇文章里有一个案例演示：IpNeNaEcRe：如何绘制边缘清晰又圆润的小尺寸图标？）

（单位都设置成像素（px））

（网格线间隔代表粗线大网格的尺寸，次分隔线代表将大网格分为几个小网格，这里大网格为 8x8 px，小网格尺寸为 1x1 px，网格置后看个人习惯设置，我习惯关闭，这样绘制的过程中方便对齐调整）

· 如果觉的两个数值设置的一样导致网格太密的话，可以把次分隔线设置为上面的一半，这样每一小格的尺寸为 2x2px，不过对齐的时候要注意，对齐到网格中间 1/2 处是没有问题的， 如果对齐到 1/4 处是没有像素对齐的，一般在奇数描边的情况下需要格外注意像素对齐的问题

首选项中的关键选项设置完毕后，点开工具栏中的视图：

· 边角构件一定要显示，如果隐藏的话你会发现不能拉圆角了

· 智能参考线打开，方便对齐

· 显示网格的快捷键（ctrl+”）可以记一下，因为有时候网格打开会非常密集，仅在需要的时候打开

· 对齐网格是锚点、手柄会对齐网格，但是在奇数描边的情况下，像素是对不齐的，所以我们一般只打开对齐像素，比较特殊的情况下可以关闭对齐像素，打开对齐网格，具体案例可以参考： IpNeNaEcRe：如何绘制边缘清晰又圆润的小尺寸图标？，这个回答后面需要对齐半个像素的情况，我关闭了对齐像素，使用了对齐网格

（对齐像素和对齐网格的不同表现）

当然上面这个例子是有些片面的，因为我使用了居中描边，而且是奇数描边。如果使用用内描边或者外描边是可以两者兼顾的，但是，不同的描边形式下，相同数值的圆角表现也会不同， 因此，为了保证 icon 风格的统一，最好使用同一种描边形式。另外，不闭合的路径是只能居中描边的，因此，我个人习惯于居中描边。

（1px 描边，1px 圆角，居中描边、内描边、外描边的圆角表现）

如果使用了网格对齐或者一些其他原因而导致像素没有对齐，可以选中图标手动对齐：

（手动对齐像素）

好了，Ai 的基本设置就到这里，更多内容我们下一篇见！