PS制作GIF動(dòng)畫入門教程:簡單且簡陋的動(dòng)畫

導(dǎo)言：

動(dòng)畫形成原理是因?yàn)槿搜塾幸曈X暫留的特性，所謂視覺暫留就是在看到一個(gè)物體后，即時(shí)該物體快速消失，也還是會在眼中留下一定時(shí)間的持續(xù)影像，這在物體較為明亮的情況下尤為明顯。最常見的就是夜晚拍照時(shí)使用閃光燈，雖然閃光燈早已熄滅，但被攝者眼中還是會留有光暈并維持一段時(shí)間。

對這個(gè)特點(diǎn)最早期的應(yīng)用，我們上小學(xué)時(shí)也許就都做過了，就是在課本的頁腳畫上許多的動(dòng)作，然后快速翻動(dòng)就可以在眼中實(shí)現(xiàn)連續(xù)的影像，這就是動(dòng)畫。需要注意的是，這里的動(dòng)畫并不是指卡通動(dòng)畫片，雖然卡通動(dòng)畫的制作原理相同，但這里的動(dòng)畫是泛指所有的連續(xù)影像。

總結(jié)起來，所謂動(dòng)畫，就是用多幅靜止畫面連續(xù)播放，利用視覺暫留形成連續(xù)影像。比如傳統(tǒng)的電影，就是用一長串連續(xù)記錄著單幅畫面的膠卷，按照一定的速度依次用燈光投影到屏幕上。這里就有一個(gè)速度的要求，試想一下如果我們緩慢地翻動(dòng)課本，感受到的只會是多個(gè)靜止畫面而非連續(xù)影像。播放電影也是如此，如果速度太慢，觀眾看到的就等于是一幅幅輪換的幻燈片。 為了讓觀眾感受到連續(xù)影像，電影以每秒24張畫面的速度播放，也就是一秒鐘內(nèi)在屏幕上連續(xù)投射出24張靜止畫面。有關(guān)動(dòng)畫播放速度的單位是fps，其中的 f就是英文單詞Frame(畫面、幀)，p就是Per(每)，s就是Second(秒)。用中文表達(dá)就是多少幀每秒，或每秒多少幀。電影是24fps，通常簡稱為24幀。

現(xiàn)實(shí)生活中的其他能產(chǎn)生影像的設(shè)備也有幀速的概念，比如電視機(jī)的信號，中國與歐洲所使用的PAL制式為25幀，日本與美洲使用的NTSC制式為 29.97幀。如果動(dòng)畫在電腦上播放，則15幀就可以達(dá)到連續(xù)影像的效果。這樣大家以后在制作視頻的時(shí)候，要想好發(fā)布在何種設(shè)備上，以設(shè)定不同的幀速。

人眼的辨識精度其實(shí)遠(yuǎn)遠(yuǎn)高于以上幾種幀速，因?yàn)槿搜叟c大腦構(gòu)成的視覺系統(tǒng)是非常發(fā)達(dá)的。只是依據(jù)環(huán)境不同而具備有不同的敏感程度，比如在黑暗環(huán)境中對較亮光源的視覺暫留時(shí)間較長，因此電影只需要24幀。順便說句題外話，只有少數(shù)動(dòng)物的眼睛能在某些方面超過人類，但都同時(shí)在其他方面存在嚴(yán)重缺陷。如“細(xì)節(jié)之王”鷹是色盲，而“夜視之王”貓頭鷹的眼珠固定，要轉(zhuǎn)動(dòng)頭部才能觀察周圍。

在我們前面所學(xué)的課程中，Photoshop只是被用來制作比如海報(bào)、印刷稿等靜態(tài)圖像的，我們提到過它具備動(dòng)畫制作 的能力�，F(xiàn)在我們就是要在Photoshop中去創(chuàng)建一個(gè)由多個(gè)幀組成的動(dòng)畫。把單一的畫面擴(kuò)展到多個(gè)畫面。并在這多個(gè)畫面中營造一種影像上的連續(xù)性，令動(dòng)畫成型。

現(xiàn)在很多使用Flash制作的動(dòng)畫都可以附帶配音和交互性，從而令整個(gè)動(dòng)畫更加生動(dòng)。而Photoshop所制作出來的動(dòng)畫只能稱作簡單動(dòng)畫，這主要是因?yàn)槠渲痪邆洚嬅娑荒芗尤肼曇�，且觀眾只能以固定方式觀看。但簡單并不代表簡陋，雖然前者提供了更多的制作和表現(xiàn)方法，但后者也仍然具備自己的獨(dú)特優(yōu)勢，如圖層樣式動(dòng)畫就可以很容易地做出一些其它軟件很難實(shí)現(xiàn)的精美動(dòng)畫細(xì)節(jié)。再者，正如同在紙上畫畫是一個(gè)很簡單的行為，但不同的人畫得好壞也不相同。因此優(yōu)秀的動(dòng)畫并不一定就需要很復(fù)雜的技術(shù)，重要的是優(yōu)秀的創(chuàng)意。

無論是哪一個(gè)軟件，它們的制作原理都是相同的，正如同我們曾經(jīng)刻苦學(xué)習(xí)的RGB色彩模式一樣，到哪里都能應(yīng)用上。所以我們現(xiàn)在的任務(wù)是利用已經(jīng)學(xué)到的 Photoshop基礎(chǔ)知識，將它擴(kuò)展到動(dòng)畫制作上，從中學(xué)習(xí)到制作動(dòng)畫的一般性技巧和方法。這些知識以后仍然可以應(yīng)用于其它方面。 并且我們也會介紹如何將Photoshop動(dòng)畫轉(zhuǎn)為視頻并為其加入聲音。

除了制作上的不同以外，在用途上也有不同。動(dòng)畫經(jīng)常被安放于網(wǎng)頁中的某個(gè)區(qū)域用以強(qiáng)調(diào)某項(xiàng)內(nèi)容，如廣告動(dòng)畫。這種動(dòng)畫通常按照安放位置的不同而具備相應(yīng)的固定尺寸，如468x60、140x60、90x180等。也可將動(dòng)畫應(yīng)用于手機(jī)彩信(一種可發(fā)送圖片、聲音、視頻的多媒體短信服務(wù))。這些用途都有各自的特點(diǎn)，除了尺寸以外還有其它需要考慮的因素。如字節(jié)數(shù)的限制，幀停留時(shí)間等。我們會在教程中逐步予以講解。

需要注意的是，在本教程開始之前，我們要求讀者都已經(jīng)學(xué)習(xí)過Photoshop的基礎(chǔ)知識，理解并掌握如調(diào)整圖層、圖層樣式等概念和操作，例如“怎樣建立曲線調(diào)整層”之類的內(nèi)容我們只作簡要操作介紹，而不再詳細(xì)解釋其中原理。因此建議新加入的讀者先行學(xué)習(xí)基礎(chǔ)部分內(nèi)容。

另外，Photoshop CS3 Extended(擴(kuò)展)版本才具備動(dòng)畫制作功能，普通版本是不具備的。CS2版本有附帶動(dòng)作制作功能，操作也與CS3 Extended相似。而CS及更早版本則需要借助捆綁的ImageReady軟件進(jìn)行動(dòng)畫制作。建議大家使用與教程相同的CS3 Extended版本。

既然稱為動(dòng)畫，那就是要令畫面中的圖像動(dòng)起來，現(xiàn)在我們來實(shí)際動(dòng)手畫制作一個(gè)“簡單且簡陋”的動(dòng)畫吧。

新建一個(gè)150×150的空白圖像，新建一個(gè)圖層并畫上一個(gè)矩形，大致如下左圖所示，圖層調(diào)板如下右圖。從中可以看出這是一個(gè)普通的點(diǎn)陣圖層，大家在實(shí)際操作中應(yīng)盡可能使用矢量圖層，在后面的教程中我們也會注意這一點(diǎn)的。（圖01）

圖01

通過【窗口_動(dòng)畫】開啟動(dòng)畫調(diào)板，如下左圖所示。而此時(shí)圖層調(diào)板也多出了一些選項(xiàng)，如下右圖紅色箭頭處。如果將動(dòng)畫調(diào)板關(guān)閉則恢復(fù)到原先。這里暫時(shí)不用去理會。另外動(dòng)畫調(diào)板經(jīng)常與測量記錄調(diào)板組合在一起，后者與我們目前的內(nèi)容并無關(guān)系，可將其關(guān)閉。（圖02）

圖02

在開啟了動(dòng)畫調(diào)板后，我們就可以開始制作動(dòng)畫了，在動(dòng)畫調(diào)板中點(diǎn)擊紅色箭頭處的“復(fù)制所選幀”按鈕，就會看到新增加了一個(gè)幀。如下圖所示。按照我們以前的習(xí)慣，這個(gè)應(yīng)該表示為新建，如新建圖層等，在這里雖然字面上的解釋是復(fù)制，但其實(shí)也是一種新建，只不過這新增加出來的幀其實(shí)和前一個(gè)幀是相同的內(nèi)容。相應(yīng)的，大家也應(yīng)該能想得到按鈕的作用就是刪除幀。（圖03）

圖03

確認(rèn)動(dòng)畫調(diào)板中目前選擇的是復(fù)制出來的第2幀，然后使用移動(dòng)工具將圖層中的方塊移動(dòng)一定距離，大致如下左圖所示。此時(shí)動(dòng)畫調(diào)板如下中圖所示。可以看到雖然在第2幀中方塊的位置發(fā)生了改變，但在原先第1幀中方塊的位置依然未變。這是一個(gè)很重要的特性。

重復(fù)幾次這種先復(fù)制幀再移動(dòng)方塊的操作，最終得到如下右圖所示的樣子(類似即可)。現(xiàn)在我們擁有了7個(gè)幀，且每個(gè)幀中方塊的位置都不同。注意這句話 “每個(gè)幀中方塊的位置都不同”，再看看圖層調(diào)板，很明顯只有一個(gè)圖層存在(背景層暫且不算)，這就引出一個(gè)特性：對一個(gè)圖層來說，它的位置(或坐標(biāo))在不同幀中可以單獨(dú)指定。按照這個(gè)特性，我們使用一個(gè)圖層就可以做出物體移動(dòng)的動(dòng)畫。（圖04）

圖04

現(xiàn)在大家可以按下動(dòng)畫調(diào)板中的播放按鈕，在圖像窗口就可以看到方塊移動(dòng)的效果了，只是移動(dòng)的速度很快。這是因?yàn)闆]有設(shè)置幀延遲時(shí)間。注意動(dòng)畫調(diào)板中每一幀的下方現(xiàn)在都有一個(gè)“ 0秒”，這就是幀延遲時(shí)間(或稱停留時(shí)間)。幀延遲時(shí)間表示在動(dòng)畫過程中該幀顯示的時(shí)長。比如某幀的延遲設(shè)為2秒，那么當(dāng)播放到這個(gè)幀的時(shí)候會停留2秒鐘后才繼續(xù)播放下一幀。延遲默認(rèn)為0秒，每個(gè)幀都可以獨(dú)立設(shè)定延遲。

設(shè)定幀延遲的方法就是點(diǎn)擊幀下方的時(shí)間處，在彈出的列表中選擇相應(yīng)的時(shí)間即可。如下左圖所示，將第7幀設(shè)為0.5秒。列表中的“無延遲”就是0秒，如果沒有想要設(shè)定的時(shí)間，可以選擇“其他”后自行輸入數(shù)值(單位為秒)。也可以在選擇多個(gè)幀后統(tǒng)一修改延遲，選擇多個(gè)幀的方法和選擇多個(gè)圖層相同，先在動(dòng)畫調(diào)板中點(diǎn)擊第1幀將其選擇，然后按住SHIFT鍵點(diǎn)擊第6幀，就選擇了第1至第6幀。然后在其中任意一幀的時(shí)間區(qū)進(jìn)行設(shè)定即可，如下右圖所示，設(shè)為0.1 秒。這是一個(gè)比較常用的延遲時(shí)間。

再次播放動(dòng)畫，就會看到方塊移動(dòng)的速度有所減緩，并且在移動(dòng)的最后會停留較長時(shí)間。很明顯，這是由于它被設(shè)置了較長延遲的緣故。而這種較長的延遲實(shí)際上起到了一種突出的作用，在實(shí)際制作中就可以利用這個(gè)特點(diǎn)來突出某個(gè)主題。我們在后面的教程中也會找時(shí)間專門介紹一些表現(xiàn)手法。（圖05、06）

圖05

圖06

除了延遲時(shí)間外，動(dòng)畫還有一個(gè)特點(diǎn)就是可以設(shè)定播放的循環(huán)次數(shù)。注意在動(dòng)畫調(diào)板第一幀的下方有一個(gè)“永遠(yuǎn)”，這就是循環(huán)次數(shù)。點(diǎn)擊后可以選擇 “一次”或“永遠(yuǎn)”，或者自行設(shè)定循環(huán)的次數(shù)。之后再次播放動(dòng)畫即可看到循環(huán)次數(shù)設(shè)定的效果。

雖然在絕大多數(shù)情況下動(dòng)畫都是連續(xù)循環(huán)的(即永遠(yuǎn))，但在某些地方也會用到單次或少數(shù)幾次(2~3次)循環(huán)，主要出現(xiàn)在利用動(dòng)畫制作網(wǎng)頁部件的時(shí)候。比如將一個(gè)欄目的名稱從無到有用動(dòng)畫漸顯出來，這樣當(dāng)名稱完全顯示出來后就應(yīng)當(dāng)固定，而不能再次消失然后再次漸顯。這時(shí)就要使用“一次”的循環(huán)設(shè)定了。（圖07）

圖07

按下〖CTRL+S〗【文件>存儲】可以將動(dòng)畫設(shè)定保存起來，文件格式為psd。這種文件格式是Photoshop專有的，可以記錄所有的相關(guān)信息，建議大家都將自己的作品保存為該格式，方便以后的修改。如果需要能用于網(wǎng)頁的獨(dú)立動(dòng)畫文件，則需要使用〖CTRL+ALT+SHIFT+S〗【文件>存儲為Web和設(shè)備所用格式】，將出現(xiàn)一個(gè)如下左圖所示的大窗口。這個(gè)大窗口有許多內(nèi)容需要介紹。但現(xiàn)在大家只需要參照紅色箭頭區(qū)域中的設(shè)定即可。

同時(shí)窗口右下方綠色箭頭區(qū)域會出現(xiàn)播放按鈕和循環(huán)選項(xiàng)，在此更改循環(huán)次數(shù)會同時(shí)更改源文件中的設(shè)定。需要注意的是，如果在紅色箭頭區(qū)域內(nèi)沒有選擇 GIF，則播放按鈕不可用。這是因?yàn)橹挥蠫IF格式才支持動(dòng)畫，如果強(qiáng)行保存為其他格式如JPG或PNG，則所生成的圖像中只有第一幀的畫面。

在存儲過程中可能出現(xiàn)如下右圖所示的警告信息，不必理會，確定即可。也可以讓其不再顯示。但大家要注意在給文件起名時(shí)要使用半角英文或數(shù)字，不要使用全角字符或中文。這是為了能更廣泛地被各種語言的瀏覽器所兼容。（圖08）

圖08

在這個(gè)章節(jié)中大家要掌握的是動(dòng)畫的兩項(xiàng)屬性，即幀延遲時(shí)間和循環(huán)次數(shù)。另外要掌握“復(fù)制幀、移動(dòng)圖層”這種的制作簡單物體位移動(dòng)畫的方法。并使用該方法制作出同時(shí)有兩個(gè)物體位移的動(dòng)畫。效果類似下圖所示：