设计地址栏透明icon图标方法

icon可以用多个软件制作，也可以通过一些网站把普通图片转换为.ico文件，但通常存在的问题是图片本该透明的地方经转换后变为了黑色或者白色，十分影响效果。难道一定要制作正方形的.ico文件方能掩盖此缺陷？未必！

曾在http://zhidao.baidu.com/听说用HyperSnap可以把图片转为透明的icon。经过试验，此法在某个程度上行得通，但需要技巧！！！不是把图片文件在软件中打开然后另存为.ico文件就能完事，要经过一些处理调整，以下我就完整地展示以下：

首先，我们得下载个HyperSnap，这里推荐使用的是绿色版本的HyperSnap-DX 6，不用安装，解压使用，此软件的经典用途是用来抓图，多中抓图方式十分强大，同时它又具有很多图片格式的转换功能，包括转换为.ico和.cur（Windows光标文件，就是鼠标形状文件）。是个十分厉害的家伙！ 

在软件中打开图片，最好是.png，因为.png文件该透明的部分是可以做成透明的。其实呢，能显示透明的图片文件也不外乎是.png或.gif等几个。这里以.png文件为例。 

接着就是把图片放大到800％，我为什么选800％呢？因为HyperSnap最多就是放大到800％了。要做成.ico文件的图片要不就是32*32px要不就是16*16px，太大太小都不行，所以进行转换之间就先把图片转换成如此大小了哦！ 

放大为800％的图片你就能看清楚每个像素了，每个方格就是一个像素，图3的.png就是32*32px的。 

接着我们要设置前景颜色，这里暂不说为什么我们得设置前景颜色。 

纯白色得红、绿、蓝三色都为255，我们把红、绿、蓝设置为3个254是为了那个颜色很接近白色但又不是白色，这可是十分有玄机的哦，不过还是暂时卖个关子。 

设置了前景颜色后画线工具的颜色就是我们刚才设置的3个254了。在这个.png中，鱼的眼睛和鱼以外的部分是白色的，但经过用画线工具处理鱼眼睛以后，鱼眼睛就看上去是白色，但实际上只是近似白色而已，放大到像素阶段尚且很难察觉，更不用说是正常大小了。如此操作，真正是纯白色（3个255）的部分就只剩下鱼以外的地方了。而我之前所说的技巧也正是这里。 

第7步是关键步骤，第4步到第6步所做得一切工作都是为第7步做准备！！！！废话少说，看看第8步的效果先！ 

第7步的处理那些该透明的地方变成了透明了！！！原因是在第7步我们选择了纯白色的区域转换为透明！我们之前先要把鱼眼睛弄成很接近纯白色的白色目的就是为了让它和真正得纯白色分开，那么我们进行第7步处理的时候我们就不会把眼睛也弄成透明了。并不是制作的所有icon都必须要进行如此操作，如果你的icon的核心部分的颜色没有和透明部分的颜色一样，那么就只需要把透明部分的颜色设置为透明。通常来说，.png文件在HyperSnap中打开，透明部分的颜色为白色，于是只要你要处理的图案中没有白色，那么你就可以跳过第4步到第6步，从第3步直接跳到第7步。到达第8步后就算完成了，你可以把它另存为.ico文件。 

保存为.ico文件后图片会自动变成这个样子。建议你选择“撤消”回到上一步，把图片也保存为.gif格式，有另一个玄机的哦！ 

从Windos对比图我们可以分明看出，fish1.ico是利用上面的方法做出来的，而fish2.ico只是直接把.png输入到HyperSnap然后用.ico输出，本该透明的地方并不透明，这就是没使用技巧的结果了。浏览器效果对比图用的也是2个.ico文件，浏览器使用的是Firefox。也是一个使用了技巧一个没有，从Windows效果和浏览器效果都能很清楚地看出区别。

在第9步的描述里我曾说过要把图片也保存为.gif格式，为什么呢？因为根据我的试验，在Firefox浏览器中，无法正确显示HyperSnap输出的.ico文件，至于为什么我就不知道了，可能是我没有把文件放在一个正常的目录下吧（我只把.ico放在BlogBus上传文件的目录下，其路径为http://files.blogbus.com/***.blogbus.com/files/***.ico）。所以我们得强行把保存好的gif文件后缀改变为.ico，那么Firefox就认了。至于我为什么这里只字不提Maxthon浏览器的效果，因为它自己有[已确认][bug]网站favicon的显示方式的bug，根本没办法对比。到现在为止（2007-08-05）可以显示非根目录下的.ico，我们使用的主流浏览器中只有Firefox和IE7能做到。

到此为止，我所讲述得透明icon制作方法传授完毕！希望看此日志的朋友能有所得，早日制作出自己个性化的透明icon！！！！