火星网校
减轻工作量！轻松搞定SVG Icon的模糊问题
发布时间：2018-11-17 19:57:24
导言：随着高清视网膜屏的出现，网页设计也需要考虑各种高清屏幕的显示效果，前端在写代码的时候也需要根据屏幕的不同，输出不同分辨率的icon图片，真的好多工作量啊~
为了解决屏幕分辨率对图标影响的问题，SVG格式的icon出现了，简单的说它是通过矢量路径把icon变为字体，这样前端在改变icon大小和颜色的时候，操作起来就简单高效多啦~
被困扰的小问题
先说明一下~我是一位GUI设计师，在设计网页的时候，开发童鞋就使用了SVG格式的icon~细心的我发现这个格式的icon最后呈现出来的效果，边缘会模糊。。。
这可能是一部分开发和视觉设计师都遇到的问题哦~用图片来说明一下！
对比后，效果相差还是很明显的，甚至图标还会变形呢！这对有强迫症的人来说真的是一件超级虐心的事情呢~
解决办法
SVG格式是从AI导出的，所以无论视觉是在PS里面制作还是AI里面制作，都要将icon在AI中形成路径~
问题出在哪里呢？
我们都知道AI是矢量工具，无论你画什么路径都不会出现像素那样的锯齿，所以在用AI制作像素icon的时候，一定要重新设置首选项，并用网格进行辅助。
STEP 1：单位一定是像素，否则会影响其他选项的单位设置
STEP 2：键盘增量调整为0.1像素，方便调整icon位置
STEP 3：网格线间隔设置为1px，次分隔线设置为10意思是最小的网格单位是0.1px，如果你的icon边缘没有贴在1、2、3……这样的整数网格上而是在次分隔线上，就会模糊变形！
STEP 4：从“视图”选项中选择“显示网格”。
最后检查的时候画面一定要放大到最大哦~
简单的小分享，希望可以帮到童鞋们~谢谢啦。
分享
学员作品赏析
-
2101期学员李思庭作品
-
2104期学员林雪茹作品
-
2107期学员赵凌作品
-
2107期学员赵燃作品
-
2106期学员徐正浩作品
-
2106期学员弓莉作品
-
2105期学员白羽新作品
-
2107期学员王佳蕊作品
热门课程
专业讲师指导 快速摆脱技能困惑
相关文章
多种教程 总有一个适合自己专业问题咨询
你担心的问题，火星帮你解答-
在广州这座繁华的都市中，数字创意产业正蓬勃发展，广州视频剪辑培训成为许多影视爱好者的理想起点。随着短视频平台和影视制作需求的激......
-
在北京这样一座充满创意活力的都市，UI设计培训正成为无数年轻人追逐职业梦想的跳板。随着数字经济的蓬勃发展，UI设计行业在北京展......
-
在当今创意经济蓬勃发展的浪潮中，北京平面设计培训成为众多职业追求者的理想起点。这座城市的活力与机遇吸引着无数人投身视觉艺术领域......
-
在影视和设计行业蓬勃发展的今天，虚幻引擎作为核心技术工具，正引领着视觉创作的革命。越来越多的人渴望掌握这门技能，而专业的培训成......
-
在北京这座文化创意中心，平面设计培训行业蓬勃发展，为渴望入行的学员提供了丰富机遇。随着数字媒体和影视产业的崛起，掌握视觉传达技......
-
在上海这座充满活力的城市，影视和设计行业正迎来前所未有的发展机遇，数字技术的进步让3D建模成为创意产业的核心驱动力。参加专业的......
