个人解决图标的边缘锯齿(毛刺)问题[转帖]

图标设计是UI设计中的最基础部分，也是最终用户看到的直接用来评价软件成功与否的一个标准。在很多朋友看来，图标设计就像画图一样简单，但是随着工作的进行，问题也不像开始想的那么简单了，去年毕业后我去以前公司任职UI设计师后，开始了我个人的第一个UI任务----设计一个桌面小时钟，方案很快就完成了（图片１），老总也很爽快地拍板通过，然后就按研发人员一起把程序实现出来，在桌面上显示出来（图片２），这时老总摇着头说：“肯定不行”。 　　很快就快一年了，最近在几个UI论坛上都经常看到有朋友问有关图标在软件里显示后边缘锯齿（毛刺）怎么解决的问题，深圳UI群或者其他同行群里也不鲜人问，我都会粗略说一下，今天在两个群里都有朋友问起，觉得有必要把自己对于这个问题的解决方法整理一下贴出来供大家参考，也方便以后有朋友问起直接给他看。                                    登录/注册后可看大图 图片１　　                                 登录/注册后可看大图 图片２ 　　就从今天在深圳UI群里提问的那位朋友说起吧，他把图标做成ICO和GIF后放到程序里，运行后出现了边缘锯齿（毛刺）现象　 image 　　我给这位朋友的建议是： 　　1.在转成 gif 或 ico 后对边缘进行处理，处理的目标让边缘更平滑，具体的方法是把边缘像素的颜色调得接近一点，相对颜色深一点，这样可以使其不太破碎而且轮廓更清晰。但这方法比较费时，而且不是每一个图都可以用，特别是在线条比较细的时候。 　　2.不使用透明图标，把图标的背景色和即将应用界面的背景颜色设成一样。这个方法比较干脆，缺点是这个图标在动用的时候背景不一定一样，而且在不同操作系统下软件的默认背景颜色也不同（比如winXP是#ECE9D8，win2000及以下系统是#C0C0C0），如果图标的背景颜色跟环境的背景颜色不同那就比较难看了，所以有时会做几种背景颜色，麻烦。 　　3.第三个方法是在第二个方法的基础上进来改进的，思路是保留图标边缘的过度部分，又不让图标背景区域太大，具体做法是： 把图标的区域选出来 image ，把图标区域扩大一个像素得到 image ，再把这个区域作为背景的填充区域，这时再把图标叠加上去得到 image ，这个时候再做边缘像素化，这时再转成程序能接受的应用格式(ico、gif、bmp），应用到程序里就没有边缘锯齿（毛刺）的问题了 image 。这里面还有一个背景颜色的选择问题，如果能确定程序最终显示的背景颜色，那设成跟它一样就万事大吉了，如果是其他颜色，本人的经验是尽量设成灰度色。 　　还有一个问题，就是我在前公司第一次做的那个桌面时钟界面了，当时研究了一下其他软件，都很少有把软件的外壳做成非矩形状的，那时才明白就是为了避免边缘锯齿问题，看看人家QQ吧，也是直来直去的，最多就在边角搞一个六度角，但这样用户已经可以接受了。 　 image 现在的软件技术也已经支持边缘的平滑了，但那是更高一级的设计了，我们还是选想办法配合好我们自己人把手头的项目做好吧。 　　我所知道的方法就这些，希望有更好方法的朋友不也指点一下，让大家能更好地进步！

[em01]不错

正好在做图标玩儿呢```学习了`

所有的图片都显示不正常,光看文字实在不容易理解.
请检查图片连接,谢谢.

学习学习