關(guān)于gif圖片(或png8)雜邊鋸齒的問(wèn)題
by zhangxinxu from http://www.zhangxinxu.com
本文地址: http://www.zhangxinxu.com/wordpress/?p=264
二、目錄 (單擊跳轉(zhuǎn)到相應(yīng)位置)
1.3 gif 圖片(或 png8 圖片)產(chǎn)生鋸齒的原因
2.2 通過(guò)雜邊設(shè)置弱化網(wǎng)頁(yè)中 gif 鋸齒的影響
三、文章主體
1.1 索引透明顏色與Alpha透明通道
要說(shuō)索引顏色透明,首先要講講什么是索引顏色, 百度百科 上有對(duì)索引顏色的解釋,我覺(jué)得很關(guān)鍵的一句是“挑選一副圖片中最有代表性的若干種顏色(通常不超過(guò)256種),編制成顏色表。”我的理解就是,找一些跟你圖片顏色最接近的一些顏色(不超過(guò)256種)組成你這張圖片。
而且,很重要的是,這些顏色里面有個(gè)很特別的顏色,就是索引透明色。這種顏色跟索引綠色,或是索引紅色屬于性質(zhì)相同的顏色,這是個(gè)顏色。而這種顏色表現(xiàn)的效果就是透明。 IE6 是支持索引透明色的,所以 gif 或 png8 這類索引顏色編碼的圖片的透明背景在 IE6 下是可以透明顯示的。
至于 Alpha 透明通道, 百度百科 上也有相關(guān)的解釋。Alpha通道一般用做不透明參數(shù),有些情況下用0%-100%表示,有時(shí)候用0-1表示,還有時(shí)候用0-255表示,兩頭分別表示完全透明和不透明。我知道的,css里,IE下有個(gè)透明度濾鏡,使用0%-100%表示的,例如下面:filter:alpha(opacity=50);而其他瀏覽器(Firefox,chrome等)是用0-1表示的,例如:opacity:0.5;在as中,透明度可以用0-1表示,例如:test_mc.alpha=0.5;也可以用0-255表示,但是以十六進(jìn)制的形式表示的,例如:0 ×80FF0000 就是 50% 透明的紅色。在 css3 中,顏色的表示也加入了 Alpha 通道。
平時(shí)我們看到的半透明圖片都是 png32 的,都使用了 8 位( 2 的 8 次方為 256 )的 Alpha 通道,否則無(wú)法表示半透明。或許有人或有疑問(wèn),不對(duì)啊,我用 photoshop 保存圖片的時(shí)候,就是使用的 png24 ,是支持半透明的啊。這里面其實(shí)是有一點(diǎn)小貓膩的,看下面這張截圖:
photoshop保存圖片為png24格式時(shí)部分界面
觀察黃色半透明覆蓋的區(qū)域,可以看到有個(gè)“透明度”選項(xiàng)被勾選了,這個(gè)選項(xiàng)被選中表示圖片支持 Alpha 透明通道,如果圖片確實(shí)是含有透明或半透明的 Alpha 通道屬性的,則保存的圖片就會(huì)含有 Alpha 通道,使得保存的圖片為透明或半透明,而這個(gè)保存的圖片其實(shí)是 png32 格式的,如果不勾選這個(gè)“透明度”,則保存的圖片就是正宗的 png24 的圖片,紅綠藍(lán)各 8 位通道,無(wú) Alpha 通道。這與 fireworks 中直接標(biāo)明 png24 , png32 有所不同。為什么 photoshop 會(huì)以 png24 加勾選“透明度”選項(xiàng)的方法表示 png32 的圖片呢,我個(gè)人觀點(diǎn)是(以下為我的推測(cè),僅供參考),讓圖片的保存更智能些,怎么說(shuō)呢,如果一張圖片不含有Alpha通道(不透明的),但用戶卻以png32的方式將其保存,則圖片中所含的8位Alpha通道則是多余的,而采用photoshop這種方式,如果一張圖片不含Alpha通道,即使用戶勾選了“透明度”選項(xiàng),圖片依然以png24形式保存,避免了多余的信息,這也許就是photoshop采用png24為頭加勾選“透明度”方式保存圖片的原因。
1.2 photoshop 的半透明平滑處理
不知道您注意到?jīng)]有,在 photoshop 中,繪制選區(qū)或圖形時(shí)有個(gè)“消除鋸齒”的勾選項(xiàng),例如下面截圖:
邊緣鋸齒與邊緣平滑可以說(shuō)是兩個(gè)相對(duì)的概念,勾選“消除鋸齒”選項(xiàng),就意味著對(duì)圖形的邊緣進(jìn)行平滑處理。在 photoshop 中,如何對(duì)圖形邊緣驚醒平滑處理的呢?就是使用半透明!
使用半透明填塞弧線轉(zhuǎn)角或斜線空隙,形成視覺(jué)上的自然過(guò)渡,從而產(chǎn)生平滑的效果。例如上圖所示,在線條的邊緣處使用了半透明,使得邊緣與周圍環(huán)境有了過(guò)渡,當(dāng)圖片原始比例顯示時(shí),這種半透明的過(guò)渡是看不見(jiàn)的,要把圖片放大到肉眼可見(jiàn)的像素級(jí)別就會(huì)清楚了看見(jiàn)這些半透明,這就是上圖所展示的。
1.3 gif 圖片(或 png8 圖片)產(chǎn)生鋸齒的原因
gif 圖片(或 png8 )產(chǎn)生鋸齒的原因一句話總結(jié)就是: gif 或 png8 只有透明索引顏色,沒(méi)有半透明索引顏色,不支持位圖中半透明邊緣,只好用其他索引色代替(例如白色 #FFFFFF ),從而產(chǎn)生雜色鋸齒。正如上面兩點(diǎn)提到了, gif 或 png8 是索引圖片,圖片中所有的顏色都是索引顏色,而這些所有的索引顏色中有關(guān)透明度的就只有一個(gè)透明索引顏色,并沒(méi)有半透明索引顏色,加上 photoshop 采用半透明實(shí)現(xiàn)邊緣平滑處理,所以導(dǎo)致 photoshop 導(dǎo)出的 gif 圖片(或 png8 )會(huì)產(chǎn)生雜邊鋸齒。
1.4 形狀與鋸齒之間的關(guān)系
雜邊鋸齒的大小以及有無(wú)與圖形的形狀是有關(guān)系的。一般來(lái)說(shuō),水平線,垂線,矩形是沒(méi)有雜邊鋸齒的問(wèn)題的,因?yàn)樗麄兌际峭耆畛湎袼氐摹5腔【€以及斜線就會(huì)遇到雜邊鋸齒的麻煩,尤其當(dāng)形狀不規(guī)則時(shí),例如下面這張放大 1600 倍的圖片一條斜線的截圖:
雜邊鋸齒
如果這張圖片在網(wǎng)頁(yè)中顯示,淺色背景還好,要是深色背景,那就很難看了。參見(jiàn) 實(shí)例頁(yè)面 圖片2。
即使是傾斜的直線也是存在雜邊鋸齒的問(wèn)題的,而其中雜邊鋸齒影響最小的就是 45 度斜線,這是因?yàn)? 45 度的斜線的所有雜邊鋸齒大小都是一致的,肉眼看到的是一排同樣的半像素(半像素之說(shuō)可能不準(zhǔn)確,僅用以說(shuō)明肉眼所見(jiàn)之感覺(jué))雜邊鋸齒,只要雜邊顏色不是與背景色對(duì)比很強(qiáng)烈,這種程度的鋸齒是可以忍受的。而其他角度的斜線的雜邊鋸齒大小則以等差大小排列,在非雜邊色背景下鋸齒明顯,可容忍度大大降低。
2. 如何有效的避免gif圖片的雜邊鋸齒
2.1 繪制帶有鋸齒的圖形或文字避免雜邊鋸齒
2.1.1 繪制帶有鋸齒的圖片
正如在 1.2 部分一開(kāi)始提到的, photoshop 中,選區(qū)或圖像像素填充工具選中后,在上部的選項(xiàng)欄里會(huì)出現(xiàn)一個(gè)“消除鋸齒”的選項(xiàng),默認(rèn)是勾選的,意思是說(shuō)繪制的圖形或選區(qū)邊緣是要平滑的,也就是部分邊緣要用半透明的顏色代替,這就會(huì)導(dǎo)致保存的 gif 圖片(或 png8 )的邊緣有雜邊鋸齒。換個(gè)角度想,如果不勾選這個(gè)“消除鋸齒”,則邊緣就不會(huì)平滑處理,就不會(huì)產(chǎn)生半透明過(guò)渡填充,也就不會(huì)出現(xiàn)雜邊鋸齒了。事實(shí)證明確實(shí)如此,例如下面這張不勾選這個(gè)“消除鋸齒”選項(xiàng)所繪制的橢圓。
雖然說(shuō)橢圓的邊緣不是很光滑,但是同時(shí)邊緣沒(méi)有了半透明的過(guò)渡,保存的gif圖片(或png8)就不會(huì)出現(xiàn)雜色鋸齒,不會(huì)出現(xiàn)圖片邊緣鋸齒雜色與背景不融合的情況了。
2.1.2 帶有鋸齒的文字
與繪制圖形一樣,文字也有使用未消除鋸齒的顯示方式,就是在設(shè)置消除鋸齒的下拉選項(xiàng)中選擇“無(wú)”,例如下面這張選項(xiàng)欄截圖的標(biāo)示:
下圖為未消除鋸齒的文字,在 實(shí)例頁(yè)面 圖片3中可以看到此圖片(以png8格式保存)在深色背景下的顯示,您可以看到?jīng)]有一點(diǎn)點(diǎn)雜邊鋸齒。
2.2 通過(guò)雜邊設(shè)置弱化網(wǎng)頁(yè)中 gif 鋸齒的影響
默認(rèn)的雜邊顏色是白色,通過(guò)更改這個(gè)顏色可以弱化網(wǎng)頁(yè)中 gif 圖片(或 png8 )雜色鋸齒的影響。這種改變分為兩種情況,一是將雜邊顏色設(shè)置為網(wǎng)頁(yè)的背景顏色,但是這不適用于背景經(jīng)常變化的情況;還有就是將雜邊顏色設(shè)置為圖片邊緣的顏色,但是這種情況不適用于圖片邊緣顏色很多的情況。兩種設(shè)置各有利弊和局限性,需要根據(jù)實(shí)際情況進(jìn)行調(diào)整。
舉例說(shuō)明,例如, 我 要保存一個(gè)對(duì)鋸齒進(jìn)行銳利處理的文字,以png8格式保存(相對(duì)于gif,圖片更小一些),對(duì)雜邊顏色進(jìn)行修改,一個(gè)改為字體顏色(#34538b),在保存一個(gè)雜邊顏色為黑色(#000000)的png8圖片。
這里設(shè)置雜邊顏色就不上圖了,因?yàn)閱螕簟捌渌焙髸?huì)出現(xiàn)一個(gè)選取顏色的對(duì)話框,直接選取顏色或輸入相應(yīng)的顏色參數(shù)就行了。藍(lán)色雜邊顏色的圖片為實(shí)例頁(yè)面中的圖片4,黑色雜邊的圖片為實(shí)例頁(yè)面中的圖片5,我們對(duì)比圖片2可以看到,對(duì)雜邊顏色進(jìn)行相應(yīng)的設(shè)置以后,在深色背景下,討厭的白色雜邊鋸齒基本上就不見(jiàn)了,整個(gè)顯示也舒服多了。但是這種處理是有局限性的,如果頁(yè)面背景經(jīng)常更換或是圖片本身不是純色或邊緣不是純色,則使用雜邊顏色設(shè)置的方法就不適宜采用了。還有一個(gè)“一勞永逸”、“一了百了”的方法就是設(shè)置雜邊“無(wú)”,這樣,您就不用擔(dān)心背景變化的問(wèn)題,或是圖片本身的問(wèn)題了。
2.3 使用 gif 透明圖片插件
在 photoshop5 里面有個(gè) GIF89a 導(dǎo)出的選項(xiàng),可以自動(dòng)導(dǎo)出消除了雜邊鋸齒的 gif 圖片,而且大小優(yōu)化的很好。但是后來(lái)的 photoshop 版本中將這一功能給刪除了。但是,通過(guò)文件移植可以在之后的 photoshop 版本中實(shí)現(xiàn) GIF89a 導(dǎo)出的功能。下載移植文件: gif89a.zip 。
使用方法如下:解壓文件,在文件夾中有個(gè) GIF89a Export.8be 的文件,將其復(fù)制到您現(xiàn)有 photoshop 安裝目錄下的 Plug-Ins/Import-Export 目錄下,例如 我 使用的是photoshop cs3,安裝在C盤下,則需要復(fù)制到C:/Program Files/Adobe/Adobe Photoshop CS3/Plug-Ins/Import-Export目錄下。然后重新啟動(dòng)photoshop就可以了。
例如,還是保存對(duì)“ gif 圖片鋸齒”這幾個(gè)文字銳利處理的圖片,選擇文件 -> 導(dǎo)出 ->GIF89a 輸出,然后單擊“好”就可以了。
您可以在 實(shí)例頁(yè)面 圖片6中看到導(dǎo)出的gif圖片效果,沒(méi)有雜邊鋸齒。
2.4 手工對(duì)圖片進(jìn)行像素?fù)溉?
看標(biāo)題您應(yīng)該知道該方法的意思了,就是采用手工的方法,將圖片放大到一定程度,將半透明的像素一個(gè)一個(gè)刪除或顏色填充,這種在 png 小圖標(biāo)處理或小圖標(biāo)制作的時(shí)候比較適應(yīng),如果是個(gè)很大的圖片,兄弟,您要做好打持久戰(zhàn)的準(zhǔn)備了!具體如何一個(gè)一個(gè)像素的處理圖片,我覺(jué)得簡(jiǎn)單帶過(guò)就行了,將圖片倍數(shù)放大到足夠大,例如 1600 倍,這時(shí)候,您可以清楚的看到圖片邊緣的半透明像素格,將其一個(gè)一個(gè)刪除就可以了,刪除方法建議用選區(qū)。
不過(guò)我不推薦這種生產(chǎn)效率低下的方法,如果您對(duì)我上面的方法有一定的理解的話,估計(jì)就不會(huì)對(duì)這個(gè)方法感興趣了。
3. 如果上面所有的討論,提供的方法都不適用
如果上面所有的討論,提供的方法都不適用,我想,您可能得使用png24以便支持一些半透明。我也知道,IE6不支持Alpha透明通道,不過(guò)沒(méi)有關(guān)系,我之前專門寫了篇關(guān)于IE6與png圖片打交道的文章: IE6下png背景不透明問(wèn)題的綜合拓展 。涵蓋面很廣,寫得也比較認(rèn)真,肯定會(huì)對(duì)您有所幫助的,兩篇文章珠聯(lián)璧合,相信以后遇到有關(guān)圖片透明度的問(wèn)題就不會(huì)再難倒您了。
五、參考文章
1. 維基百科 RGBA
2. 百度百科 阿爾法通道
3. 月光博客 Photoshop 的 GIF 透明圖片插件
原創(chuàng)文章,轉(zhuǎn)載請(qǐng)注明來(lái)自 張?chǎng)涡?鑫空間-鑫生活 [ http://www.zhangxinxu.com ]
本文地址: http://www.zhangxinxu.com/wordpress/?p=264
(本篇完)
源文檔 < http://www.zhangxinxu.com/wordpress/?p=264 >
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號(hào)聯(lián)系: 360901061
您的支持是博主寫作最大的動(dòng)力,如果您喜歡我的文章,感覺(jué)我的文章對(duì)您有幫助,請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點(diǎn)擊下面給點(diǎn)支持吧,站長(zhǎng)非常感激您!手機(jī)微信長(zhǎng)按不能支付解決辦法:請(qǐng)將微信支付二維碼保存到相冊(cè),切換到微信,然后點(diǎn)擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
