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

简单介绍

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

还要啰嗦几句……

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

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

全教程完,学完记得交作业。教程对您有所帮助,请推荐给你的朋友。如果学会了,可以尝试投稿给我们,跟大家分享你的学习经验:http://i.16xx8.com

学习 · 提示

  • 打开ps,跟着教程做一遍,做完的图要到这里交作业:提交作业
  • 教程有看不懂的地方,可以到论坛发帖提问:ps新手求助
  • 加官方微信,随时随地,想学就能学:ps_bbs,或扫右侧二维码!
  • 关注我们微博:@photoshop教程论坛
  • 想学更多的同学,可以订阅我们邮件,每天都有新教程发给你:http://t.cn/Rzm5o8Y
PS教程自学网 欢迎投稿教程:http://i.16xx8.com

    栽下秋风 说: 棒
    土匪进村shine 说: 感谢大大无私奉献
    玩玩不啦 说: 感谢老师无私奉献
    清朝辛弃疾 说: 最近太疲惫了,刚刚看到马云还差3亿就赶超李嘉诚成为亚洲首富的消息,心里咯噔一下,赶紧上网查了一下自己的排名,基本没受影响,排名还保持在14亿名左右,这下我放心了!其实我也是有梦想的人,从小就梦想自己哪天戴着墨镜开着兰博基尼跑车回乡下一趟。经过近一年的不懈努力 ,如今我的梦想已经实现了一半,我已经拥有了自己的墨镜 ..,只差跑车了……2017年真的要加油 昨天去吃火锅,看到火锅店的墙上醒目地写着: 羊是自己养的,菜是自己种的,油是自己榨的,提醒顾客放心食用。 买单的时候,我悄悄地跟老板说: 老板,这钱是我自己印的,请放心使用! 老板追了我好几条街,没追上。..真有意思,腿是我自己长的。....想往哪跑往哪跑,跑向充满希望的每一天!。 王思聪他爹给了他5个亿,他赚了40亿,翻了8倍;而我爹给了我2块钱,我买了一副手套,去了工地,搬了一天砖就赚了180块。翻了90倍啊!事实证明 :他妈的,其实我能力还是有的,只是启动资金太少了! 一年弄到头 每天用6位数的密码保护着3位数的存款 心好累,不想起床。
    衍夏成歌 说: 喜欢