国产午夜精品一区二区三区不-国产午夜精品一区二区三区不卡-国产午夜精品一区二区三区极品-国产午夜精品一区二区三区老-国产午夜精品一区二区三区漫-国产午夜精品一区二区三区嫩草

聊城網站制作公司,聊城網站建設,聊城網站優化,聊城網絡公司,聊城網站推廣,聊城網站運營,聊城網絡運營,聊城搜索引擎優化,聊城網頁設計,聊城網站制作
 
 
公司擁有五年的網站建設經驗,專業網站制作,推廣及網站優化,有大量優秀客戶案例
網站建設 | 設為首頁 | 加入收藏 | 聯系我們  
公告:熱烈慶祝聊城精英網絡2010版官方網站改版成功!
當前位置 :首頁 > 網頁知識  

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

http://m.zjgjyh.cn   2011-11-5 10:14:08 來源:精英網絡   人氣:

二、目錄(單擊跳轉到相應位置)

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格式時部分界面

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消除鋸齒選項
   邊緣鋸齒與邊緣平滑可以說是兩個相對的概念,勾選“消除鋸齒”選項,就意味著對圖形的邊緣進行平滑處理。在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輸出,然后單擊“好”就可以了。
導出gif89a
您可以在實例頁面圖片6中看到導出的gif圖片效果,沒有雜邊鋸齒。

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

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

專業設計團隊
滿足您的各種設計要求
實力程序開發團隊
為您定制各種程序模塊
后臺管理高效安全
方便更新上傳網站資料
全球高速訪問
無盲區、定制異地備份
專業客服團隊
解決一切使用難題
贈送大容量空間郵箱
免費優化推廣
   
關于我們 | 工作機會 | 付款方式 | 網站制作 | 網頁制作 | 網頁設計 | 網絡公司 | 聯系我們 | 網站地圖
版權所有:聊城精英網絡科技有限公司 © 2005-2010 All Rights Reserved.
咨詢專線:0635-6950368 技術專線:15192175820 在線QQ:312817927 1485871644
地址:聊城市閘口科技市場 郵編:252000 蘇ICP備10112026號
主站蜘蛛池模板: 亚洲国产成人精品女人久久久国产 | 国产午夜精品在线 | 日韩欧美中文字幕在线韩免费 | 日本精品无码特级毛片 | 免费播放美女一级毛片 | 阿娇双腿张开实干12次 | 日本高清视频在线无吗 | 成人无码午夜在线观看 | 日韩欧美在线图片精品 | 亚洲欧美日韩中文字幕二区 | 一本色道久久综合亚洲精品不卡 | 7799精品视频免费天天看 | 亚洲大成色www永久网站动图 | 国产电影一区二区三区爱妃记 | 亚洲成在人线在线播放无码 | 亚洲av综合av一区二区三区 | 精品人妻一区二区三区含羞草 | 真实国产乱子伦对白视频37P | 伊人久久大香线蕉观看 | 久久久久久久国产精品视频 | 亚洲成熟网站源码公司51专业提供高质量网站解决方案 | 亚洲精品天堂 | 日韩va无码中文字幕 | 日韩欧美国产偷亚洲清高 | 国产欧美精品aaaaaa片 | 久久久久亚洲视频 | 亚欧国产国产制服无码视频 | 亚洲国产精品有声小说 | 日本一级一二三不卡 | 成全高清mv电影免费观看 | 东京热无码中文字幕av专区 | 亚洲人成伊人成综合无码 | 伊人久久大香线蕉av五月天 | 亚洲精品一区二区三区老牛吃嫩草 | 少妇高潮喷水日出白浆 | 无套内射蜜桃小视频 | 亚洲一卡2卡3卡4卡国产网站 | 国产三级在线观看免费 | 国产成人精品视频一区二区不卡 | 免费无码av片在线观看国产 | 精品无码一区二区视频在线 |