UI设计教程!如何在Sketch设计中正确的使用像素(1)

来源:网络   作者:热心网友   发布时间:2017-04-19    浏览次数:445

作为UI设计师你该知道像素对我们而言是多么的重要,页面构建的每一个元素,都由像素精确控制着。在我们的设计中,可能会遇到小数点的情况,其中有很多的原因,在这里我整理了一些常见的情况及解决对应的方法,帮助你们在Sketch设计时尽可能的获取完整像素的设计。


20d758f582fba8012049efe95483.jpg

←完整的像素与模糊的像素→



一些基本认知

不要控制到小数点后的设计(它们真的不该存在)。就算画条线也不该控制到小数点。


如果小数点不存在,为什么它们在Sketch中被允许存在?
因为Sketch可以同时在矢量和位图环境中进行设计。


我有特殊需求需要模拟半个像素怎么办?

你可以根据需求沿着内外轮廓画多条线通过降低不透明度来模拟半个像素。他们使用半像素来计算模糊以给出较软的角和边缘,例如绘制对角线时。您应该通过寻找“像素提示”和“抗锯齿”来更多地了解这些内容。



请问我可以开始了吗?


1.打开“像素匹配 ”(Pixel fitting)



f21d58f589dea8012049ef820b4b.jpg

这个设置可以确保新图层的边缘总是以整数像素为单位出现。就算移动图层时也是如此。

(注意,是新图层。也就是说之前出现的小数点是不管的。)

小技巧勾选像素匹配(Pixel fitting)后选择之前做过有小数点坐标的图层,随意移动下,软件就自动修正小数点的后的数值。



2.把“显示像素 ”(Show Pixels)添加到工具栏里钛合金眼和该功能的交替切换使用来确保您的图层对齐到像素。


ad5f58f58b74a8012049efbc44f2.jpg





3.打开“显示像素网格”(Show Pixel Grid)

当画板放大到800%的时候,屏幕上才会出现一个像素网格, 便于全局检查屏幕上的“半像素”非常有帮助。


42f658f58c57a8012049ef5a701c.jpg


12共2页
联盟广告
×

感觉还不错,那就赞助一下吧!您的鼓励就是我们坚持的动力!

打赏说明:您的赞助我们将用于购买网络带宽和优质设计资源,提升用户体验!

相关推荐

http://www.shejixf.com/shejijiaocheng/shejililun/5884.html
×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

充值学币 立即开通