在前面的一篇博文《Smush.it——優(yōu)化網(wǎng)頁(yè)圖片》中提到了png8也是可以做半透明效果的，根據(jù)Alex Walker在他的一篇文章《PNG8 - The Clear Winner》中所言，目前只有Fireworks(以下簡(jiǎn)稱FW)能夠做半透明的png8圖片，因?yàn)橹挥蠪W在導(dǎo)出的時(shí)候有“Alpha透明度”這個(gè)屬性，只有這個(gè)屬性能把png8中阻止其半透明的chunks去掉，如果你把一張做好的半透明png8重新用PS導(dǎo)出的話，去掉的chunks又會(huì)被重寫回去，圖片又變成不半透明的了。
好了，下面我們來(lái)看一下如何做一張可半透明的png8圖片：
(圖1)
如(圖1）打開(kāi)FW，做一張你需要的圖——我做了一只發(fā)光的燈泡，它的光暈是漸變的，你也可以做一個(gè)純色的半透明。然后我們調(diào)出“優(yōu)化”窗口對(duì)它進(jìn)行優(yōu)化。有幾點(diǎn)是必須要注意的：1）畫布必須是透明的；2）必須選擇alpha透明度；3）顏色使用“256色”或其它，不要使用“精確”。
（圖2）
優(yōu)化好之后就可以把它導(dǎo)出了。你可以用切片工具導(dǎo)出它，如果你只有一張圖也可以直接從“文件-導(dǎo)出(E)”導(dǎo)出它。
在FF、Chrome、Safari、Opera以及IE7以上的瀏覽器中，都能完美地顯示，只有在IE6中，它的半透明效果消失了，并且半透明降級(jí)成了全透明。現(xiàn)在讓我們來(lái)看看，為什么FW能做出半透明的png8圖片：
（圖4）
看（圖4），優(yōu)化的時(shí)候，如果你選擇“索引色透明”就會(huì)出現(xiàn)左邊那張圖，如果是“alpha透明度”就是右邊那張圖，注意看那些小色塊，“索引色透明”的色塊是純色的，而“alpha透明色”的色塊中有一小部分透明
，這一小部分透明成就了半透明的png8。而PS在保存導(dǎo)出圖片的時(shí)候沒(méi)有這樣的選項(xiàng)，它不具備這樣的功能。
半透明的效果真是讓人又愛(ài)又恨，愛(ài)它的華麗、美觀，恨它的難以實(shí)現(xiàn)，因?yàn)閷?shí)現(xiàn)起來(lái)太占資源了，對(duì)用戶體驗(yàn)來(lái)說(shuō)是塊雞肋。如果IE6能很好地支持png24，那會(huì)是一件多么愉快的事，但顯然現(xiàn)實(shí)是殘酷的。
但是即使讓IE6的用戶不看到華麗的半透明，他們也深信自己并沒(méi)有錯(cuò)過(guò)網(wǎng)頁(yè)中的任何東西，因?yàn)橥该鳟吘怪皇且粔K透明而已，只要設(shè)計(jì)師處理地得當(dāng)，透明與不透明同樣能讓用戶獲得良好的用戶體驗(yàn)，無(wú)障礙地獲得他們想要的信息。
所以，PNG8! Use it, give it a chance!
PS：有興趣的話看一下Alex Walker的原文（英文的）《PNG8 - The Clear Winner》里面有許多原理性的東西。
聯(lián)系客服
