征集网锐志网络淘途找素材上91
创意在线首页
平面设计交互设计CG动漫工业设计建筑环境数码影像创意搜
 首页大赛征集资讯教程画廊访谈作品集创企同盟设计招聘人才专区竞赛台专题论吧 找素材看酷站设计网址库
交互设计首页
当前位置:首页 > 交互设计 > 观点 > 正文
个人解决ICON边缘锯齿的方法
作者:kuya 来源:kuya’s blog 发表时间:2007-6-5 9:12:34 浏览:

最近忙晕了,所以这次的作业没有做,没得交了, :(   转一篇自己不久前贴在BLOG上的设计心得,以弥补罪过,呵呵,会的朋友看起来应该很简单,但希望对一些朋友有帮助。

  图标设计是UI设计中的比较基础部分,也是最终用户看到的直接用来评价软件质量的一个标准。在很多朋友看来,图标设计就像画图一样简单,但是随着工作的进行,问题也不像开始想的那么简单了,去年毕业后我去以前公司任职UI设计师后,开始了我个人的第一个UI设计任务----设计一个桌面小时钟,方案很快就完成了(图片1),老总也很爽快地拍板通过,然后就跟研发人员一起把程序实现出来,在桌面上显示出来(图片2),这时老总摇着头说:“肯定不行”。
  很快就一年了,最近在几个UI论坛上都经常看到有朋友问有关图标在软件里显示后出现边缘锯齿(毛刺)怎么解决的问题,群或者其他同行群里也不鲜人问,有空我都会说一下,今天在两个群里都有朋友问起,觉得还是把自己对于这个问题的解决方法整理一下贴出来供大家参考,也方便以后有朋友问起直接给他看。

图片1  图片2


  就从今天在群里提问的那位朋友说起吧,他把图标做成ICO和GIF后放到程序里,运行后出现了边缘锯齿(毛刺)现象 
  

  我给这位朋友的建议是:
  1.在输出 gif 或 ico 前对边缘进行处理,处理的目标是让边缘更平滑,具体的方法是把边缘像素的颜色调得接近一点,相对颜色深一点,这样可以使其不太破碎而且轮廓更清晰。但这方法比较费时,而且不是每一个图都可以用,特别是在线条比较细的时候。
  2.不使用透明图标,把图标的背景色和即将应用界面的背景颜色设成一样。这个方法比较干脆,缺点是这个图标在被用的时候背景不一定一样,而且在不同操作系统下软件的默认背景颜色也不同(比如winXP是#ECE9D8,win2000及以下系统是#C0C0C0,这个值直接由桌面主题定义),如果图标的背景颜色跟环境的背景颜色不同那就比较难看了,所以有时会做几种背景颜色,还不一定满足,麻烦。
  3.第三个方法是在第二个方法的基础上进来改进的,思路是保留图标边缘的羽化部分,又不让图标背景区域太大,具体做法是: 
      我们先把要处理的图标层定义为图层1,新建一个图层2,叠在图层1下面,把图标的区域选出来得到选区1,把选区1扩大一个像素得到选区2,再把选区2作为填充区域填充图层2,把图层1和图层2合并为新图层命名为图层3,这个时候再对图层3进行边缘像素化,然后转成程序能接受的应用格式(ico、gif、bmp),应用到程序里就没有边缘锯齿(毛刺)的问题了。注意转换为gif或ico时粉红色部分是透明的,而转换为bmp是粉红色部分就是透明色了,一般默认的透明色是#FF00FF,也可以自己定义。

      这里面还有一个背景颜色(图层2)的选择问题,如果能确定程序最终显示的背景颜色,那设成跟它一样就万事大吉了,如果是其他颜色,本人的经验是尽量设成灰度色。

 
  还有一个问题,就是我在前公司第一次做的那个桌面时钟界面的时候,当时研究了一下其他软件,都很少有把软件的外壳做成非矩形状的,那时才明白就是为了避免边缘锯齿问题,看看人家QQ吧,也是直来直去的,最多就在边角搞一个六度角,但这样用户已经可以接受了。
 

在线编辑:52design
本文链接:


推荐阅读:
·2021第十五届“创意中国”设计大奖 征稿章程
·2021第七届“学院派奖”全国艺术与设计大赛征集公告
·青春唯美插画培训网络远程班正在招生
·第八届中国高等院校设计作品大赛启动
·第十二届中国高校美术作品学年展获奖名单公布
·2021第七届“学院派奖”全国艺术与设计大赛征集公告
·第六届“包豪斯奖”国际设计大赛获奖名单揭晓
免责声明:本站刊载此文不代表同意其说法或描述,仅为提供更多信息。对本文有异议,请联络本站!
转载要求:文章作者及来源信息必需保留。转载之图片、文件请不要盗链本站地址,且不准打上各自站点的水印!

近期推荐报道 返回首页更多精彩等着你!

Illustrator| 用AI创建精细矢量插图徽章Photoshop| PS经典合成张开血盆大嘴樱桃
Photoshop| Photoshop自制个性的黑色翅膀摄影佳作| 德国Thomas Wuhrer长腿女郎性
Photoshop| Photoshop制作超酷的边缘发光的荧CorelDraw| CorelDRAW制作编织效果详细教程
Illustrator| illustrator制作潮流海报字体摄影佳作| 惊艳的Francesco Marconi
Photoshop| 利用画笔及图层样式制作方格子艺术纹理背景Photoshop| Photoshop制作简单时尚的彩色放射
关于本站 | 联系方式 | 商业服务 | 合作伙伴 | 站点地图 | 免责声明 | 版权声明 | 在线投稿