deal-with-bluring-svg-icon-1
@京东设计中心 :很多设计师跟开发都会遇到SVG 图标模糊的问题,今天我们简单教你四招,轻松搞定这个问题,有需要的同学赶紧来收 >>>

简单介绍

随着高清视网膜屏的出现,网页设计也需要考虑各种高清屏幕的显示效果,前端在写代码的时候也需要根据屏幕的不同,输出不同分辨率的icon图片,真的好多工作量啊~

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

被困扰的小问题

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

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

jd20150206

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

jd20150205

解决办法

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

问题出在哪里呢?

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

jd20150204

STEP 1:单位一定是像素,否则会影响其他选项的单位设置

jd20150202

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

jd20150203

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

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

还要啰嗦几句……

jd20150201

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

简单的小分享,希望可以帮到童鞋们~谢谢啦。

【会营销的设计师才是好文案】

文案篇:搞定文案的集大成篇!
《年度最佳教程!7招教你写出互联网顶尖文案!》

营销篇:大众点评的顶尖营销案例!
《重磅推荐!如何设计传单才不会被人随手扔掉?》

设计篇:了解网页设计的前世今生!
《涨姿势!写给网页设计师的网页设计简史》

原文地址:mp.weixin

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量90万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
官方微信:想在手机上、被窝里获取设计教程和各种意想不到的”福利”吗?添加优设哥微信号:youshege

chat-yinliu-pic

点赞
收藏 2

发表评论 已发布 1

还可以输入 800 个字
 
 
载入中....
相关推荐
1 收藏