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

简单介绍

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

还要啰嗦几句……

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

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

学习 · 提示

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

最新评论

好好看啊

19-04-14 06:05回复
衍夏成歌

喜欢

18-06-28 08:54回复
清朝辛弃疾

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

17-05-27 07:54回复
玩玩不啦

感谢老师无私奉献

17-05-41 01:56回复
土匪进村shine

感谢大大无私奉献

17-05-16 01:20回复
栽下秋风

17-05-17 12:47回复

  网友求助,请回答!