2007-08
5

透明icon制作心得

By xrspook @ 10:44:51 归类于: 扮IT

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!!!!

标签:

5 条评论

  1. 半瓶水

    顶!
    xrspook 对 半瓶水 的回复: 2007-11-07 10:19:37
    请不要用“ding”发表评论,此处非论坛,不用“顶置”。

  2. kaka4152

    好犀利吖“`
    不过我今日发现佐一个可以在线整透明ico嘅网站吖“
    http://tools.dynamicdrive.com/favicon/
    前提喺“图片要喺透明嘅gif

    我有个问题“
    就喺“点将个ico整上去个blog标签前面吖“
    xrspook 对 kaka4152 的回复: 2008-03-11 23:11:48

    中加入:

    其中***.ico是你.ico文件的地址。

  3. 安定热望

    这种垃圾方法都拿来讲.这种边界明显(黑与白)的图片当然可以这样做了,拿个边界模糊,带渐变色的图片你做做看…..
    xrspook 对 安定热望 的回复: 2008-08-01 22:08:23
    渐变的方法我可真不会,若你懂,请指教。

  4. 安定热望

    我来教你个最简单的方法,去下载个ICOFormat.8bi插件,让你的photoshop支持ico格式,爱怎么做就怎么做.
    xrspook 对 安定热望 的回复: 2008-08-01 22:08:54
    哦,原来如此,谢谢指点了!

  5. Ropean

    你好,看了你的讲解,我试着做了一下,可背景还是白色的。
    如果您有时间,帮我做个可以么。
    图片我都准备好了。
    xrspook 对 Ropean 的回复: 2009-05-08 14:48:41
    好的,请把素材发送到我邮箱(主页有),我尽量帮你试试吧。

有话要说

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

© 2004 - 2024 我的天 | Theme by xrspook | Power by WordPress