關于gif圖片（或png8）雜邊鋸齒的問題
by zhangxinxu from http://www.zhangxinxu.com
本文地址： http://www.zhangxinxu.com/wordpress/?p=264
二、目錄 （單擊跳轉到相應位置）
三、文章主體
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 >
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
