页面载入中...

如何让16像素的图标更为精致

xing教程, 2016-07-160

来源:站酷  作者:我是你的粉丝

大家好,今天大雄分享的主题是“如何让16像素的图标更为精致

作为网页设计师,你可能很少亲自动手去绘制这些小图标

e9725789d38d0000012e7e36d6bf.jpg

为什么呢,因为画这些图标需要大量时间,然而目前网络资源非常丰富,你只要上网动动手指就可以下载到许多,但是资源泛滥,使用的时候存在2大问题:

1、图标种类不同

就以线标为例,常见的有1像素、2像素,然而你下载的图标的质量是参差不齐的,怎么不齐呢,甚至同一个图标中线条的粗细都不一致;另外就是有的直角,有的圆角,圆角吧度数还各不一致,下图是在阿里巴巴矢量图标库中找的,细心的你肯定能看得出¥的线条粗细和圆形的粗细不同

67785789d3ac0000018c1ba4f028.jpg

2、未对齐像素格

上图就存在这样的问题,解决这个问题也是本文的主旨,我发一个我重新绘制后的图对比下,你就会明白。

a6d45789d3c50000018c1b4ac8e7.jpg

导入到PS中就是这样的

28835789d3d00000012e7e2714e1.jpg

大尺寸的图标在运用中显得没那么必要,但是如果是16px级别的话,未对齐像素格的图标就会糊一些,解决的方法有几个

其一、懒人方法(不要对下载的图标进行任何缩放操作),直接去老外的网站或优秀的平台下载16px的图标

其二、重新绘制

在AI中设置参考线与网格

绘制的时候,使用同样粗细的线条,并对齐网格

f22d5789d3f30000012e7e43e738.jpg

当然,有一种情况是无法对齐网格的,这个¥图标正好能说明

45fd5789d3fe0000012e7e8eb975.jpg

如果开启变换中的“对齐像素网格”,那这个图标就完成不了,所以特殊情况时取消这个选项,往右移动0.5像素即可

6ce15789d4080000018c1be20934.jpg

第三个方法是使用PS处理,也就是像素图标的作法,删除其中的次级像素

d3f45789d4120000012e7e575ce2.jpg

好了,方法就是这些,大家快去试试吧。


标签:

分享:

设计原的发展离不开您的支持与帮助,如果您觉得设计原对您有所帮助 可以用微信扫描

相应二维码打赏设计原,赏金将全部用于网站建设

微信