网络编程
位置:首页>> 网络编程>> 网页设计>> 设计地址栏透明icon图标方法

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

作者:xrspook  发布时间:2008-10-25 16:42:00 

标签: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!!!!

0
投稿

猜你喜欢

  • 我在初学时查阅过大量相关资料,发现其中提供的很多方法实际操作起来并不是那么回事。对于简单的应用,这些资料也许是有帮助的,但仅限于此,因为它们
  • 深底色风格的页面设计很受欢迎,它可以创造出别致优雅、极富创造力的效果。深底色设计适用于许多网站类型,但并非所有。这种风格应该在恰当的条件下使
  • 启发式评估法(Heuristic Evaluation)是一种用来发现用户界面设计中的可用性问题从而使这些问题作为再设计过程中的一部分被重视
  • 以前写过一个标签效果,外观虽然好看,但代码不太规范,实现的方法比较繁冗。需要注意的是标签的背景图,两种状态,激活的标签背景为蓝色,反之为灰色
  • 本文将展示一个开源JavaScript库,该脚本库给AJAX应用程序带来了书签和后退按钮支持。在学习完这个教程后,开发人员将能够获得对一个A
  • 问:怎样实现ORACLE中用一条SQL实现其它进制到十进制的转换?答:具体示例如下:-----二进制转换十进制---------------
  • 一个什么都不懂的家伙非跟我要个sql查询器 随便写了一个,当然为了数据安全,要过滤掉一个sql关键词和系统中的一些表了 哦,对了,里面的一些
  • 虽然现在IE还是主导了整个浏览器的天下,但IE靠的并非是产品设计上的优势,而是依靠windows的力量,因为绝大多数的初级网民认为IE的产品
  • 阅读上一篇:FrontPage2002简明教程六:图片库 虽然FrontPage已经给我们提供了很多面很强大的所见即所得的工具,但是随着HT
  • 神奇创意相框! 是的,主要利用position的relative, absolute, z-index属性。结合Photo Frame(相框
  • 很多时候,设计师们都会通过各种渠道去了解用户的需求,然而从这些渠道反馈回来的信息大部分只是用户的期望并不是真正的用户需求,但是很多时候这些期
  • 本文介绍了prototype.js常用函数及其使用方法例子说明函数名      
  • javascript编写的窗口代码,可以关闭显示窗口,可以最小化或还原窗口大小,还可以鼠标移动窗口,不错的一个功能。截图如下:<htm
  • 许多人在编写程序的时候因为贪图方便或不小心使用到程式的保留字,有时明明程序没有错,就是无法正确执行。您知道有哪些常见的保留字吗? 下面的都是
  • 文章背景:某天,我的一个同事给我看了CSDN上面的一篇关于编程语言排行榜的文章,里面我看到VB还是排名很不错的,我就说,asp(vbscri
  • 文章主要讲术了一些SQL Server新的Bug,帮您认识这些被忽略的SQL Server注入技巧。1.关于Openrowset和Opend
  • 用下列代码判断表单提交到服务器的数据是否有谈话内容,如果没有的话就不作处理了:if len(usersays)<>0&
  • 从CNNIC在2009年的报告中可以看到,超过80%的网民购物之前都要看评论(包括本站、其他站评论),超过80%的网民都比较信任口碑(包括网
  • 网上的SQL优化的文章实在是很多,说实在的,我也曾经到处找这样的文章,什么不要使用IN了,什么OR了,什么AND了,很多很多,还有很多人拿出
  • 网页中使用flash可以增强页面的动态交互效果,特别是用flash来制作广告,效果更好。经常使用flash的人,可能就碰到了flash会遮住
手机版 网络编程 asp之家 www.aspxhome.com