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

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. 若是上面全部的討論，提供的方法都不適用

3、文章主體

<strong id="g1'>1. gif圖片產生雜邊鋸齒的緣由

   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表示，可是以十六進制的形式表示的，例如：0x80FF0000就是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背景不透明問題的綜合拓展。涵蓋面很廣，寫得也比較認真，確定會對您有所幫助的，兩篇文章珠聯璧合，相信之後遇到有關圖片透明度的問題就不會再難倒您了。