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