關於gif圖片(或png8)雜邊鋸齒的問題

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,是支持半透明的啊。這裏面其實是有一點小貓膩的,看下面這張截圖:

觀察黃色半透明覆蓋的區域,可以看到有個“透明度”選項被勾選了,這個選項被選中表示圖片支持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. 如何有效的避免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輸出,然後單擊“好”就可以了。


  2.4 手工對圖片進行像素摳取
   看標題您應該知道該方法的意思了,就是採用手工的方法,將圖片放大到一定程度,將半透明的像素一個一個刪除或顏色填充,這種在png小圖標處理或小圖標製作的時候比較適應,如果是個很大的圖片,兄弟,您要做好打持久戰的準備了!具體如何一個一個像素的處理圖片,我覺得簡單帶過就行了,將圖片倍數放大到足夠大,例如1600倍,這時候,您可以清楚的看到圖片邊緣的半透明像素格,將其一個一個刪除就可以了,刪除方法建議用選區。
   不過我不推薦這種生產效率低下的方法,如果您對我上面的方法有一定的理解的話,估計就不會對這個方法感興趣了。

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



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章