rss· 投稿· 设为首页· 加入收藏· 繁體版
当前位置: 火魔网 » 平面设计 » Fireworks

用Fireworks制作半透明的png8图片

在前面的一篇博文《》中提到了png8也是可以做半透明效果的,根据Alex Walker在他的一篇文章《》中所言,目前只有Fireworks(以下简称FW)能够做半透明的png8图片,因为只有FW在导出的时候有“Alpha透明度”这个属性,只有这个属性能把png8中阻止其半透明的chunks去掉,如果你把一张做好的半透明png8重新用PS导出的话,去掉的chunks又会被重写回去,图片又变成不半透明的了。

好了,下面我们来看一下如何做一张可半透明的png8图片:

用Fireworks制作半透明的png8图片(图1)

如(图1)打开FW,做一张你需要的图――我做了一只发光的灯泡,它的光晕是渐变的,你也可以做一个纯色的半透明。然后我们调出“优化”窗口对它进行优化。有几点是必须要注意的:1)画布必须是透明的;2)必须选择alpha透明度;3)颜色使用“256色”或其它,不要使用“精确”。

用Fireworks制作半透明的png8图片(图2)

优化好之后就可以把它导出了。你可以用切片工具导出它,如果你只有一张图也可以直接从“文件-导出(E)”导出它。

在FF、Chrome、Safari、Opera以及IE7以上的浏览器中,都能完美地显示,只有在IE6中,它的半透明效果消失了,并且半透明降级成了全透明。

现在让我们来看看,为什么FW能做出半透明的png8图片:

用Fireworks制作半透明的png8图片(图4)

看(图4),优化的时候,如果你选择“索引色透明”就会出现左边那张图,如果是“alpha透明度”就是右边那张图,注意看那些小色块,“索引色透明”的色块是纯色的,而“alpha透明色”的色块中有一小部分透明,这一小部分透明成就了半透明的png8。而PS在保存导出图片的时候没有这样的选项,它不具备这样的功能。

半透明的效果真是让人又爱又恨,爱它的华丽、美观,恨它的难以实现,因为实现起来太占资源了,对用户体验来说是块鸡肋。如果IE6能很好地支持png24,那会是一件多么愉快的事,但显然现实是残酷的。

但是即使让IE6的用户不看到华丽的半透明,他们也深信自己并没有错过网页中的任何东西,因为透明毕竟只是一块透明而已,只要设计师处理地得当,透明与不透明同样能让用户获得良好的用户体验,无障碍地获得他们想要的信息。

所以,PNG8! Use it, give it a chance!

PS:有兴趣的话看一下Alex Walker的原文(英文的)《》里面有许多原理性的东西。

顶一下
(0)
踩一下
(0)