在網頁設計擴展教程中也包含對圖像格式的敘述，但不會再重復介紹本課中關于GIF的知識，而是介紹其余圖像格式的特點及綜合使用的方法等。因此如果有想學習網頁設計擴展教程的讀者，務必掌握好本課的內容。

現在我們已經學習了許多制作動畫的方法，但大家對于動畫最終的呈現形式仍不十分清楚。動畫究竟怎樣輸出？在哪些地方使用？在使用中又有哪些需要注意的？這節課我們就來詳細說明這些問題。

目前在Windows系統上的主要動畫圖像格式是GIF，其也可以直接在網頁中顯示，是目前應用最廣泛的動畫圖像格式。包括現在流行的手機彩信中的動畫也屬于GIF格式。GIF格式可支持靜止和動畫兩種表現方式。無論靜止還是動畫，其特點是相同的。

動畫GIF格式的實現原理并不復雜，大家可將其理解為將多個靜止畫面(幀)組合在一起輪流顯示。這些畫面(幀)之間還有運算關系存在，與選區何路徑的運算類似，分別是添加、減去和消除。這是為了優化動畫的字節數。

某一幀如果是添加方式，則就會在保留前一幀圖像畫面的基礎上，再加上這一幀的內容，綜合形成新的畫面。如常見的進度條動畫就是一個典型，如下圖所示，假設一個進度條由3幀組成，那么在我們眼中所看到的理論幀形態上來說，好像這3幀中分別保存了最短、中度和最長進度條的圖像。但其實在第2幀中只包含了第1幀中所沒有那個部分的像素，然后以添加方式作用于第1幀之上，形成了“1+2”的圖像。第3幀也是如此。這種優化措施可有效減少圖像字節數。

減去方式與之正好相反，是將前一幀圖像中的某些像素抹去，可用“倒退的進度條”去理解。消除方式則是將前一幀完全擦除，主要用在前后兩幀之間沒有任何關聯的時候，比如從全部紅色變為全部綠色時，前后幀之間并沒有任何像素相同，則采取消除方式。

在實際制作中Photoshop會自動根據圖像情況來決定采取何種方式，不需要人工干預。這些運算方式作為一個知識來了解就可以了。也可以作為構思動畫時的一個參考。

圖1

現在要說以下GIF格式的一個重要特點，就是色彩數量的限制，GIF最大只能支持256色，也就是說一幅GIF圖像中最多只能有256種色彩。這一點在靜態GIF中尤為明顯，一些帶有豐富色彩的圖像，如多種色彩的漸變等，很難在GIF中完美的表現出來。如下左圖所示就是一幅照片的局部(注意是局部，并不是完整的全圖)在PNG24位、GIF256無仿色和擴散仿色的圖像情況。全圖是一幅在威尼斯拍攝的商店櫥窗，如下右圖所示。

可以明顯看出PNG24位的色彩最好，可以看作原圖。而GIF格式的色彩表現力欠佳。在無仿色的情況下，原圖中的一些帶有色彩過渡的部位出現了色斑。在擴散仿色下色斑有所淡化，但顆粒感較重，這是仿色自身的原理造成的。有關仿色的概念在基礎教程中已介紹過了，可點此觀看相應內容。

圖2

圖3

需要注意的是，256色指的是針對整幅圖像而言的。如果整幅原圖像就是如下圖那樣的大小，則256色與原圖的區別就不是很大了。這是因為將色彩減少到256色的時候，Photoshop會根據原有圖像中的顏色進行編排，這個過程也稱為索引，就是將相近的多種顏色歸為一種。

如果原圖中的色彩包含多個色相，那么256色平均分攤下來后，分給單個色相的數量就很少。相反，如果原圖中的色相基本一致或接近，則256色也可以很好地表達。這就是為什么之前的256無仿色看起來色斑明顯，而現在的色斑較不明顯的原因。因為前者的原圖中包含了較多色相，有些顏色被分配給藍色、紅色等，分配給黃色相的色彩較少。而后者的原圖中基本只有黃色相，這樣就不必為分配其他色相分配顏色了。

圖4

如下圖是一張在皮亞琴擦拍攝的街景照片，我們取其不同的部位進行比較。下方的若干方塊是顏色表，其中的色塊就表示所用到的256種顏色。在顏色表中可以很容易的看出原圖的色彩構成對色彩索引的影響。左側圖中色相較多，那么256色中分配給天空的藍色相數量較少，圖像中的天空出現了明顯的色斑。而右側圖中基本只包含天空部分，所以256色中的大部分都分配給了藍色相，使得圖像中的天空表現較好。

圖5

使用【文件＞存儲為Web和設備所用格式】〖CTRL＋SHIFT＋ALT＋S〗，將出現的保存儲設置框。這是我們最常用的輸出功能，在以后將要學習的網頁設計擴展教程中更是如此。

進入設置界面后要注意紅色箭頭處，必須在“優化”選項卡中看到的才是輸出后的實際效果，也就是在瀏覽器或看圖軟件中的效果。而“原稿”選項卡則是在Photoshop中的效果，不能作為參照的標準，這點要切記。

綠色箭頭處是相應的設置區域，從中我們將圖像格式設置為GIF，將顏色數設置為256，關閉仿色選項。其設定與上圖左側的效果對應的。

注意藍色箭頭處的字節數指示，這是一個很重要的指標，無論何時我們都必須使這個數字盡可能地小，否則將無法有效使用圖像或動畫。

圖6

要令字節數小，就需要減少顏色數，顏色表中的色塊數也會相應減少。但顯而易見的，太少的顏色會對圖像質量造成明顯的影響，很容易形成色斑。開啟仿色雖然可以淡化色斑，但同時也會增加字節數。這就像架在字節數和質量之間的一座蹺蹺板，兩者不能兼顧。作為準備在網絡上傳輸的圖像而言，字節數往往更為重要，因為大部分訪問者不會有耐心花上幾分鐘去等待一個網頁的顯示。而網頁除了圖像之外，還有其他一些代碼也需要占用字節數，所以，盡量減少字節數是一個基本原則。當然這個原則與圖像質量是沖突的，這就要求我們在構思和制作的過程中要有足夠的技巧去平衡兩者。這些技巧包括：

一、不要在動畫中使用過于豐富的色彩。其原因已經說過了，較多的色彩會導致在索引后圖像質量的下降，形成難看的色斑。既然如此還不如使用較為單一的色彩，雖然可能不夠華麗，但起碼能避免色斑這種硬傷的出現。
二、如果一定需要豐富的色彩，則應保持豐富色彩部分的像素在動畫中處于靜止狀態。因為GIF動畫的前后幀之間存在運算關系，位于靜止狀態的部分可以沿用到后續的幀，那些后續的幀中不必再存有這部分的圖像。這樣就可以在保持整個動畫具備豐富色彩的前提下有效地減少字節數。相反，如果色彩較豐富的像素也在運動的話，則后續的幀中就必須再存有色彩豐富的像素，會大大增加動畫的整體字節數。

如下兩個動畫的對比，第一個保持小球的外發光、投影等部分不動，只有高光部分在變化。而第二個則是小球整體移動。在同樣幀率、同樣時長、同是256無仿色的前提下，前者的字節數是9.29K，后者則是57.1K。相差達6倍之多。那么它們在網絡上傳送所耗費的時間也就相差6倍。

圖7

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

GIF還有一個重要特點就是支持背景透明，這使其可以與網頁的背景很好的融合。大家也可以在關閉背景圖層的前提下輸出透明背景的GIF。不過GIF的背景透明只能是兩種狀態，要么全透明，要么全不透明，而不能是介于兩者之間的半透明。因此除非圖像的邊界是水平、垂直、45度斜線這三種情況，否則都會因為透明而形成明顯的鋸齒。如下圖所示是一組不同邊界的圖形在不同背景色下的表現。從中不難看出兩者的區別。

需要注意的是，邊緣的鋸齒的形成原理并不只是圖像的問題，也有顯示器物理局限的因素，相關知識在基礎教程中提到過，可點此觀看相應內容。

圖8

對于帶有半透明像素(如投影樣式)的圖像而言，若要保存為透明背景，則需要開啟透明度抖動項目，這樣可以用微小的疏密不同的散點來模擬半透明。如下圖所示即是。可看出在“無透明度仿色”下的GIF盡管也是背景透明，但在原先半透明的部分仍然保留有白色，這樣只能適用于白色背景之上。而后者可適用于任何背景之上。如下右圖所示。

需要注意的是，透明度仿色并不是一個完美的解決方案，甚至可以說是一個非常差的解決方案。但出于GIF本身對于透明度的限制而言，也是一種解決之道。在實際的制作中，如果確定要使用GIF格式，則應避免在圖像的邊界生成半透明像素。換言之就是盡量避免使用透明度仿色。

還有一點要注意的是，如果輸出的動畫是透明背景的，則可能改變在非透明狀態下各幀的運算關系，也可能導致動畫的字節數有所增加。

圖9

圖10

現在我們來簡要說說將動畫用作手機彩信的用途。中國移動目前最大允許100K的彩信，那動畫最好控制在95K以下，要留一些空間給文字及短信自身的代碼。另外還需要注意的是動畫的尺寸，不同型號的手機由于其屏幕分辨率不同，能夠完美顯示的動畫尺寸也不相同。所謂完美顯示就是指手機屏幕分辨率與動畫尺寸一致或更大。如果動畫尺寸超過了手機屏幕的分辨率，手機則會將其縮小顯示。但縮小后的動畫質量會變得很差。常見的屏幕尺寸有：

128×128：常見于早期以及時下一些低端型號的手機上。是彩信動畫的基本尺寸，網絡上下載來的彩信動畫以這個尺寸居多，因為它可以運行于幾乎所有支持彩信的手機之上。
128×160：雖然比之前的要多出一些像素，但主要用于顯示一些信息，所以能夠運行的動畫尺寸大多也仍為128×128。
176×208、240×320：常見于Symbian及WindowsMobile等帶開放式操作系統的手機，都可播放全屏動畫。也有普通手機采用此分辨率的，能否支持全屏播放則不一定。
480×640：常見于高端的手機型號，雖然理論上可以支持全屏播放同尺寸的動畫，但由于GIF本身的限制，播放時的流暢度得不到保證。

在制作彩信動畫的時候，應該以128×128作為首要考慮的尺寸，因為其兼容性最好，且由于尺寸小，同樣內容的動畫字節數也比大尺寸的要小。當然，如果確定了接收者的屏幕分辨率，也可以采用與之相當的尺寸制作。動畫的背景最好是白色的，這樣就不會形成明顯的邊界感。因為白色也是手機顯示彩信時候的背景色，就如同網頁背景一樣。當然有時也需要刻意營造邊界感(如印章輪廓)，大家可針對具體情況自行決定。另外，因為絕大多數的手機不能更改彩信顯示時候的背景，所以在彩信的動畫中使用透明背景的意義不大。

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

圖11

另外要注意的一個問題就是動畫的幀率，在電腦上基本都能流暢播放30fps的動畫，但手機的處理器不比臺式電腦，其資源有限。動畫的幀率應設置為2~5fps為佳，針對開放式操作系統的手機，由于其處理器性能較普通手機出色，可設置為10fps或更高。同時影響手機播放效果的還有尺寸、總時長、字節數等因素。做出來的動畫最好是拿到手機中試播一下觀察其流暢程度。

如果要輸出多種不同尺寸的動畫，則最好使用矢量格式進行制作，并且矢量格式也是最佳的保存原始圖像的格式，符合我們一貫主張的“保留最大可編輯性”原則。