一种只画一套ICON完美适配不同机型且图标不会模糊的方法①

2017-06-14 本文已影响0人兽小鱼

前言

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

在工作中遇到我们经常遇到画的图标经过放大缩小之后，边缘不清晰，模糊，导致整个页面看上去不精致，保证细节完整是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作图的同学，效率杠杠的；