发新话题
打印

[粉丝原创] ICO图标边缘锯齿的解决方法

ICO图标边缘锯齿的解决方法

就从今天在群里提问的那位朋友说起吧,他把图标做成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)的选择问题,如果能确定程序最终显示的背景颜色,那设成跟它一样就万事大吉了,如果是其他颜色,本人的经验是尽量设成灰度色。

补充:

      边缘像素化的笨方法
      简单说一下我平时用的外框边缘像素化的方法,我都是利用索引图没有透明通道这个特点来得到一个边缘像素化了的选区,具体做法是:
接上面第3点,新建一个大小相等的文件,把填充后的图层2拖到新文件里,删掉新文件的背景层,只保留一个刚拖进来的图层,再把新文件的颜色改为索引色,这时可看到图层的边缘已经出现锯齿了,这就是我们要的边沿像素化的效果,把文件再改回RGB色,把图层2拖回原来文件,继续。

本帖最近评分记录
  • iconsbox =饭团= +10 非常热心的回答! 2008-6-4 15:36

TOP

先抢个沙发!一会仔细看看~
Do you know SoCool skin? check here!

IconsBox‘s Blog

TOP

好东西 必须顶起~
顺便问下 当最后生成.ico文件时 有时很多种尺寸 都封装到一个.ico文件时 第三种方法是否适用?
谢谢
www.juele.org 小火

TOP

第三种方法其实就是给图标外围再描了个边,小尺寸下使用的比较多些,因为不太容易看出来露马脚

TOP

不错 我也遇到过这样的问题,好好看看...

TOP

好东西,顶起!

TOP

一直为这头痛,今天学到了,回去试试看
谢谢LZ

TOP

发新话题