前言

为什么写这么初级、基础的教程。

在工作中遇到我们经常遇到画的图标经过放大缩小之后，边缘不清晰，模糊，导致整个页面看上去不精致，保证细节完整是ui设计师的基本功，也是初级设计师最容易犯的错误。据我这两年的观察，即使工作两三年的设计师也对这样的小事嗤之以鼻，不屑一顾，认为这并没什么大不了。殊不知高品质的设计作品往往是细节取胜，这也是高品质设计师与应付式对待工作的设计师之间差别，他们之间的差距慢慢就会越来越来大。

1.本章所研究是的如何用PS只设计一套图适配多种机型且输出多套的icon边缘不会模糊的UI设计方法。

2.教程分两篇，本篇是基础篇。进阶篇有一种更高效更省力的方法画图标方法。

3.这同时是对工作中一些经验总结，避免以后忘记，想不起。希望能帮到那些用Ps做UI的设计师们。

4.本章主要针对用Ps做UI的设计同学们。

做完一套UI设计稿，并切了多套图给前端哥哥适配各种机型，当我们校对页面和设计稿的时候发现有些实现的页面显得不精致，总感觉差那么一点；当然不排除有些是标注的问题，但是更多的原因是图标本身有问题，特别是线性图标边缘不清晰，模糊，这在画图标的时候有问题，当前倍率下图标是完美的，当用Cutterman输出多倍图，其他倍率下的切图icon出现了边缘模糊，解决图标出现虚边的方法方式有两种，一种是检查每个倍率的切图文件，出现虚边就有手动填补或者删除，让像素格充满像素，边缘清晰可以见。第二种是在画图标的时候就把这个问题解决掉，下面就让我们一起探讨如何只设计一套icon，完美适配各种机型的方法。

虚边为什么会出现？

这是因为像素没有对齐网格，或者像素不是整数，系统默认补充了一些次像素填满像素格，所以会导致icon边缘不清晰。

那应该怎么避免呢

通常我们做App设计用的是@2x图做设计稿，在一套图适配多种机型的情况下，这就要求icon内部的横向方向和竖向方向的所有元素的像素值必须是偶数，同时他们的间隔也是偶数倍，也就是2px的整数倍；为什么一定要2px的整数倍呢，这是受到倍率关系所影响，在IOS端，@2x和@3x的倍率关系是1.5倍，那么就要求在@2x图下，矢量icon的元素必须是偶数，这样放大到@3x图时显示的像素才是完整的像素，才不会出现虚边。@2x下的icon边缘清晰，输出的@3X也可能有问题哦。

原理

我们来做个试验

我们在@2x下画1px线性图标，大小是12pxX12px，那么我们导出@3x图是icon的大小应该是：12pxX1.5=18px，也就是18pxX18px，按数学的角度来讲它都是偶数，但是它为什么还是模糊了呢 图3。这是因为1pxX1.5=1.5px,1.5px是不能完整的铺满像素格的，所以它只能虚拟出0.5px去填满像素格，这就是所谓产生了虚边。如下图所示，右边18pxX18px的图片产生了虚像素。

观察下图中他们的矢量边缘线，并没有填满整个像素格。

再做另一个试验

用原来1px的线性图标加到2px，它的大小仍然是12pxX12px；当我们等比放大到1.5倍时，我们惊奇的发现中间的横线出现了虚边，

试验图2

这发生了什么，这个问题在我刚开始做UI设计的时候也困扰了很久，百思不得其解。后来经过不断地试验和观察，我们发现中间的横条与上下横条之间的间隔是3个像素（图3），这意味着什么呢。 这是因为3X1.5=4.5.不能填满完整的像素格，所以它必然会出现次像素，导致边缘不清晰。

图3

图4是我手动调整元素之间关系为偶数倍，放大到1.5倍之后，它们的像素格是完整，所以避免了虚边的出现。

图4

到这里我们得出两个结论：

在@2x下做UI设计稿，构成图标的所有元素之间关系必须偶数倍（包括正形空间和负型空间）才能避免在导出多倍图的情况下出现虚边。

在@2x下做UI设计稿，即使icon的水平方向X垂直方向上是偶数像素格在导出多倍图的情况下也未必能保证所有的元素像素对齐网格。

在逻辑分辨率也就是@1X的倍率或者mdpi下做UI设计稿，正型空间元素和负型空间可以随意设置，但是如果要保证Andriod的hdpi和ldpi倍率下图标的不产生虚边，就回到了结论1——构成图标的所有元素之间关系必须是偶数倍；当然这两种倍率几乎已经被淘汰了，可以忽略不计。所以用Sketch作图的同学，效率杠杠的；

那么在需要导出多倍图的前提下我们应该怎么画完美像素的图标呢

第一步，设置网格线间隔是子网络的两倍大小的关系，确保最小的单位是2px。比如我们的画的图标是64X64px，那么网格线间隔设置为64px，子网格设置为32。

在ps中，快捷键【Ctr+K】打开参考线网格设置就能看到这里了。

第二步，打开【视图】——【对齐到】——【网格】

这个设置能保证所画的矢量图形对齐网格边缘

第三步，在激活【形状工具】的前提下勾选【对齐边缘】。

勾选【对齐边缘】 这个很重要哦，勾选之后Ps能把边缘不对齐网格的形状图层直接以满格的像素渲染！这是Ps逆天的地方，这就有点像Ai或者sketch的矢量渲染模式。

①是没有勾选【对齐边缘】，经过放大之后产生次像素，边缘模糊。 ②是勾选了【对齐边缘】，它们以满格的像素渲染。【图2】可以看到它们的矢量图形边缘并没有对齐像素网格，但是它渲染仍然以满格像素渲染。

完成以上步骤之后就可以刷刷画icon啦,妈妈哦不产品经理再也不用担心你的多倍图切图icon产生了鸟虚边啦。

最后祝大家再也不用为图标发虚而发愁，轻松过稿！