關(guān)于gif圖片（或png8）雜邊鋸齒的問(wèn)題

by zhangxinxu from http://www.zhangxinxu.com

本文地址： http://www.zhangxinxu.com/wordpress/?p=264

二、目錄 （單擊跳轉(zhuǎn)到相應(yīng)位置）

1. gif圖片產(chǎn)生雜邊鋸齒的原因

1.1 索引透明顏色與 Alpha 透明顏色

1.2 photoshop 的半透明平滑處理

1.3 gif 圖片（或 png8 圖片）產(chǎn)生鋸齒的原因

1.4 形狀與鋸齒之間的關(guān)系

2. 如何有效的避免gif圖片的雜邊鋸齒

2.1 繪制帶有鋸齒的圖形或文字避免雜邊鋸齒

2.2 通過(guò)雜邊設(shè)置弱化網(wǎng)頁(yè)中 gif 鋸齒的影響

2.3 使用 gif 透明圖片插件

2.4 手工對(duì)圖片進(jìn)行像素?fù)溉?

3. 如果上面所有的討論，提供的方法都不適用

三、文章主體

1.1 索引透明顏色與Alpha透明通道

要說(shuō)索引顏色透明，首先要講講什么是索引顏色， 百度百科 上有對(duì)索引顏色的解釋，我覺(jué)得很關(guān)鍵的一句是“挑選一副圖片中最有代表性的若干種顏色（通常不超過(guò)256種），編制成顏色表。”我的理解就是，找一些跟你圖片顏色最接近的一些顏色（不超過(guò)256種）組成你這張圖片。

而且，很重要的是，這些顏色里面有個(gè)很特別的顏色，就是索引透明色。這種顏色跟索引綠色，或是索引紅色屬于性質(zhì)相同的顏色，這是個(gè)顏色。而這種顏色表現(xiàn)的效果就是透明。 IE6 是支持索引透明色的，所以 gif 或 png8 這類索引顏色編碼的圖片的透明背景在 IE6 下是可以透明顯示的。

至于 Alpha 透明通道， 百度百科 上也有相關(guān)的解釋。Alpha通道一般用做不透明參數(shù)，有些情況下用0%-100%表示，有時(shí)候用0-1表示，還有時(shí)候用0-255表示，兩頭分別表示完全透明和不透明。我知道的，css里，IE下有個(gè)透明度濾鏡，使用0%-100%表示的，例如下面：filter:alpha(opacity=50)；而其他瀏覽器（Firefox，chrome等）是用0-1表示的，例如：opacity:0.5；在as中，透明度可以用0-1表示，例如：test_mc.alpha=0.5;也可以用0-255表示，但是以十六進(jìn)制的形式表示的，例如：0 ×80FF0000 就是 50% 透明的紅色。在 css3 中，顏色的表示也加入了 Alpha 通道。

平時(shí)我們看到的半透明圖片都是 png32 的，都使用了 8 位（ 2 的 8 次方為 256 ）的 Alpha 通道，否則無(wú)法表示半透明。或許有人或有疑問(wèn)，不對(duì)啊，我用 photoshop 保存圖片的時(shí)候，就是使用的 png24 ，是支持半透明的啊。這里面其實(shí)是有一點(diǎn)小貓膩的，看下面這張截圖：

photoshop保存圖片為png24格式時(shí)部分界面

觀察黃色半透明覆蓋的區(qū)域，可以看到有個(gè)“透明度”選項(xiàng)被勾選了，這個(gè)選項(xiàng)被選中表示圖片支持 Alpha 透明通道，如果圖片確實(shí)是含有透明或半透明的 Alpha 通道屬性的，則保存的圖片就會(huì)含有 Alpha 通道，使得保存的圖片為透明或半透明，而這個(gè)保存的圖片其實(shí)是 png32 格式的，如果不勾選這個(gè)“透明度”，則保存的圖片就是正宗的 png24 的圖片，紅綠藍(lán)各 8 位通道，無(wú) Alpha 通道。這與 fireworks 中直接標(biāo)明 png24 ， png32 有所不同。為什么 photoshop 會(huì)以 png24 加勾選“透明度”選項(xiàng)的方法表示 png32 的圖片呢，我個(gè)人觀點(diǎn)是（以下為我的推測(cè)，僅供參考），讓圖片的保存更智能些，怎么說(shuō)呢，如果一張圖片不含有Alpha通道（不透明的），但用戶卻以png32的方式將其保存，則圖片中所含的8位Alpha通道則是多余的，而采用photoshop這種方式，如果一張圖片不含Alpha通道，即使用戶勾選了“透明度”選項(xiàng)，圖片依然以png24形式保存，避免了多余的信息，這也許就是photoshop采用png24為頭加勾選“透明度”方式保存圖片的原因。

1.2 photoshop 的半透明平滑處理

不知道您注意到?jīng)]有，在 photoshop 中，繪制選區(qū)或圖形時(shí)有個(gè)“消除鋸齒”的勾選項(xiàng)，例如下面截圖：

邊緣鋸齒與邊緣平滑可以說(shuō)是兩個(gè)相對(duì)的概念，勾選“消除鋸齒”選項(xiàng)，就意味著對(duì)圖形的邊緣進(jìn)行平滑處理。在 photoshop 中，如何對(duì)圖形邊緣驚醒平滑處理的呢？就是使用半透明！

使用半透明填塞弧線轉(zhuǎn)角或斜線空隙，形成視覺(jué)上的自然過(guò)渡，從而產(chǎn)生平滑的效果。例如上圖所示，在線條的邊緣處使用了半透明，使得邊緣與周圍環(huán)境有了過(guò)渡，當(dāng)圖片原始比例顯示時(shí)，這種半透明的過(guò)渡是看不見(jiàn)的，要把圖片放大到肉眼可見(jiàn)的像素級(jí)別就會(huì)清楚了看見(jiàn)這些半透明，這就是上圖所展示的。

1.3 gif 圖片（或 png8 圖片）產(chǎn)生鋸齒的原因

gif 圖片（或 png8 ）產(chǎn)生鋸齒的原因一句話總結(jié)就是： gif 或 png8 只有透明索引顏色，沒(méi)有半透明索引顏色，不支持位圖中半透明邊緣，只好用其他索引色代替（例如白色 #FFFFFF ），從而產(chǎn)生雜色鋸齒。正如上面兩點(diǎn)提到了， gif 或 png8 是索引圖片，圖片中所有的顏色都是索引顏色，而這些所有的索引顏色中有關(guān)透明度的就只有一個(gè)透明索引顏色，并沒(méi)有半透明索引顏色，加上 photoshop 采用半透明實(shí)現(xiàn)邊緣平滑處理，所以導(dǎo)致 photoshop 導(dǎo)出的 gif 圖片（或 png8 ）會(huì)產(chǎn)生雜邊鋸齒。

1.4 形狀與鋸齒之間的關(guān)系

雜邊鋸齒的大小以及有無(wú)與圖形的形狀是有關(guān)系的。一般來(lái)說(shuō)，水平線，垂線，矩形是沒(méi)有雜邊鋸齒的問(wèn)題的，因?yàn)樗麄兌际峭耆畛湎袼氐摹５腔【€以及斜線就會(huì)遇到雜邊鋸齒的麻煩，尤其當(dāng)形狀不規(guī)則時(shí)，例如下面這張放大 1600 倍的圖片一條斜線的截圖：

雜邊鋸齒

如果這張圖片在網(wǎng)頁(yè)中顯示，淺色背景還好，要是深色背景，那就很難看了。參見(jiàn) 實(shí)例頁(yè)面 圖片2。

即使是傾斜的直線也是存在雜邊鋸齒的問(wèn)題的，而其中雜邊鋸齒影響最小的就是 45 度斜線，這是因?yàn)? 45 度的斜線的所有雜邊鋸齒大小都是一致的，肉眼看到的是一排同樣的半像素（半像素之說(shuō)可能不準(zhǔn)確，僅用以說(shuō)明肉眼所見(jiàn)之感覺(jué)）雜邊鋸齒，只要雜邊顏色不是與背景色對(duì)比很強(qiáng)烈，這種程度的鋸齒是可以忍受的。而其他角度的斜線的雜邊鋸齒大小則以等差大小排列，在非雜邊色背景下鋸齒明顯，可容忍度大大降低。

2. 如何有效的避免gif圖片的雜邊鋸齒

2.1 繪制帶有鋸齒的圖形或文字避免雜邊鋸齒

2.1.1 繪制帶有鋸齒的圖片

正如在 1.2 部分一開(kāi)始提到的， photoshop 中，選區(qū)或圖像像素填充工具選中后，在上部的選項(xiàng)欄里會(huì)出現(xiàn)一個(gè)“消除鋸齒”的選項(xiàng)，默認(rèn)是勾選的，意思是說(shuō)繪制的圖形或選區(qū)邊緣是要平滑的，也就是部分邊緣要用半透明的顏色代替，這就會(huì)導(dǎo)致保存的 gif 圖片（或 png8 ）的邊緣有雜邊鋸齒。換個(gè)角度想，如果不勾選這個(gè)“消除鋸齒”，則邊緣就不會(huì)平滑處理，就不會(huì)產(chǎn)生半透明過(guò)渡填充，也就不會(huì)出現(xiàn)雜邊鋸齒了。事實(shí)證明確實(shí)如此，例如下面這張不勾選這個(gè)“消除鋸齒”選項(xiàng)所繪制的橢圓。

雖然說(shuō)橢圓的邊緣不是很光滑，但是同時(shí)邊緣沒(méi)有了半透明的過(guò)渡，保存的gif圖片（或png8）就不會(huì)出現(xiàn)雜色鋸齒，不會(huì)出現(xiàn)圖片邊緣鋸齒雜色與背景不融合的情況了。

2.1.2 帶有鋸齒的文字

與繪制圖形一樣，文字也有使用未消除鋸齒的顯示方式，就是在設(shè)置消除鋸齒的下拉選項(xiàng)中選擇“無(wú)”，例如下面這張選項(xiàng)欄截圖的標(biāo)示：

下圖為未消除鋸齒的文字，在 實(shí)例頁(yè)面 圖片3中可以看到此圖片（以png8格式保存）在深色背景下的顯示，您可以看到?jīng)]有一點(diǎn)點(diǎn)雜邊鋸齒。

2.2 通過(guò)雜邊設(shè)置弱化網(wǎng)頁(yè)中 gif 鋸齒的影響

默認(rèn)的雜邊顏色是白色，通過(guò)更改這個(gè)顏色可以弱化網(wǎng)頁(yè)中 gif 圖片（或 png8 ）雜色鋸齒的影響。這種改變分為兩種情況，一是將雜邊顏色設(shè)置為網(wǎng)頁(yè)的背景顏色，但是這不適用于背景經(jīng)常變化的情況；還有就是將雜邊顏色設(shè)置為圖片邊緣的顏色，但是這種情況不適用于圖片邊緣顏色很多的情況。兩種設(shè)置各有利弊和局限性，需要根據(jù)實(shí)際情況進(jìn)行調(diào)整。

舉例說(shuō)明，例如， 我 要保存一個(gè)對(duì)鋸齒進(jìn)行銳利處理的文字，以png8格式保存（相對(duì)于gif，圖片更小一些），對(duì)雜邊顏色進(jìn)行修改，一個(gè)改為字體顏色（#34538b），在保存一個(gè)雜邊顏色為黑色（#000000）的png8圖片。

這里設(shè)置雜邊顏色就不上圖了，因?yàn)閱螕簟捌渌焙髸?huì)出現(xiàn)一個(gè)選取顏色的對(duì)話框，直接選取顏色或輸入相應(yīng)的顏色參數(shù)就行了。藍(lán)色雜邊顏色的圖片為實(shí)例頁(yè)面中的圖片4，黑色雜邊的圖片為實(shí)例頁(yè)面中的圖片5，我們對(duì)比圖片2可以看到，對(duì)雜邊顏色進(jìn)行相應(yīng)的設(shè)置以后，在深色背景下，討厭的白色雜邊鋸齒基本上就不見(jiàn)了，整個(gè)顯示也舒服多了。但是這種處理是有局限性的，如果頁(yè)面背景經(jīng)常更換或是圖片本身不是純色或邊緣不是純色，則使用雜邊顏色設(shè)置的方法就不適宜采用了。還有一個(gè)“一勞永逸”、“一了百了”的方法就是設(shè)置雜邊“無(wú)”，這樣，您就不用擔(dān)心背景變化的問(wèn)題，或是圖片本身的問(wèn)題了。

2.3 使用 gif 透明圖片插件

在 photoshop5 里面有個(gè) GIF89a 導(dǎo)出的選項(xiàng)，可以自動(dòng)導(dǎo)出消除了雜邊鋸齒的 gif 圖片，而且大小優(yōu)化的很好。但是后來(lái)的 photoshop 版本中將這一功能給刪除了。但是，通過(guò)文件移植可以在之后的 photoshop 版本中實(shí)現(xiàn) GIF89a 導(dǎo)出的功能。下載移植文件： gif89a.zip 。

使用方法如下：解壓文件，在文件夾中有個(gè) GIF89a Export.8be 的文件，將其復(fù)制到您現(xiàn)有 photoshop 安裝目錄下的 Plug-Ins/Import-Export 目錄下，例如 我 使用的是photoshop cs3，安裝在C盤下，則需要復(fù)制到C:/Program Files/Adobe/Adobe Photoshop CS3/Plug-Ins/Import-Export目錄下。然后重新啟動(dòng)photoshop就可以了。

例如，還是保存對(duì)“ gif 圖片鋸齒”這幾個(gè)文字銳利處理的圖片，選擇文件 -> 導(dǎo)出 ->GIF89a 輸出，然后單擊“好”就可以了。

您可以在 實(shí)例頁(yè)面 圖片6中看到導(dǎo)出的gif圖片效果，沒(méi)有雜邊鋸齒。

2.4 手工對(duì)圖片進(jìn)行像素?fù)溉?

看標(biāo)題您應(yīng)該知道該方法的意思了，就是采用手工的方法，將圖片放大到一定程度，將半透明的像素一個(gè)一個(gè)刪除或顏色填充，這種在 png 小圖標(biāo)處理或小圖標(biāo)制作的時(shí)候比較適應(yīng)，如果是個(gè)很大的圖片，兄弟，您要做好打持久戰(zhàn)的準(zhǔn)備了！具體如何一個(gè)一個(gè)像素的處理圖片，我覺(jué)得簡(jiǎn)單帶過(guò)就行了，將圖片倍數(shù)放大到足夠大，例如 1600 倍，這時(shí)候，您可以清楚的看到圖片邊緣的半透明像素格，將其一個(gè)一個(gè)刪除就可以了，刪除方法建議用選區(qū)。

不過(guò)我不推薦這種生產(chǎn)效率低下的方法，如果您對(duì)我上面的方法有一定的理解的話，估計(jì)就不會(huì)對(duì)這個(gè)方法感興趣了。

3. 如果上面所有的討論，提供的方法都不適用

如果上面所有的討論，提供的方法都不適用，我想，您可能得使用png24以便支持一些半透明。我也知道，IE6不支持Alpha透明通道，不過(guò)沒(méi)有關(guān)系，我之前專門寫了篇關(guān)于IE6與png圖片打交道的文章： IE6下png背景不透明問(wèn)題的綜合拓展 。涵蓋面很廣，寫得也比較認(rèn)真，肯定會(huì)對(duì)您有所幫助的，兩篇文章珠聯(lián)璧合，相信以后遇到有關(guān)圖片透明度的問(wèn)題就不會(huì)再難倒您了。

五、參考文章

1. 維基百科 RGBA

2. 百度百科 阿爾法通道

3. 月光博客 Photoshop 的 GIF 透明圖片插件

原創(chuàng)文章，轉(zhuǎn)載請(qǐng)注明來(lái)自 張?chǎng)涡?鑫空間-鑫生活 [ http://www.zhangxinxu.com ]

本文地址： http://www.zhangxinxu.com/wordpress/?p=264

（本篇完）

源文檔 < http://www.zhangxinxu.com/wordpress/?p=264 >

PNG32 透明問(wèn)題(2)