關于gif圖片（或png8）雜邊鋸齒的問題

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

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

二、目錄 （單擊跳轉到相應位置）

1. gif圖片產生雜邊鋸齒的原因

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

1.2 photoshop 的半透明平滑處理

1.3 gif 圖片（或 png8 圖片）產生鋸齒的原因

1.4 形狀與鋸齒之間的關系

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

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

2.2 通過雜邊設置弱化網頁中 gif 鋸齒的影響

2.3 使用 gif 透明圖片插件

2.4 手工對圖片進行像素摳取

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

三、文章主體

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

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

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

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

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

photoshop保存圖片為png24格式時部分界面

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

1.2 photoshop 的半透明平滑處理

不知道您注意到沒有，在 photoshop 中，繪制選區或圖形時有個“消除鋸齒”的勾選項，例如下面截圖：

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

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

1.3 gif 圖片（或 png8 圖片）產生鋸齒的原因

gif 圖片（或 png8 ）產生鋸齒的原因一句話總結就是： gif 或 png8 只有透明索引顏色，沒有半透明索引顏色，不支持位圖中半透明邊緣，只好用其他索引色代替（例如白色 #FFFFFF ），從而產生雜色鋸齒。正如上面兩點提到了， gif 或 png8 是索引圖片，圖片中所有的顏色都是索引顏色，而這些所有的索引顏色中有關透明度的就只有一個透明索引顏色，并沒有半透明索引顏色，加上 photoshop 采用半透明實現邊緣平滑處理，所以導致 photoshop 導出的 gif 圖片（或 png8 ）會產生雜邊鋸齒。

1.4 形狀與鋸齒之間的關系

雜邊鋸齒的大小以及有無與圖形的形狀是有關系的。一般來說，水平線，垂線，矩形是沒有雜邊鋸齒的問題的，因為他們都是完全填充像素的。但是弧線以及斜線就會遇到雜邊鋸齒的麻煩，尤其當形狀不規則時，例如下面這張放大 1600 倍的圖片一條斜線的截圖：

雜邊鋸齒

如果這張圖片在網頁中顯示，淺色背景還好，要是深色背景，那就很難看了。參見 實例頁面 圖片2。

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

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

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

2.1.1 繪制帶有鋸齒的圖片

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

雖然說橢圓的邊緣不是很光滑，但是同時邊緣沒有了半透明的過渡，保存的gif圖片（或png8）就不會出現雜色鋸齒，不會出現圖片邊緣鋸齒雜色與背景不融合的情況了。

2.1.2 帶有鋸齒的文字

與繪制圖形一樣，文字也有使用未消除鋸齒的顯示方式，就是在設置消除鋸齒的下拉選項中選擇“無”，例如下面這張選項欄截圖的標示：

下圖為未消除鋸齒的文字，在 實例頁面 圖片3中可以看到此圖片（以png8格式保存）在深色背景下的顯示，您可以看到沒有一點點雜邊鋸齒。

2.2 通過雜邊設置弱化網頁中 gif 鋸齒的影響

默認的雜邊顏色是白色，通過更改這個顏色可以弱化網頁中 gif 圖片（或 png8 ）雜色鋸齒的影響。這種改變分為兩種情況，一是將雜邊顏色設置為網頁的背景顏色，但是這不適用于背景經常變化的情況；還有就是將雜邊顏色設置為圖片邊緣的顏色，但是這種情況不適用于圖片邊緣顏色很多的情況。兩種設置各有利弊和局限性，需要根據實際情況進行調整。

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

這里設置雜邊顏色就不上圖了，因為單擊“其它…”后會出現一個選取顏色的對話框，直接選取顏色或輸入相應的顏色參數就行了。藍色雜邊顏色的圖片為實例頁面中的圖片4，黑色雜邊的圖片為實例頁面中的圖片5，我們對比圖片2可以看到，對雜邊顏色進行相應的設置以后，在深色背景下，討厭的白色雜邊鋸齒基本上就不見了，整個顯示也舒服多了。但是這種處理是有局限性的，如果頁面背景經常更換或是圖片本身不是純色或邊緣不是純色，則使用雜邊顏色設置的方法就不適宜采用了。還有一個“一勞永逸”、“一了百了”的方法就是設置雜邊“無”，這樣，您就不用擔心背景變化的問題，或是圖片本身的問題了。

2.3 使用 gif 透明圖片插件

在 photoshop5 里面有個 GIF89a 導出的選項，可以自動導出消除了雜邊鋸齒的 gif 圖片，而且大小優化的很好。但是后來的 photoshop 版本中將這一功能給刪除了。但是，通過文件移植可以在之后的 photoshop 版本中實現 GIF89a 導出的功能。下載移植文件： gif89a.zip 。

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

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

您可以在 實例頁面 圖片6中看到導出的gif圖片效果，沒有雜邊鋸齒。

2.4 手工對圖片進行像素摳取

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

不過我不推薦這種生產效率低下的方法，如果您對我上面的方法有一定的理解的話，估計就不會對這個方法感興趣了。

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

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

五、參考文章

1. 維基百科 RGBA

2. 百度百科 阿爾法通道

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

原創文章，轉載請注明來自 張鑫旭-鑫空間-鑫生活 [ http://www.zhangxinxu.com ]

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

（本篇完）

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

PNG32 透明問題(2)