HTML5网页设计

基础及技巧

用Fireworks制作png8半透明图片

时间:2014-07-05 10:43来自:未知作者:user点击:
根据Alex Walker在他的一篇文章《 PNG8 - The Clear Winner 》中所言,目前只有Fireworks(以下简称FW)能够做半透明的png8图片。

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

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

用Fireworks制作半透明的png8图片 - 以斯贴 - Esther

(图1)

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

用Fireworks制作半透明的png8图片 - 以斯贴 - Esther

(图2)

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

(图3)

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

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

[原创]用Fireworks制作半透明的png8图片 - 以斯贴 - Esther

(图4)

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

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

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

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

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

当前文章地址:http://www.shejicool.com/study/photoshop/460.html

相关文章
阅完本篇文章?您还可以: 收藏本文 文章挑错 朋友推荐