如何在Sketch设计中正确的使用像素
你是否无数次遇到图标糊了,图片糊了,甚至连1px的描边线都要跟着你对着干一块糊了的情况?本文专治此类病患,包括sketch新手,英语苦手。
作为UI设计师你该知道像素对我们而言是多么的重要,页面构建的每一个元素,都由像素精确控制着。在我们的设计中,可能会遇到小数点的情况,其中有很多的原因,在这里我整理了一些常见的情况及解决对应的方法,帮助你们在Sketch设计时尽可能的获取完整像素的设计。

←完整的像素与模糊的像素→
一些基本认知
不要控制到小数点后的设计(它们真的不该存在)。就算画条线也不该控制到小数点。
如果小数点不存在,为什么它们在Sketch中被允许存在?
因为Sketch可以同时在矢量和位图环境中进行设计。我有特殊需求需要模拟半个像素怎么办?
你可以根据需求沿着内外轮廓画多条线通过降低不透明度来模拟半个像素。他们使用半像素来计算模糊以给出较软的角和边缘,例如绘制对角线时。您应该通过寻找“像素提示”和“抗锯齿”来更多地了解这些内容。
请问我可以开始了吗?
1.打开“ 像素匹配 ” (Pixel fitting)

这个设置可以确保新图层的边缘总是以整数像素为单位出现。就算移动图层时也是如此。
(注意,是新图层。也就是说之前出现的小数点是不管的。)

小技巧勾选像素匹配(Pixel fitting)后选择之前做过有小数点坐标的图层,随意移动下,软件就自动修正小数点的后的数值。
2.把“ 显示像素 ” (Show Pixels)添加到工具栏里
钛合金眼和该功能的交替切换使用来确保您的图层对齐到像素。

3.打开“ 显示像素网格”(Show Pixel Grid)
当画板放大到800%的时候,屏幕上才会出现一个像素网格, 便于全局检查屏幕上的“半像素”非常有帮助。

4.避免使用鼠标调整大小
不是说不用,最好的方式是用了鼠标调整后记得看看右上角的检查器,确保无误。当然对于此类操作方式也是可以直接跳过鼠标,直接在检查器里调整。

5. 尽量使用“缩放”(Scale)调整图形大小比例,
为了不糊不糊啦,请撇弃使用鼠标及检查器的方式对图形进行修改,科学缩放你值得拥有。

6.使用“检查器”的对齐工具时要小心
尤其是创建此类图标时,注意奇数偶数之间的形状对齐。

不然很可能出现以下这种情况



这个工具的使用不只是让你以为检查器只有4个属性会存在半个像素,而是5个!所以珍爱自己远离Line。







































