第十二課:GIF圖像綜述及彩信格式
在網(wǎng)頁設(shè)計擴展教程中也包含對圖像格式的敘述,但不會再重復(fù)介紹本課中關(guān)于GIF的知識,而是介紹其余圖像格式的特點及綜合使用的方法等。因此如果有想學(xué)習(xí)網(wǎng)頁設(shè)計擴展教程的讀者,務(wù)必掌握好本課的內(nèi)容。
現(xiàn)在我們已經(jīng)學(xué)習(xí)了許多制作動畫的方法,但大家對于動畫最終的呈現(xiàn)形式仍不十分清楚。動畫究竟怎樣輸出?在哪些地方使用?在使用中又有哪些需要注意的?這節(jié)課我們就來詳細說明這些問題。目前在Windows系統(tǒng)上的主要動畫圖像格式是GIF,其也可以直接在網(wǎng)頁中顯示,是目前應(yīng)用最廣泛的動畫圖像格式。包括現(xiàn)在流行的手機彩信中的動畫也屬于GIF格式。GIF格式可支持靜止和動畫兩種表現(xiàn)方式。有關(guān)靜止GIF的內(nèi)容我們將在網(wǎng)頁設(shè)計的擴展教程中介紹,這里就介紹GIF動畫格式。
動畫GIF格式的實現(xiàn)原理并不復(fù)雜,大家可將其理解為將多個靜止畫面(幀)組合在一起輪流顯示。這些畫面(幀)之間還有運算關(guān)系存在,與選區(qū)何路徑的運算類似,分別是添加、減去和消除。這是為了優(yōu)化動畫的字節(jié)數(shù)。某一幀如果是添加方式,則就會在保留前一幀圖像畫面的基礎(chǔ)上,再加上這一幀的內(nèi)容,綜合形成新的畫面。如常見的進度條動畫就是一個典型,如下圖所示,假設(shè)一個進度條由3幀組成,那么在我們眼中所看到的理論幀形態(tài)上來說,好像這3幀中分別保存了最短、中度和最長進度條的圖像。但其實在第2幀中只包含了第1幀中所沒有那個部分的像素,然后以添加方式作用于第1幀之上,形成了“1+2”的圖像。第3幀也是如此。這種優(yōu)化措施可有效減少圖像字節(jié)數(shù)。減去方式與之正好相反,是將前一幀圖像中的某些像素抹去,可用“倒退的進度條”去理解。消除方式則是將前一幀完全擦除,主要用在前后兩幀之間沒有任何關(guān)聯(lián)的時候,比如從全部紅色變?yōu)槿烤G色時,前后幀之間并沒有任何像素相同,則采取消除方式。在實際制作中Photoshop會自動根據(jù)圖像情況來決定采取何種方式,不需要人工干預(yù)。這些運算方式作為一個知識來了解就可以了。也可以作為構(gòu)思動畫時的一個參考。
現(xiàn)在要說以下GIF格式的一個重要特點,就是色彩數(shù)量的限制,GIF最大只能支持256色,也就是說一幅GIF圖像中最多只能有256種色彩。這一點在靜態(tài)GIF中尤為明顯,一些帶有豐富色彩的圖像,如多種色彩的漸變等,很難在GIF中完美的表現(xiàn)出來。如下左圖所示就是一幅照片的局部(注意是局部,并不是完整的全圖)在PNG24位、GIF256無仿色和擴散仿色的圖像情況。全圖是一幅在威尼斯拍攝的商店櫥窗,如下右圖所示??梢悦黠@看出PNG24位的色彩最好,可以看作原圖。而GIF格式的色彩表現(xiàn)力欠佳。在無仿色的情況下,原圖中的一些帶有色彩過渡的部位出現(xiàn)了色斑。在擴散仿色下色斑有所淡化,但顆粒感較重,這是仿色自身的原理造成的。有關(guān)仿色的概念在基礎(chǔ)教程中已介紹過了,可點此觀看相應(yīng)內(nèi)容。
需要注意的是,256色指的是針對整幅圖像而言的。如果整幅原圖像就是如下圖那樣的大小,則256色與原圖的區(qū)別就不是很大了。這是因為將色彩減少到256色的時候,Photoshop會根據(jù)原有圖像中的顏色進行編排,這個過程也稱為索引,就是將相近的多種顏色歸為一種。如果原圖中的色彩包含多個色相,那么256色平均分攤下來后,分給單個色相的數(shù)量就很少。相反,如果原圖中的色相基本一致或接近,則256色也可以很好地表達。這就是為什么之前的256無仿色看起來色斑明顯,而現(xiàn)在的色斑較不明顯的原因。因為前者的原圖中包含了較多色相,有些顏色被分配給藍色、紅色等,分配給黃色相的色彩較少。而后者的原圖中基本只有黃色相,這樣就不必為分配其他色相分配顏色了。
如下圖是一張在皮亞琴擦拍攝的街景照片,我們?nèi)∑洳煌牟课贿M行比較。下方的若干方塊是顏色表,其中的色塊就表示所用到的256種顏色。在顏色表中可以很容易的看出原圖的色彩構(gòu)成對色彩索引的影響。左側(cè)圖中色相較多,那么256色中分配給天空的藍色相數(shù)量較少,圖像中的天空出現(xiàn)了明顯的色斑。而右側(cè)圖中基本只包含天空部分,所以256色中的大部分都分配給了藍色相,使得圖像中的天空表現(xiàn)較好。
使用【文件>存儲為Web和設(shè)備所用格式】〖CTRL+SHIFT+ALT+S〗,將出現(xiàn)的保存儲設(shè)置框。這是我們最常用的輸出功能,在以后將要學(xué)習(xí)的網(wǎng)頁設(shè)計擴展教程中更是如此。進入設(shè)置界面后要注意紅色箭頭處,必須在“優(yōu)化”選項卡中看到的才是輸出后的實際效果,也就是在瀏覽器或看圖軟件中的效果。而“原稿”選項卡則是在Photoshop中的效果,不能作為參照的標準,這點要切記。綠色箭頭處是相應(yīng)的設(shè)置區(qū)域,從中我們將圖像格式設(shè)置為GIF,將顏色數(shù)設(shè)置為256,關(guān)閉仿色選項。其設(shè)定與上圖左側(cè)的效果對應(yīng)的。注意藍色箭頭處的字節(jié)數(shù)指示,這是一個很重要的指標,無論何時我們都必須使這個數(shù)字盡可能地小,否則將無法有效使用圖像或動畫。
要令字節(jié)數(shù)小,就需要減少顏色數(shù),顏色表中的色塊數(shù)也會相應(yīng)減少。但顯而易見的,太少的顏色會對圖像質(zhì)量造成明顯的影響,很容易形成色斑。開啟仿色雖然可以淡化色斑,但同時也會增加字節(jié)數(shù)。這就像架在字節(jié)數(shù)和質(zhì)量之間的一座蹺蹺板,兩者不能兼顧。作為準備在網(wǎng)絡(luò)上傳輸?shù)膱D像而言,字節(jié)數(shù)往往更為重要,因為大部分訪問者不會有耐心花上幾分鐘去等待一個網(wǎng)頁的顯示。而網(wǎng)頁除了圖像之外,還有其他一些代碼也需要占用字節(jié)數(shù),所以,盡量減少字節(jié)數(shù)是一個基本原則。當然這個原則與圖像質(zhì)量是沖突的,這就要求我們在構(gòu)思和制作的過程中要有足夠的技巧去平衡兩者。這些技巧包括:一、不要在動畫中使用過于豐富的色彩。其原因已經(jīng)說過了,較多的色彩會導(dǎo)致在索引后圖像質(zhì)量的下降,形成難看的色斑。既然如此還不如使用較為單一的色彩,雖然可能不夠華麗,但起碼能避免色斑這種硬傷的出現(xiàn)。二、如果一定需要豐富的色彩,則應(yīng)保持豐富色彩部分的像素在動畫中處于靜止狀態(tài)。因為GIF動畫的前后幀之間存在運算關(guān)系,位于靜止狀態(tài)的部分可以沿用到后續(xù)的幀,那些后續(xù)的幀中不必再存有這部分的圖像。這樣就可以在保持整個動畫具備豐富色彩的前提下有效地減少字節(jié)數(shù)。相反,如果色彩較豐富的像素也在運動的話,則后續(xù)的幀中就必須再存有色彩豐富的像素,會大大增加動畫的整體字節(jié)數(shù)。如下兩個動畫的對比,第一個保持小球的外發(fā)光、投影等部分不動,只有高光部分在變化。而第二個則是小球整體移動。在同樣幀率、同樣時長、同是256無仿色的前提下,前者的字節(jié)數(shù)是9.29K,后者則是57.1K。相差達6倍之多。那么它們在網(wǎng)絡(luò)上傳送所耗費的時間也就相差6倍。
范例動畫1
范例動畫2
我們在構(gòu)思動畫的時候,要事先考慮好其用途,如果是要用于網(wǎng)頁之中,那還要參考其在網(wǎng)頁中的重要性,如果不是很重要,屬于裝飾性的,就盡量減少字節(jié)數(shù)。這可從減少存儲時的色彩數(shù),以及良好的制作規(guī)劃兩個方面去實現(xiàn)。如果遇到帶有重要指示性的,一定需要色彩豐富或動感強烈的動畫時,則應(yīng)盡可能減少動畫的尺寸。因為小尺寸的圖像中像素總量也少,用256色進行索引就不會顯得那么局促。這點大家可自己動手實驗得知。
GIF還有一個重要特點就是支持背景透明,這使其可以與網(wǎng)頁的背景很好的融合。大家也可以在關(guān)閉背景圖層的前提下輸出透明背景的GIF。不過GIF的背景透明只能是兩種狀態(tài),要么全透明,要么全不透明,而不能是介于兩者之間的半透明。因此除非圖像的邊界是水平、垂直、45度斜線這三種情況,否則都會因為透明而形成明顯的鋸齒。如下圖所示是一組不同邊界的圖形在不同背景色下的表現(xiàn)。從中不難看出兩者的區(qū)別。需要注意的是,邊緣的鋸齒的形成原理并不只是圖像的問題,也有顯示器物理局限的因素,相關(guān)知識在基礎(chǔ)教程中提到過,可點此觀看相應(yīng)內(nèi)容。
對于帶有半透明像素(如投影樣式)的圖像而言,若要保存為透明背景,則需要開啟透明度抖動項目,這樣可以用微小的疏密不同的散點來模擬半透明。如下圖所示即是。可看出在“無透明度仿色”下的GIF盡管也是背景透明,但在原先半透明的部分仍然保留有白色,這樣只能適用于白色背景之上。而后者可適用于任何背景之上。如下右圖所示。需要注意的是,透明度仿色并不是一個完美的解決方案,甚至可以說是一個非常差的解決方案。但出于GIF本身對于透明度的限制而言,也是一種解決之道。在實際的制作中,如果確定要使用GIF格式,則應(yīng)避免在圖像的邊界生成半透明像素。換言之就是盡量避免使用透明度仿色。還有一點要注意的是,如果輸出的動畫是透明背景的,則可能改變在非透明狀態(tài)下各幀的運算關(guān)系,也可能導(dǎo)致動畫的字節(jié)數(shù)有所增加。
現(xiàn)在我們來說說將動畫用作手機彩信的用途。中國移動目前最大允許100K的彩信,那動畫最好控制在95K以下,要留一些空間給文字及短信自身的代碼。另外還需要注意的是動畫的尺寸,不同型號的手機由于其屏幕分辨率不同,能夠完美顯示的動畫尺寸也不相同。所謂完美顯示就是指手機屏幕分辨率與動畫尺寸一致或更大。如果動畫尺寸超過了手機屏幕的分辨率,手機則會將其縮小顯示。但縮小后的動畫質(zhì)量會變得很差。常見的屏幕尺寸有:128×128:常見于早期以及時下一些低端型號的手機上。是彩信動畫的基本尺寸,網(wǎng)絡(luò)上下載來的彩信動畫以這個尺寸居多,因為它可以運行于幾乎所有支持彩信的手機之上。128×160:雖然比之前的要多出一些像素,但主要用于顯示一些信息,所以能夠運行的動畫尺寸大多也仍為128×128。176×208、240×320:常見于Symbian及WindowsMobile等帶開放式操作系統(tǒng)的手機,都可播放全屏動畫。也有普通手機采用此分辨率的,能否支持全屏播放則不一定。480×640:常見于高端的手機型號,雖然理論上可以支持全屏播放同尺寸的動畫,但由于GIF本身的限制,播放時的流暢度得不到保證。在制作彩信動畫的時候,應(yīng)該以128×128作為首要考慮的尺寸,因為其兼容性最好,且由于尺寸小,同樣內(nèi)容的動畫字節(jié)數(shù)也比大尺寸的要小。當然,如果確定了接收者的屏幕分辨率,也可以采用與之相當?shù)某叽缰谱鳌?/p>
在“存儲為Web和設(shè)備所用格式”右下角有一個“Device Central...”的按鈕,按下后能在選定的手機設(shè)備上預(yù)覽動畫在手機上的效果。如下圖所示??稍谧髠?cè)的設(shè)備列表中選擇,圖中所選的是Nokia 3110。Adobe Device Central其實是一個移動設(shè)備的資料庫,可為面向移動設(shè)備制作的人員提供集中的環(huán)境。除了普通的顯示以外,還可以模擬手機屏幕背光關(guān)閉,以及戶外屏幕逆光等條件下的顯示情況。不過這些功能目前對于我們目前而言意義不大。
另外要注意的一個問題就是動畫的幀率,在電腦上基本都能流暢播放30fps的動畫,但手機的處理器不比臺式電腦,其資源有限。動畫的幀率應(yīng)設(shè)置為2~5fps為佳,針對開放式操作系統(tǒng)的手機,由于其處理器性能較普通手機出色,可設(shè)置為10fps或更高。同時影響手機播放效果的還有尺寸、總時長、字節(jié)數(shù)等因素。做出來的動畫最好是拿到手機中試播一下觀察其流暢程度。如果要輸出多宗不同尺寸的動畫,則最好使用矢量格式進行制作,并且矢量格式也是最佳的保存原始圖像的格式,符合我們一貫主張的“保留最大可編輯性”原則。