讓你認(rèn)識(shí)GIF動(dòng)畫圖像格式,Photoshop CS3的GIF圖像綜述及彩信格式(7)

作者：趙鵬  來源 ：太平洋
本文是關(guān)于Photoshop CS3的GIF圖像綜述及彩信格式講解教程，主要是介紹動(dòng)畫圖像格式是GIF的設(shè)置技巧，文中作者還就現(xiàn)在流行的手機(jī)彩信中的gif動(dòng)畫制作作了說明，希望你閱讀后會(huì)有所收獲。

•  

　　在網(wǎng)頁設(shè)計(jì)擴(kuò)展教程中也包含對(duì)圖像格式的敘述，但不會(huì)再重復(fù)介紹本課中關(guān)于GIF的知識(shí)，而是介紹其余圖像格式的特點(diǎn)及綜合使用的方法等。因此如果有想學(xué)習(xí)網(wǎng)頁設(shè)計(jì)擴(kuò)展教程的讀者，務(wù)必掌握好本課的內(nèi)容。
　　現(xiàn)在我們已經(jīng)學(xué)習(xí)了許多制作動(dòng)畫的方法，但大家對(duì)于動(dòng)畫最終的呈現(xiàn)形式仍不十分清楚。動(dòng)畫究竟怎樣輸出？在哪些地方使用？在使用中又有哪些需要注意的？這節(jié)課我們就來詳細(xì)說明這些問題。

　　目前在Windows系統(tǒng)上的主要?jiǎng)赢媹D像格式是GIF，其也可以直接在網(wǎng)頁中顯示，是目前應(yīng)用最廣泛的動(dòng)畫圖像格式。包括現(xiàn)在流行的手機(jī)彩信中的動(dòng)畫也屬于GIF格式。GIF格式可支持靜止和動(dòng)畫兩種表現(xiàn)方式。無論靜止還是動(dòng)畫，其特點(diǎn)是相同的。
　　動(dòng)畫GIF格式的實(shí)現(xiàn)原理并不復(fù)雜，大家可將其理解為將多個(gè)靜止畫面(幀)組合在一起輪流顯示。這些畫面(幀)之間還有運(yùn)算關(guān)系存在，與選區(qū)何路徑的運(yùn)算類似，分別是添加、減去和消除。這是為了優(yōu)化動(dòng)畫的字節(jié)數(shù)。

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

　　減去方式與之正好相反，是將前一幀圖像中的某些像素抹去，可用“倒退的進(jìn)度條”去理解。消除方式則是將前一幀完全擦除，主要用在前后兩幀之間沒有任何關(guān)聯(lián)的時(shí)候，比如從全部紅色變?yōu)槿烤G色時(shí)，前后幀之間并沒有任何像素相同，則采取消除方式。

　　在實(shí)際制作中Photoshop會(huì)自動(dòng)根據(jù)圖像情況來決定采取何種方式，不需要人工干預(yù)。這些運(yùn)算方式作為一個(gè)知識(shí)來了解就可以了。也可以作為構(gòu)思動(dòng)畫時(shí)的一個(gè)參考。

圖1

　　現(xiàn)在要說以下GIF格式的一個(gè)重要特點(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)容。

圖2

圖3

　　需要注意的是，256色指的是針對(duì)整幅圖像而言的。如果整幅原圖像就是如下圖那樣的大小，則256色與原圖的區(qū)別就不是很大了。這是因?yàn)閷⑸蕼p少到256色的時(shí)候，Photoshop會(huì)根據(jù)原有圖像中的顏色進(jìn)行編排，這個(gè)過程也稱為索引，就是將相近的多種顏色歸為一種。
　本文是關(guān)于Photoshop CS3的GIF圖像綜述及彩信格式講解教程，主要是介紹動(dòng)畫圖像格式是GIF的設(shè)置技巧，文中作者還就現(xiàn)在流行的手機(jī)彩信中的gif動(dòng)畫制作作了說明，希望你閱讀后會(huì)有所收獲。

　　如果原圖中的色彩包含多個(gè)色相，那么256色平均分?jǐn)傁聛砗�，分給單個(gè)色相的數(shù)量就很少。相反，如果原圖中的色相基本一致或接近，則256色也可以很好地表達(dá)。這就是為什么之前的256無仿色看起來色斑明顯，而現(xiàn)在的色斑較不明顯的原因。因?yàn)榍罢叩脑瓐D中包含了較多色相，有些顏色被分配給藍(lán)色、紅色等，分配給黃色相的色彩較少。而后者的原圖中基本只有黃色相，這樣就不必為分配其他色相分配顏色了。

圖4

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

圖5

　　使用【文件＞存儲(chǔ)為Web和設(shè)備所用格式】〖CTRL＋SHIFT＋ALT＋S〗，將出現(xiàn)的保存儲(chǔ)設(shè)置框。這是我們最常用的輸出功能，在以后將要學(xué)習(xí)的網(wǎng)頁設(shè)計(jì)擴(kuò)展教程中更是如此。

　　進(jìn)入設(shè)置界面后要注意紅色箭頭處，必須在“優(yōu)化”選項(xiàng)卡中看到的才是輸出后的實(shí)際效果，也就是在瀏覽器或看圖軟件中的效果。而“原稿”選項(xiàng)卡則是在Photoshop中的效果，不能作為參照的標(biāo)準(zhǔn)，這點(diǎn)要切記。

　　綠色箭頭處是相應(yīng)的設(shè)置區(qū)域，從中我們將圖像格式設(shè)置為GIF，將顏色數(shù)設(shè)置為256，關(guān)閉仿色選項(xiàng)。其設(shè)定與上圖左側(cè)的效果對(duì)應(yīng)的。

　　注意藍(lán)色箭頭處的字節(jié)數(shù)指示，這是一個(gè)很重要的指標(biāo)，無論何時(shí)我們都必須使這個(gè)數(shù)字盡可能地小，否則將無法有效使用圖像或動(dòng)畫。

圖6

　本文是關(guān)于Photoshop CS3的GIF圖像綜述及彩信格式講解教程，主要是介紹動(dòng)畫圖像格式是GIF的設(shè)置技巧，文中作者還就現(xiàn)在流行的手機(jī)彩信中的gif動(dòng)畫制作作了說明，希望你閱讀后會(huì)有所收獲。

　　要令字節(jié)數(shù)小，就需要減少顏色數(shù)，顏色表中的色塊數(shù)也會(huì)相應(yīng)減少。但顯而易見的，太少的顏色會(huì)對(duì)圖像質(zhì)量造成明顯的影響，很容易形成色斑。開啟仿色雖然可以淡化色斑，但同時(shí)也會(huì)增加字節(jié)數(shù)。這就像架在字節(jié)數(shù)和質(zhì)量之間的一座蹺蹺板，兩者不能兼顧。作為準(zhǔn)備在網(wǎng)絡(luò)上傳輸?shù)膱D像而言，字節(jié)數(shù)往往更為重要，因?yàn)榇蟛糠衷L問者不會(huì)有耐心花上幾分鐘去等待一個(gè)網(wǎng)頁的顯示。而網(wǎng)頁除了圖像之外，還有其他一些代碼也需要占用字節(jié)數(shù)，所以，盡量減少字節(jié)數(shù)是一個(gè)基本原則。當(dāng)然這個(gè)原則與圖像質(zhì)量是沖突的，這就要求我們?cè)跇?gòu)思和制作的過程中要有足夠的技巧去平衡兩者。這些技巧包括：

　　一、不要在動(dòng)畫中使用過于豐富的色彩。其原因已經(jīng)說過了，較多的色彩會(huì)導(dǎo)致在索引后圖像質(zhì)量的下降，形成難看的色斑。既然如此還不如使用較為單一的色彩，雖然可能不夠華麗，但起碼能避免色斑這種硬傷的出現(xiàn)。
　　二、如果一定需要豐富的色彩，則應(yīng)保持豐富色彩部分的像素在動(dòng)畫中處于靜止?fàn)顟B(tài)。因?yàn)镚IF動(dòng)畫的前后幀之間存在運(yùn)算關(guān)系，位于靜止?fàn)顟B(tài)的部分可以沿用到后續(xù)的幀，那些后續(xù)的幀中不必再存有這部分的圖像。這樣就可以在保持整個(gè)動(dòng)畫具備豐富色彩的前提下有效地減少字節(jié)數(shù)。相反，如果色彩較豐富的像素也在運(yùn)動(dòng)的話，則后續(xù)的幀中就必須再存有色彩豐富的像素，會(huì)大大增加動(dòng)畫的整體字節(jié)數(shù)。

　　如下兩個(gè)動(dòng)畫的對(duì)比，第一個(gè)保持小球的外發(fā)光、投影等部分不動(dòng)，只有高光部分在變化。而第二個(gè)則是小球整體移動(dòng)。在同樣幀率、同樣時(shí)長(zhǎng)、同是256無仿色的前提下，前者的字節(jié)數(shù)是9.29K，后者則是57.1K。相差達(dá)6倍之多。那么它們?cè)诰W(wǎng)絡(luò)上傳送所耗費(fèi)的時(shí)間也就相差6倍。

圖7

　　我們?cè)跇?gòu)思動(dòng)畫的時(shí)候，要事先考慮好其用途，如果是要用于網(wǎng)頁之中，那還要參考其在網(wǎng)頁中的重要性，如果不是很重要，屬于裝飾性的，就盡量減少字節(jié)數(shù)。這可從減少存儲(chǔ)時(shí)的色彩數(shù)，以及良好的制作規(guī)劃兩個(gè)方面去實(shí)現(xiàn)。如果遇到帶有重要指示性的，一定需要色彩豐富或動(dòng)感強(qiáng)烈的動(dòng)畫時(shí)，則應(yīng)盡可能減少動(dòng)畫的尺寸。因?yàn)樾〕叽绲膱D像中像素總量也少，用256色進(jìn)行索引就不會(huì)顯得那么局促。這點(diǎn)大家可自己動(dòng)手實(shí)驗(yàn)得知。
　　GIF還有一個(gè)重要特點(diǎn)就是支持背景透明，這使其可以與網(wǎng)頁的背景很好的融合。大家也可以在關(guān)閉背景圖層的前提下輸出透明背景的GIF。不過GIF的背景透明只能是兩種狀態(tài)，要么全透明，要么全不透明，而不能是介于兩者之間的半透明。因此除非圖像的邊界是水平、垂直、45度斜線這三種情況，否則都會(huì)因?yàn)橥该鞫纬擅黠@的鋸齒。如下圖所示是一組不同邊界的圖形在不同背景色下的表現(xiàn)。從中不難看出兩者的區(qū)別。

　　需要注意的是，邊緣的鋸齒的形成原理并不只是圖像的問題，也有顯示器物理局限的因素，相關(guān)知識(shí)在基礎(chǔ)教程中提到過，可點(diǎn)此觀看相應(yīng)內(nèi)容。

圖8

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

　　需要注意的是，透明度仿色并不是一個(gè)完美的解決方案，甚至可以說是一個(gè)非常差的解決方案。但出于GIF本身對(duì)于透明度的限制而言，也是一種解決之道。在實(shí)際的制作中，如果確定要使用GIF格式，則應(yīng)避免在圖像的邊界生成半透明像素。換言之就是盡量避免使用透明度仿色。
　本文是關(guān)于Photoshop CS3的GIF圖像綜述及彩信格式講解教程，主要是介紹動(dòng)畫圖像格式是GIF的設(shè)置技巧，文中作者還就現(xiàn)在流行的手機(jī)彩信中的gif動(dòng)畫制作作了說明，希望你閱讀后會(huì)有所收獲。

　　還有一點(diǎn)要注意的是，如果輸出的動(dòng)畫是透明背景的，則可能改變?cè)诜峭该鳡顟B(tài)下各幀的運(yùn)算關(guān)系，也可能導(dǎo)致動(dòng)畫的字節(jié)數(shù)有所增加。

圖9

圖10

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

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

　　在制作彩信動(dòng)畫的時(shí)候，應(yīng)該以128×128作為首要考慮的尺寸，因?yàn)槠浼嫒菪宰詈茫矣捎诔叽缧�，同樣�?nèi)容的動(dòng)畫字節(jié)數(shù)也比大尺寸的要小。當(dāng)然，如果確定了接收者的屏幕分辨率，也可以采用與之相當(dāng)?shù)某叽缰谱�。�?dòng)畫的背景最好是白色的，這樣就不會(huì)形成明顯的邊界感。因?yàn)榘咨彩鞘謾C(jī)顯示彩信時(shí)候的背景色，就如同網(wǎng)頁背景一樣。當(dāng)然有時(shí)也需要刻意營造邊界感(如印章輪廓)，大家可針對(duì)具體情況自行決定。另外，因?yàn)榻^大多數(shù)的手機(jī)不能更改彩信顯示時(shí)候的背景，所以在彩信的動(dòng)畫中使用透明背景的意義不大。
　　在“存儲(chǔ)為Web和設(shè)備所用格式”右下角有一個(gè)“Device Central...”的按鈕，按下后能在選定的手機(jī)設(shè)備上預(yù)覽動(dòng)畫在手機(jī)上的效果。如下圖所示�？稍谧髠�(cè)的設(shè)備列表中選擇，圖中所選的是Nokia 3110。Adobe Device Central其實(shí)是一個(gè)移動(dòng)設(shè)備的資料庫，可為面向移動(dòng)設(shè)備制作的人員提供集中的環(huán)境。除了普通的顯示以外，還可以模擬手機(jī)屏幕背光關(guān)閉，以及戶外屏幕逆光等條件下的顯示情況。不過這些功能目前對(duì)于我們目前而言意義不大。

圖11 (+點(diǎn)擊上圖可放大)

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

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