如何在Ai画出适配各分辨率的像素完美图标
一提到Ai，大家都知道是矢量绘图软件，我经常拿它来画icon什么的。既然是矢量绘图，看似和像素的关系就远了不少，其实这是严重的错觉。纵使在Ai中是矢量的icon，要使用的话，一般也要转换成位图才行（SVG除外），而且往往要缩放成多个不同的大小适配各种分辨率（对于移动端设计来说），有的时候在某个分辨率上可以像素完美的图标放大后就毁了所以需要在Ps中重新修正。如果在绘制矢量的icon的过程中，通过一些技术手段就实现适用于各分辨率的图标的话，转到Ps里进行二次加工就能省不少事情。
首先要对Ai进行一些设置，这里假设你需要切一张36*36dp大小的照相机图标。
新建文件，大小36*36，单位选择像素，记住把底下“使新建对象与像素网络对齐”这一条勾上。
在首选项>单位中，将那四个单位都调节成像素，然后在首选项>参考线和网络中，网格线间距设成2px，次分隔线设成1。然后在视图菜单中，把“显示网格”和“对齐网格”都打开。一切就准备就绪了。
画图ing，描边设为2px并且是内测对齐，填充无，然后就是各种你懂得。
这样，就完成了。
让我们来看一看像素对齐的情况，选择视图>像素预览，发现像素的确是各归其位。
打开Ps，新建一张36*36px的空白文件，把图像导入Ps当中（用小黑箭头全选，Ctrl+C，进入PS，Ctrl+V，选择形状图层）。下面我们来看一看这个图标在按比例放大后的效果。
1.5X效果
2X效果
3X效果
效果都不错。
其实原理很简单，之前在Ai中设置使得所有的锚点都在像素坐标均为偶数的的点上，无论是放大1.5X还是2X或者3X，锚点依然会在像素坐标均为整数的点上，于是线条边缘就与像素边缘对齐啦。
当然这种办法有也缺点，就是不能描出线条粗为1dp的超细图标，原因仅仅是因为我们要适配HDPI（1dp=1.5px）这奇葩的分辨率，当然，如果真想画超细图标，也可以为HDPI单独修一版，工作负担也不是很大。
当然iOS端就不存在这些问题啦，所以就不用严格地把锚点放在坐标均为偶数的点上。
说实话，对于现在分辨率越来越高的手机来说，像素对齐的意义已经不是很大了，苹果iPhone6 Plus干脆直接压缩图像，把设计师辛苦切出来的像素完美的图故意整模糊，因为超高分辨率下单像素的模糊肉眼几乎看不出来。
不过对于一个有节操的从业者来说，我相信大家还是会坚持自己的像素洁癖吧♪(^∇^*)。
评论