第十二課：GIF圖像綜述及彩信格式

在網(wǎng)頁設(shè)計擴(kuò)展教程中也包含對圖像格式的敘述，但不會再重復(fù)介紹本課中關(guān)于GIF的知識，而是介紹其余圖像格式的特點(diǎn)及綜合使用的方法等。因此如果有想學(xué)習(xí)網(wǎng)頁設(shè)計擴(kuò)展教程的讀者，務(wù)必掌握好本課的內(nèi)容。

現(xiàn)在我們已經(jīng)學(xué)習(xí)了許多制作動畫的方法，但大家對于動畫最終的呈現(xiàn)形式仍不十分清楚。動畫究竟怎樣輸出？在哪些地方使用？在使用中又有哪些需要注意的？這節(jié)課我們就來詳細(xì)說明這些問題。目前在Windows系統(tǒng)上的主要動畫圖像格式是GIF，其也可以直接在網(wǎng)頁中顯示，是目前應(yīng)用最廣泛的動畫圖像格式。包括現(xiàn)在流行的手機(jī)彩信中的動畫也屬于GIF格式。GIF格式可支持靜止和動畫兩種表現(xiàn)方式。有關(guān)靜止GIF的內(nèi)容我們將在網(wǎng)頁設(shè)計的擴(kuò)展教程中介紹，這里就介紹GIF動畫格式。

動畫GIF格式的實現(xiàn)原理并不復(fù)雜，大家可將其理解為將多個靜止畫面(幀)組合在一起輪流顯示。這些畫面(幀)之間還有運(yùn)算關(guān)系存在，與選區(qū)何路徑的運(yùn)算類似，分別是添加、減去和消除。這是為了優(yōu)化動畫的字節(jié)數(shù)。某一幀如果是添加方式，則就會在保留前一幀圖像畫面的基礎(chǔ)上，再加上這一幀的內(nèi)容，綜合形成新的畫面。如常見的進(jìn)度條動畫就是一個典型，如下圖所示，假設(shè)一個進(jìn)度條由3幀組成，那么在我們眼中所看到的理論幀形態(tài)上來說，好像這3幀中分別保存了最短、中度和最長進(jìn)度條的圖像。但其實在第2幀中只包含了第1幀中所沒有那個部分的像素，然后以添加方式作用于第1幀之上，形成了“1+2”的圖像。第3幀也是如此。這種優(yōu)化措施可有效減少圖像字節(jié)數(shù)。減去方式與之正好相反，是將前一幀圖像中的某些像素抹去，可用“倒退的進(jìn)度條”去理解。消除方式則是將前一幀完全擦除，主要用在前后兩幀之間沒有任何關(guān)聯(lián)的時候，比如從全部紅色變?yōu)槿烤G色時，前后幀之間并沒有任何像素相同，則采取消除方式。在實際制作中Photoshop會自動根據(jù)圖像情況來決定采取何種方式，不需要人工干預(yù)。這些運(yùn)算方式作為一個知識來了解就可以了。也可以作為構(gòu)思動畫時的一個參考。

現(xiàn)在要說以下GIF格式的一個重要特點(diǎn)，就是色彩數(shù)量的限制，GIF最大只能支持256色，也就是說一幅GIF圖像中最多只能有256種色彩。這一點(diǎn)在靜態(tài)GIF中尤為明顯，一些帶有豐富色彩的圖像，如多種色彩的漸變等，很難在GIF中完美的表現(xiàn)出來。如下左圖所示就是一幅照片的局部(注意是局部，并不是完整的全圖)在PNG24位、GIF256無仿色和擴(kuò)散仿色的圖像情況。全圖是一幅在威尼斯拍攝的商店櫥窗，如下右圖所示。可以明顯看出PNG24位的色彩最好，可以看作原圖。而GIF格式的色彩表現(xiàn)力欠佳。在無仿色的情況下，原圖中的一些帶有色彩過渡的部位出現(xiàn)了色斑。在擴(kuò)散仿色下色斑有所淡化，但顆粒感較重，這是仿色自身的原理造成的。有關(guān)仿色的概念在基礎(chǔ)教程中已介紹過了，可點(diǎn)此觀看相應(yīng)內(nèi)容。

需要注意的是，256色指的是針對整幅圖像而言的。如果整幅原圖像就是如下圖那樣的大小，則256色與原圖的區(qū)別就不是很大了。這是因為將色彩減少到256色的時候，Photoshop會根據(jù)原有圖像中的顏色進(jìn)行編排，這個過程也稱為索引，就是將相近的多種顏色歸為一種。如果原圖中的色彩包含多個色相，那么256色平均分?jǐn)傁聛砗�，分給單個色相的數(shù)量就很少。相反，如果原圖中的色相基本一致或接近，則256色也可以很好地表達(dá)。這就是為什么之前的256無仿色看起來色斑明顯，而現(xiàn)在的色斑較不明顯的原因。因為前者的原圖中包含了較多色相，有些顏色被分配給藍(lán)色、紅色等，分配給黃色相的色彩較少。而后者的原圖中基本只有黃色相，這樣就不必為分配其他色相分配顏色了。

如下圖是一張在皮亞琴擦拍攝的街景照片，我們?nèi)∑洳煌牟课贿M(jìn)行比較。下方的若干方塊是顏色表，其中的色塊就表示所用到的256種顏色。在顏色表中可以很容易的看出原圖的色彩構(gòu)成對色彩索引的影響。左側(cè)圖中色相較多，那么256色中分配給天空的藍(lán)色相數(shù)量較少，圖像中的天空出現(xiàn)了明顯的色斑。而右側(cè)圖中基本只包含天空部分，所以256色中的大部分都分配給了藍(lán)色相，使得圖像中的天空表現(xiàn)較好。

使用【文件＞存儲為Web和設(shè)備所用格式】〖CTRL＋SHIFT＋ALT＋S〗，將出現(xiàn)的保存儲設(shè)置框。這是我們最常用的輸出功能，在以后將要學(xué)習(xí)的網(wǎng)頁設(shè)計擴(kuò)展教程中更是如此。進(jìn)入設(shè)置界面后要注意紅色箭頭處，必須在“優(yōu)化”選項卡中看到的才是輸出后的實際效果，也就是在瀏覽器或看圖軟件中的效果。而“原稿”選項卡則是在Photoshop中的效果，不能作為參照的標(biāo)準(zhǔn)，這點(diǎn)要切記。綠色箭頭處是相應(yīng)的設(shè)置區(qū)域，從中我們將圖像格式設(shè)置為GIF，將顏色數(shù)設(shè)置為256，關(guān)閉仿色選項。其設(shè)定與上圖左側(cè)的效果對應(yīng)的。注意藍(lán)色箭頭處的字節(jié)數(shù)指示，這是一個很重要的指標(biāo)，無論何時我們都必須使這個數(shù)字盡可能地小，否則將無法有效使用圖像或動畫。

要令字節(jié)數(shù)小，就需要減少顏色數(shù)，顏色表中的色塊數(shù)也會相應(yīng)減少。但顯而易見的，太少的顏色會對圖像質(zhì)量造成明顯的影響，很容易形成色斑。開啟仿色雖然可以淡化色斑，但同時也會增加字節(jié)數(shù)。這就像架在字節(jié)數(shù)和質(zhì)量之間的一座蹺蹺板，兩者不能兼顧。作為準(zhǔn)備在網(wǎng)絡(luò)上傳輸?shù)膱D像而言，字節(jié)數(shù)往往更為重要，因為大部分訪問者不會有耐心花上幾分鐘去等待一個網(wǎng)頁的顯示。而網(wǎng)頁除了圖像之外，還有其他一些代碼也需要占用字節(jié)數(shù)，所以，盡量減少字節(jié)數(shù)是一個基本原則。當(dāng)然這個原則與圖像質(zhì)量是沖突的，這就要求我們在構(gòu)思和制作的過程中要有足夠的技巧去平衡兩者。這些技巧包括：一、不要在動畫中使用過于豐富的色彩。其原因已經(jīng)說過了，較多的色彩會導(dǎo)致在索引后圖像質(zhì)量的下降，形成難看的色斑。既然如此還不如使用較為單一的色彩，雖然可能不夠華麗，但起碼能避免色斑這種硬傷的出現(xiàn)。二、如果一定需要豐富的色彩，則應(yīng)保持豐富色彩部分的像素在動畫中處于靜止?fàn)顟B(tài)。因為GIF動畫的前后幀之間存在運(yùn)算關(guān)系，位于靜止?fàn)顟B(tài)的部分可以沿用到后續(xù)的幀，那些后續(xù)的幀中不必再存有這部分的圖像。這樣就可以在保持整個動畫具備豐富色彩的前提下有效地減少字節(jié)數(shù)。相反，如果色彩較豐富的像素也在運(yùn)動的話，則后續(xù)的幀中就必須再存有色彩豐富的像素，會大大增加動畫的整體字節(jié)數(shù)。如下兩個動畫的對比，第一個保持小球的外發(fā)光、投影等部分不動，只有高光部分在變化。而第二個則是小球整體移動。在同樣幀率、同樣時長、同是256無仿色的前提下，前者的字節(jié)數(shù)是9.29K，后者則是57.1K。相差達(dá)6倍之多。那么它們在網(wǎng)絡(luò)上傳送所耗費(fèi)的時間也就相差6倍。

范例動畫1

范例動畫2

我們在構(gòu)思動畫的時候，要事先考慮好其用途，如果是要用于網(wǎng)頁之中，那還要參考其在網(wǎng)頁中的重要性，如果不是很重要，屬于裝飾性的，就盡量減少字節(jié)數(shù)。這可從減少存儲時的色彩數(shù)，以及良好的制作規(guī)劃兩個方面去實現(xiàn)。如果遇到帶有重要指示性的，一定需要色彩豐富或動感強(qiáng)烈的動畫時，則應(yīng)盡可能減少動畫的尺寸。因為小尺寸的圖像中像素總量也少，用256色進(jìn)行索引就不會顯得那么局促。這點(diǎn)大家可自己動手實驗得知。

GIF還有一個重要特點(diǎn)就是支持背景透明，這使其可以與網(wǎng)頁的背景很好的融合。大家也可以在關(guān)閉背景圖層的前提下輸出透明背景的GIF。不過GIF的背景透明只能是兩種狀態(tài)，要么全透明，要么全不透明，而不能是介于兩者之間的半透明。因此除非圖像的邊界是水平、垂直、45度斜線這三種情況，否則都會因為透明而形成明顯的鋸齒。如下圖所示是一組不同邊界的圖形在不同背景色下的表現(xiàn)。從中不難看出兩者的區(qū)別。需要注意的是，邊緣的鋸齒的形成原理并不只是圖像的問題，也有顯示器物理局限的因素，相關(guān)知識在基礎(chǔ)教程中提到過，可點(diǎn)此觀看相應(yīng)內(nèi)容。

對于帶有半透明像素(如投影樣式)的圖像而言，若要保存為透明背景，則需要開啟透明度抖動項目，這樣可以用微小的疏密不同的散點(diǎn)來模擬半透明。如下圖所示即是�？煽闯鲈�“無透明度仿色”下的GIF盡管也是背景透明，但在原先半透明的部分仍然保留有白色，這樣只能適用于白色背景之上。而后者可適用于任何背景之上。如下右圖所示。需要注意的是，透明度仿色并不是一個完美的解決方案，甚至可以說是一個非常差的解決方案。但出于GIF本身對于透明度的限制而言，也是一種解決之道。在實際的制作中，如果確定要使用GIF格式，則應(yīng)避免在圖像的邊界生成半透明像素。換言之就是盡量避免使用透明度仿色。還有一點(diǎn)要注意的是，如果輸出的動畫是透明背景的，則可能改變在非透明狀態(tài)下各幀的運(yùn)算關(guān)系，也可能導(dǎo)致動畫的字節(jié)數(shù)有所增加。

現(xiàn)在我們來說說將動畫用作手機(jī)彩信的用途。中國移動目前最大允許100K的彩信，那動畫最好控制在95K以下，要留一些空間給文字及短信自身的代碼。另外還需要注意的是動畫的尺寸，不同型號的手機(jī)由于其屏幕分辨率不同，能夠完美顯示的動畫尺寸也不相同。所謂完美顯示就是指手機(jī)屏幕分辨率與動畫尺寸一致或更大。如果動畫尺寸超過了手機(jī)屏幕的分辨率，手機(jī)則會將其縮小顯示。但縮小后的動畫質(zhì)量會變得很差。常見的屏幕尺寸有：128×128：常見于早期以及時下一些低端型號的手機(jī)上。是彩信動畫的基本尺寸，網(wǎng)絡(luò)上下載來的彩信動畫以這個尺寸居多，因為它可以運(yùn)行于幾乎所有支持彩信的手機(jī)之上。128×160：雖然比之前的要多出一些像素，但主要用于顯示一些信息，所以能夠運(yùn)行的動畫尺寸大多也仍為128×128。176×208、240×320：常見于Symbian及WindowsMobile等帶開放式操作系統(tǒng)的手機(jī)，都可播放全屏動畫。也有普通手機(jī)采用此分辨率的，能否支持全屏播放則不一定。480×640：常見于高端的手機(jī)型號，雖然理論上可以支持全屏播放同尺寸的動畫，但由于GIF本身的限制，播放時的流暢度得不到保證。在制作彩信動畫的時候，應(yīng)該以128×128作為首要考慮的尺寸，因為其兼容性最好，且由于尺寸小，同樣內(nèi)容的動畫字節(jié)數(shù)也比大尺寸的要小。當(dāng)然，如果確定了接收者的屏幕分辨率，也可以采用與之相當(dāng)?shù)某叽缰谱鳌?/p>

在“存儲為Web和設(shè)備所用格式”右下角有一個“Device Central...”的按鈕，按下后能在選定的手機(jī)設(shè)備上預(yù)覽動畫在手機(jī)上的效果。如下圖所示�？稍谧髠�(cè)的設(shè)備列表中選擇，圖中所選的是Nokia 3110。Adobe Device Central其實是一個移動設(shè)備的資料庫，可為面向移動設(shè)備制作的人員提供集中的環(huán)境。除了普通的顯示以外，還可以模擬手機(jī)屏幕背光關(guān)閉，以及戶外屏幕逆光等條件下的顯示情況。不過這些功能目前對于我們目前而言意義不大。

另外要注意的一個問題就是動畫的幀率，在電腦上基本都能流暢播放30fps的動畫，但手機(jī)的處理器不比臺式電腦，其資源有限。動畫的幀率應(yīng)設(shè)置為2~5fps為佳，針對開放式操作系統(tǒng)的手機(jī)，由于其處理器性能較普通手機(jī)出色，可設(shè)置為10fps或更高。同時影響手機(jī)播放效果的還有尺寸、總時長、字節(jié)數(shù)等因素。做出來的動畫最好是拿到手機(jī)中試播一下觀察其流暢程度。如果要輸出多宗不同尺寸的動畫，則最好使用矢量格式進(jìn)行制作，并且矢量格式也是最佳的保存原始圖像的格式，符合我們一貫主張的“保留最大可編輯性”原則。