AI帮你轻松搞定SVG Icon的模糊问题
我要评论
简单介绍
随着高清视网膜屏的出现，网页设计也需要考虑各种高清屏幕的显示效果，前端在写代码的时候也需要根据屏幕的不同，输出不同分辨率的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：从"视图"选项中选择"显示网格"。
还要啰嗦几句……
最后检查的时候画面一定要放大到最大哦~
简单的小分享，希望可以帮到童鞋们~谢谢啦。
相关文章
ai怎么混合两种颜色? illustrator混合两个色块的颜色的方法
ai填充不同颜色的图形重叠以后，想要将两种颜色混合，该怎么混合颜色呢？下面我们就来看看详细的教程2024-07-18
ai网格线间距默认的不是很喜欢，想要自己调整一下，该怎么调整呢？今天我们就来看看参考线调整技巧2024-05-28
ai路径平均效果怎么用? illustrator使用平均路径的教程
Adobe Illustrator中有一个路径平均功能，如何使用呢？下面小编为大家演示路径平均功能的一种使用方法2024-05-21ai保存pdf格式出现多余内容怎么解决? 去掉pdf文件多余内容的技巧
ai保存pdf格式出现多余内容怎么解决？ai中的文档保存为pdf文件的时候，发现有多余内容，该怎么操作呢？下面我们就来看看去掉pdf文件多余内容的技巧2023-12-19- ai描边在哪里？ai中想要设置描边，该怎么操作呢？下面我们就来看看ai设置描边的多种方法2023-12-19
- ai原位复制怎么用？复制图形的时候，想要原位复制粘贴，该怎么操作呢？下面我们就来看看ai原位复制快捷键介绍2023-12-19
ai怎么让文字随着路径变形? illustrator区域文字不跟着变换方向问题的
ai怎么让文字随着路径变形？选中文字后，发现文字不跟随变换区域旋转该怎么办呢？下面我们就来看看illustrator区域文字不跟着变换问题的解决办法2023-11-30ai渐变色怎么调方向? illustrator将渐变颜色反向的技巧
ai渐变色怎么调方向？ai中给图形填渐变色，想要进行反向，该怎么操作呢？下面我们就来看看illustrator将渐变颜色反向的技巧2023-11-30
Ai彩色logo怎么做反白反黑效果? ai彩色logo转化为黑白稿的技巧
Ai彩色logo怎么做反白反黑效果？设计的彩色logo想要做黑白稿，就是反黑反白效果，下面我们就来看看ai彩色logo转化为黑白稿的技巧2023-11-12- ai怎么设计迷宫字体效果？我们需要使用分割网格结合形状生成器工具，制作迷宫字体，下面我们就来看看详细的设计过程2023-11-02
最新评论