设计的图标模糊？教你四招轻松搞定。

分类：文章教程 日期： 点击：0

简单介绍

随着高清视网膜屏的出现，网页设计也需要考虑各种高清屏幕的显示效果，前端在写代码的时候也需要根据屏幕的不同，输出不同分辨率的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：从“视图”选项中选择“显示网格”。

还要啰嗦几句……

设计的图标模糊？教你四招轻松搞定。

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

标签：

网站声明

1、本站所有软件和资料来源互联网，仅供个人学习和研究使用，不得用于任何商业用途。
2、如有侵犯您商标权、著作权或其他合法权利的，请联系我们，本站将在第一时间对此进行核实并处理。
3、本站所有可下载资源，都是按照“原样”提供，本站并未对其做过任何改动。本站不保证本站提供的下载资源的准确性、安全性和完整性。同时，本站也不承担用户因使用这些下载资源对自己和他人造成任何形式的损失或伤害。
4、继续浏览本站，即代表您遵守此声明。