[原创]用Fireworks制作半透明的png8图片

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

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

(图1)

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

（图2）

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

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

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

（图4）

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

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

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

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

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