最新消息:关注星悦关注后期及设计相关知识

AI教程!轻松处理SVG ICON模糊问题

经验/技巧分享 星悦 629浏览 0评论

简单介绍

随着高清视网膜屏的出现,网页设计也需要考虑各种高清屏幕的显示效果,前端在写代码的时候也需要根据屏幕的不同,输出不同分辨率的icon图片,真的好多工作量啊,那么在完成图标制作后,可能你会发现遇到SVG 图标模糊的问题,今天我们简单教你四招,轻松搞定这个问题。

为了解决屏幕分辨率对图标的影响,随着SVG格式的icon出现了,简单的说它是通过矢量路径把icon变为字体,这样前端在改变icon大小和颜色的时候,操作起来就简单快捷了。

 

被困扰的小问题

先说明一下,在设计网页的时候,开发同学就使用了SVG格式的icon~细心的我发现这个格式的icon最后呈现出来的效果,边缘会模糊不清晰。

这可能是一部分开发和视觉设计师都遇到的问题哦~用图片来说明一下!

星悦PS教程|后期修图|平面设计-经验/技巧分享系列修图经验分享

 

前后对比,有没有发现效果相差还是很明显的,甚至图标还会变形呢!这对有强迫症的人来说真的是一件超级虐心的事情。

星悦PS教程|后期修图|平面设计-经验/技巧分享系列修图经验分享

 

解决办法

SVG格式是从AI导出的,所以无论视觉是在PS里面制作还是AI里面制作,都要将icon在AI中形成路径~

问题出在哪里呢?

我们都知道AI是矢量工具,无论你画什么路径都不会出现像素那样的锯齿,所以在用AI制作像素icon的时候,一定要重新设置首选项,并用网格进行辅助。

 

星悦PS教程|后期修图|平面设计-经验/技巧分享系列修图经验分享

单位设置:单位一定要以像素为单位,否则会影响其他选项的单位设置

 

星悦PS教程|后期修图|平面设计-经验/技巧分享系列修图经验分享

键盘增量设置:键盘增量调整为0.1像素,方便调整icon位置

 

星悦PS教程|后期修图|平面设计-经验/技巧分享系列修图经验分享

参考线与网格线设置:网格线间隔设置为1px,次分隔线设置为10意思是最小的网格单位是0.1px,如果你的icon边缘没有贴在1、2、3…这样的整数网格上而是在次分隔线上,就会模糊变形!

从“视图”选项中选择“显示网格”。

星悦PS教程|后期修图|平面设计-经验/技巧分享系列修图经验分享

 

最后检查的时候画面一定要放大到最大哦~!

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址