二、目錄（單擊跳轉到相應位置）
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通道，否則無法表示半透明�；蛟S有人或有疑問，不對啊，我用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背景不透明問題的綜合拓展。涵蓋面很廣，寫得也比較認真，肯定會對您有所幫助的，兩篇文章珠聯璧合，相信以后遇到有關圖片透明度的問題就不會再難倒您了。
