Photoshop_CS3_GIF動(dòng)畫(huà)制作

1、【學(xué)習(xí)目標(biāo)】了解GIF動(dòng)畫(huà)初識(shí)掌握幀的傳播特性及過(guò)渡掌握使用各種方法制作動(dòng)畫(huà) 熟練GIF動(dòng)畫(huà)的導(dǎo)入和導(dǎo)出第第11章章 GIF動(dòng)畫(huà)的制作動(dòng)畫(huà)的制作【學(xué)習(xí)內(nèi)容學(xué)習(xí)內(nèi)容】動(dòng)畫(huà)的初識(shí)動(dòng)畫(huà)的初識(shí)制作簡(jiǎn)單的制作簡(jiǎn)單的GIFGIF動(dòng)畫(huà)動(dòng)畫(huà)幀的傳播特性及過(guò)渡幀的傳播特性及過(guò)渡時(shí)間軸動(dòng)畫(huà)時(shí)間軸動(dòng)畫(huà) 動(dòng)畫(huà)的導(dǎo)入和導(dǎo)出動(dòng)畫(huà)的導(dǎo)入和導(dǎo)出 在我們前面所學(xué)的課程中，Photoshop只是被用來(lái)制作比如海報(bào)、印刷稿等靜態(tài)圖像的，我們提到過(guò)它具備動(dòng)畫(huà)制作的能力?，F(xiàn)在我們就是要在Photoshop CS3中去創(chuàng)建一個(gè)由多個(gè)幀組成的動(dòng)畫(huà)。把單一的畫(huà)面擴(kuò)展到多個(gè)畫(huà)面。并在這多個(gè)畫(huà)面中營(yíng)造一種影像上的連續(xù)性，令動(dòng)畫(huà)成型。 所謂動(dòng)畫(huà)，

2、就是用多幅靜止畫(huà)面連續(xù)播放，利用視覺(jué)暫留形成連續(xù)影像。比如傳統(tǒng)的電影，就是用一長(zhǎng)串連續(xù)記錄著單幅畫(huà)面的膠卷，按照一定的速度依次用燈光投影到屏幕上。目前在Windows系統(tǒng)上的主要?jiǎng)赢?huà)圖像格式是GIF，其也可以直接在網(wǎng)頁(yè)中顯示，是目前應(yīng)用最廣泛的動(dòng)畫(huà)圖像格式。包括現(xiàn)在流行的 彩信中的動(dòng)畫(huà)也屬于GIF格式。接下來(lái)我們就先來(lái)了解一下在Photoshop CS3中對(duì)于動(dòng)畫(huà)的制作增加了哪些面板。11.1 GIF動(dòng)畫(huà)的初識(shí)動(dòng)畫(huà)的初識(shí)11.1.1 動(dòng)畫(huà)面板動(dòng)畫(huà)面板動(dòng)畫(huà)面板的打開(kāi)方法為：?jiǎn)螕魟?dòng)畫(huà)面板的打開(kāi)方法為：?jiǎn)螕簟按翱诖翱凇辈藛芜x擇菜單選擇“動(dòng)畫(huà)動(dòng)畫(huà)”即可打開(kāi)和關(guān)閉動(dòng)畫(huà)面板如即可打開(kāi)和關(guān)閉動(dòng)畫(huà)面板如下圖下

3、圖所示。所示。圖層面板中各部分的功能如下：圖層面板中各部分的功能如下：當(dāng)前幀：即動(dòng)畫(huà)文件中當(dāng)前的單幅畫(huà)面當(dāng)前幀停留時(shí)間：當(dāng)前畫(huà)面停頓時(shí)間當(dāng)前動(dòng)畫(huà)文件循環(huán)選項(xiàng)：設(shè)定當(dāng)前動(dòng)畫(huà)循環(huán)播放次數(shù)選擇第一幀：選擇動(dòng)畫(huà)開(kāi)始的單幅畫(huà)面選擇上一幀：選擇上一幅單幅畫(huà)面播放當(dāng)前動(dòng)畫(huà)：預(yù)覽當(dāng)前動(dòng)畫(huà)選擇最后一幀：選擇當(dāng)前動(dòng)畫(huà)的最后一幅畫(huà)面過(guò)濾動(dòng)畫(huà)幀：兩個(gè)幀之間的位置、透明度、效果變換復(fù)制所選幀：復(fù)制當(dāng)前畫(huà)面刪除所選幀：刪除當(dāng)前畫(huà)面轉(zhuǎn)換為時(shí)間軸動(dòng)畫(huà)：轉(zhuǎn)換為更復(fù)雜的、功能更強(qiáng)大的動(dòng)畫(huà)面板 當(dāng)打開(kāi)動(dòng)畫(huà)面板的同時(shí)，在圖層面板上也會(huì)增加一些關(guān)于動(dòng)畫(huà)制作的選項(xiàng)，如下圖所11.1.2 圖層面板增加的選項(xiàng)圖層面板增加的選項(xiàng)圖層面板中各部

4、分的功能如下：統(tǒng)一圖層位置： 統(tǒng)一設(shè)定當(dāng)前圖層在所有幀當(dāng)中顯示的位置統(tǒng)一圖層可見(jiàn)性： 統(tǒng)一設(shè)定當(dāng)前圖層在所有幀當(dāng)中是否顯示統(tǒng)一圖層樣式： 統(tǒng)一調(diào)整當(dāng)前圖層在所有幀中的樣式幀的傳播特性： 將第1幀的改變傳播給所有幀11.2 制作簡(jiǎn)單的制作簡(jiǎn)單的GIF動(dòng)畫(huà)動(dòng)畫(huà) 制作編輯動(dòng)畫(huà)制作編輯動(dòng)畫(huà) 既然稱為動(dòng)畫(huà)，那就是要令畫(huà)面中的圖像動(dòng)起來(lái)，現(xiàn)在我們來(lái)實(shí)際動(dòng)手畫(huà)制作一個(gè)“簡(jiǎn)單”的動(dòng)畫(huà)吧。新建一個(gè)200200的空白圖像，如右圖所示。新建一個(gè)圖層并畫(huà)上一個(gè)紅色的圓形，大致下圖所示。然后打開(kāi)動(dòng)畫(huà)面板，在開(kāi)啟了動(dòng)畫(huà)調(diào)板后，我們就可以開(kāi)始制作動(dòng)畫(huà)了，在動(dòng)畫(huà)調(diào)板中點(diǎn)擊箭頭處的“復(fù)制所選幀”按鈕，就會(huì)看到新增加了一個(gè)幀，如

5、下圖所示。按照我們以前的習(xí)慣，這個(gè)圖標(biāo)應(yīng)該表示為新建，如新建圖層等，在這里雖然字面上的解釋是復(fù)制，但其實(shí)也是一種新建，只不過(guò)這新增加出來(lái)的幀其實(shí)和前一個(gè)幀是相同的內(nèi)容。相應(yīng)的，大家也應(yīng)該能想得到垃圾桶似按鈕的作用就是刪除幀。確認(rèn)動(dòng)畫(huà)調(diào)板中目前選擇的是復(fù)制出來(lái)的第2幀，然后使用移動(dòng)工具將圖層中的形狀移動(dòng)一定距離，大致如右圖所示。可以看到雖然在第2幀中形狀的位置發(fā)生了改變，但在原先第1幀中方塊的位置依然未變。這是一個(gè)很重要的特性。 重復(fù)幾次這種先復(fù)制幀再移動(dòng)方塊的操作，最終得到下圖所示的樣子(類似即可)。現(xiàn)在我們擁有了7個(gè)幀，且每個(gè)幀中方塊的位置都不同。再看看圖層調(diào)板，很明顯只有一個(gè)圖層存在(背景

6、層暫且不算)，這就引出一個(gè)特性：對(duì)一個(gè)圖層來(lái)說(shuō)，它的位置(或坐標(biāo))在不同幀中可以單獨(dú)指定。按照這個(gè)特性，我們使用一個(gè)圖層就可以做出物體移動(dòng)的動(dòng)畫(huà)。 現(xiàn)在大家可以按下動(dòng)畫(huà)調(diào)板中的播放按鈕，在圖像窗口就可以看到形狀移動(dòng)的效果了，只是移動(dòng)的速度很快。這是因?yàn)闆](méi)有設(shè)置幀延遲時(shí)間。注意動(dòng)畫(huà)調(diào)板中每一幀的下方現(xiàn)在都有一個(gè)“ 0秒”，這就是幀延遲時(shí)間(或稱停留時(shí)間)。幀延遲時(shí)間表示在動(dòng)畫(huà)過(guò)程中該幀顯示的時(shí)長(zhǎng)。比如某幀的延遲設(shè)為2秒，那么當(dāng)播放到這個(gè)幀的時(shí)候會(huì)停留2秒鐘后才繼續(xù)播放下一幀。延遲默認(rèn)為0秒，每個(gè)幀都可以獨(dú)立設(shè)定延遲。 設(shè)定幀延遲的方法就是點(diǎn)擊幀下方的時(shí)間處，在彈出的列表中選擇相應(yīng)的時(shí)間即可。如圖

7、11-8所示，將第7幀設(shè)為0.5秒。 設(shè)定幀的延長(zhǎng)時(shí)間設(shè)定幀的延長(zhǎng)時(shí)間列表中的“無(wú)延遲”就是0秒，如果沒(méi)有想要設(shè)定的時(shí)間，可以選擇“其他”后自行輸入數(shù)值(單位為秒)。也可以在選擇多個(gè)幀后統(tǒng)一修改延遲，選擇多個(gè)幀的方法和選擇多個(gè)圖層相同，先在動(dòng)畫(huà)調(diào)板中點(diǎn)擊第1幀將其選擇，然后按住SHIFT鍵點(diǎn)擊第6幀，就選擇了第1至第6幀。然后在其中任意一幀的時(shí)間區(qū)進(jìn)行設(shè)定即可，如下圖所示，設(shè)為秒。這是一個(gè)比較常用的延遲時(shí)間。 再次播放動(dòng)畫(huà)，就會(huì)看到形狀移動(dòng)的速度有所減緩，并且在移動(dòng)的最后會(huì)停留較長(zhǎng)時(shí)間。很明顯，這是由于它被設(shè)置了較長(zhǎng)延遲的緣故。而這種較長(zhǎng)的延遲實(shí)際上起到了一種突出的作用，在實(shí)際制作中就可以利用

8、這個(gè)特點(diǎn)來(lái)突出某個(gè)主題。11.2.3 11.2.3 動(dòng)畫(huà)的循環(huán)方式動(dòng)畫(huà)的循環(huán)方式除了延遲時(shí)間外，動(dòng)畫(huà)還有一個(gè)特點(diǎn)就是可以設(shè)定播放的循環(huán)次數(shù)。注意在動(dòng)畫(huà)調(diào)板第一幀的下方有一個(gè)“永遠(yuǎn)”，這就是循環(huán)次數(shù)，如下圖所示。點(diǎn)擊后可以選擇“一次”或“永遠(yuǎn)”，或者自行設(shè)定循環(huán)的次數(shù)。之后再次播放動(dòng)畫(huà)即可看到循環(huán)次數(shù)設(shè)定的效果。 雖然在絕大多數(shù)情況下動(dòng)畫(huà)都是連續(xù)循環(huán)的(即永遠(yuǎn))，但在某些地方也會(huì)用到單次或少數(shù)幾次(2-3次)循環(huán)，主要出現(xiàn)在利用動(dòng)畫(huà)制作網(wǎng)頁(yè)部件的時(shí)候。比如將一個(gè)欄目的名稱從無(wú)到有用動(dòng)畫(huà)漸顯出來(lái)，這樣當(dāng)名稱完全顯示出來(lái)后就應(yīng)當(dāng)固定，而不能再次消失然后再次漸顯。這時(shí)就要使用“一次”的循環(huán)設(shè)定了。 動(dòng)

9、畫(huà)文件的導(dǎo)出動(dòng)畫(huà)文件的導(dǎo)出導(dǎo)出能用于網(wǎng)頁(yè)的獨(dú)立動(dòng)畫(huà)文件，則需要使用菜單【文件存儲(chǔ)為Web和設(shè)備所用格式】，將出現(xiàn)一個(gè)如下圖所示的大窗口。這個(gè)大窗口有許多內(nèi)容需要介紹。但現(xiàn)在大家只需要參照紅色箭頭區(qū)域中的設(shè)定即可。 同時(shí)窗口右下方紅色箭頭區(qū)域會(huì)出現(xiàn)播放按鈕和循環(huán)選項(xiàng)，在此更改循環(huán)次數(shù)會(huì)同時(shí)更改源文件中的設(shè)定。需要注意的是，如果在上方的紅色箭頭區(qū)域內(nèi)沒(méi)有選擇GIF，則下方的播放按鈕不可用。這是因?yàn)橹挥蠫IF格式才支持動(dòng)畫(huà)，如果強(qiáng)行保存為其他格式如JPG或PNG，則所生成的圖像中只有第一幀的畫(huà)面。 在存儲(chǔ)過(guò)程中可能出現(xiàn)如下圖所示的警告信息，不必理會(huì)，確定即可。也可以讓其不再顯示。但大家要注意在給文件

10、起名時(shí)要使用半角英文或數(shù)字，不要使用全角字符或中文。這是為了能更廣泛地被各種語(yǔ)言的瀏覽器所兼容。 在這個(gè)章節(jié)中大家要掌握的是動(dòng)畫(huà)的兩項(xiàng)屬性，即幀延遲時(shí)間和循環(huán)次數(shù)。另外要掌握“復(fù)制幀、移動(dòng)圖層”這種的制作簡(jiǎn)單物體位移動(dòng)畫(huà)的方法。并使用該方法制作出同時(shí)有兩個(gè)物體位移的動(dòng)畫(huà)。幀的傳播特性及過(guò)度幀的傳播特性及過(guò)度 幀的透明度傳播幀的透明度傳播在上一節(jié)課中，我們講了我們制作的是位移動(dòng)畫(huà)，是利用圖層的移動(dòng)。除此之外，還可以通過(guò)設(shè)定不同的圖層部透明度來(lái)產(chǎn)生動(dòng)畫(huà)，那就是在不同的幀中改變圖層調(diào)板中的部透明度數(shù)值?，F(xiàn)在新建一個(gè)400100的圖像，新建一個(gè)圖層并繪制一個(gè)圓形。然后一次性復(fù)制4個(gè)幀出來(lái)，將會(huì)看到5個(gè)

11、幀都是相同的內(nèi)容。將所有幀的停留時(shí)間統(tǒng)一改為秒，如下圖所示。接著選擇第2幀，在圖層調(diào)板中將方塊圖層的不透明度改為80%，第3幀60%，以此類推，因?yàn)槲覀冞€有一個(gè)0%的延遲，所以還需要再?gòu)?fù)制一個(gè)幀出來(lái)，為第6幀，并設(shè)定透明度為0%。形成的效果如右圖所示。這時(shí)候播放就會(huì)看到方塊逐漸漸隱的效果。11.3.2 幀的傳播透明性幀的傳播透明性在操作的過(guò)程中大家不難發(fā)現(xiàn)，對(duì)于圖層調(diào)板中的不透明度而言，在選擇另外一幀的時(shí)候它又會(huì)回到100%。這說(shuō)明一個(gè)特性，那就是對(duì)其中一幀的不透明度更改并不會(huì)影響到其他幀。 現(xiàn)在我們已經(jīng)掌握了兩種可產(chǎn)生動(dòng)畫(huà)效果的設(shè)定，一是圖層位置，二是圖層不透明度，現(xiàn)在可以綜合利用兩者來(lái)制作

12、一個(gè)既移動(dòng)又漸隱的動(dòng)畫(huà)了。只要在剛才單純漸隱的基礎(chǔ)上加以修改就可以了。 不過(guò)我們需要一個(gè)從左端移動(dòng)到右端的效果，也就是說(shuō)形狀的起始位置必須在左端，但現(xiàn)在所有幀中的形狀都在中間，這該怎么辦呢？ 既然“所有幀”都在中間，那么我們就讓“所有幀”都到左邊吧。在動(dòng)畫(huà)調(diào)板中選擇所有的幀，通過(guò)移動(dòng)工具移動(dòng)圖層到最左端，就會(huì)看到所有幀中方塊的位置都發(fā)生了改變。此外還有一種方法：整個(gè)動(dòng)畫(huà)過(guò)程可以看作是一個(gè)前因后果的關(guān)系，如果你在第一幀刪除了某個(gè)圖層，那么之后所有幀中就都不存在這個(gè)層了。因此在Photoshop-CS3動(dòng)畫(huà)設(shè)定中，第一幀是比較特殊的?，F(xiàn)在選擇第一幀，確保圖層調(diào)板中“傳播幀1”已被勾選，如下左圖紅色

13、箭頭處所示。然后移動(dòng)圖層，就會(huì)發(fā)現(xiàn)所有幀中的方塊都統(tǒng)一發(fā)生了移動(dòng)，如下右圖所示。如果“傳播幀1”未被勾選，則只會(huì)改變第1幀中的方塊位置。這兩種方法各有利弊，“傳播幀1”其實(shí)就是將第1幀的改變傳播給之后的所有幀。它可以很方便地改變整個(gè)動(dòng)畫(huà)中某些物體的設(shè)定。而選擇所有幀的做法在幀數(shù)較多的時(shí)候會(huì)稍顯麻煩，但它可以派生出“選擇某些幀”的方式，比如只要改變前3幀時(shí)，就可以將前3幀一起選擇后進(jìn)行設(shè)定。 需要注意的是，即使原先每個(gè)幀都設(shè)定了不同的圖層位置，“傳播幀1”也仍然有效。效果等同于所有幀中的坐標(biāo)按照第一幀進(jìn)行偏移。11.3.3 幀的選擇幀的選擇 在這里再說(shuō)一下選擇多個(gè)幀的問(wèn)題，我們已經(jīng)知道如果要選擇

14、前4幀，可以先選擇幀1后按住SHIFT鍵再點(diǎn)擊幀4，或者反其道而行之也可。但如果要選擇不連續(xù)的幀，如幀1、幀3、幀4，則可以先按照之前的方法選擇幀1到幀4，然后按住CTRL鍵單擊幀2，就可以減去選擇幀2。重復(fù)操作一次則又可以添加選擇幀2。如果是要選擇距離較遠(yuǎn)的個(gè)別幀，如幀2、幀11、幀17、幀27，則可以先單獨(dú)選擇其中任意一個(gè)，再按住CTRL去添加選擇其他的幀。 將所有的幀中的方塊都移動(dòng)到左端后，要做的就是逐個(gè)幀地設(shè)定方塊的位置，那就是選擇第2幀移動(dòng)些許，選擇第3幀移動(dòng)些許。當(dāng)然這中間有一個(gè)我們已經(jīng)提到過(guò)的問(wèn)題，就是很難保證移動(dòng)的流暢。 11.3.4 幀的過(guò)渡幀的過(guò)渡 目前我們制作動(dòng)畫(huà)的方法還

15、屬于全手動(dòng)類型的，就是逐幀進(jìn)行制作。比如一個(gè)物體的移動(dòng)，我們是從頭到尾參與了每一幀的設(shè)定。這種方式能夠帶來(lái)最大的可干預(yù)性，但同時(shí)也使得制作變得非常繁瑣，尤其是幀數(shù)多的時(shí)候。今天我們要學(xué)習(xí)的就是利用幀過(guò)渡來(lái)制作動(dòng)畫(huà)，它的基本原理是，設(shè)定好某段運(yùn)動(dòng)的起始幀和結(jié)束幀，然后在這兩幀中產(chǎn)生平均的過(guò)渡。如果是物體的移動(dòng)，則就是先設(shè)定好移動(dòng)起點(diǎn)幀和終點(diǎn)幀。 新建一個(gè)圖像，大約500100，新建圖層并畫(huà)上圓形形狀，將其移動(dòng)到左上角。接著復(fù)制1幀，在新幀中將方塊移動(dòng)到右下角，并將圖層部透明度設(shè)為10%，大致下左圖所示。然后按下紅色箭頭處的按鈕，將出現(xiàn)下右圖所示的對(duì)話框，下右圖中紅色箭頭處的過(guò)渡方式是指過(guò)渡相對(duì)哪

16、一幀，由于之前我們選擇的是第1幀，并且總共也只有2幀，所以既可以選擇默認(rèn)的“下一幀”，也可以選擇“最后一幀”。要添加的幀數(shù)就是指過(guò)渡過(guò)程所將占用的幀數(shù)，這里設(shè)為5，那么加上原來(lái)7幀，這個(gè)動(dòng)畫(huà)總共就是7幀。 由于只有一個(gè)圖層(背景層未有變化)在參與動(dòng)畫(huà)，所以現(xiàn)在圖層選項(xiàng)中任何一個(gè)都是可以的。但不選擇背景層的話會(huì)形成成透明背景，有關(guān)動(dòng)畫(huà)背景透明的問(wèn)題我們會(huì)在以后學(xué)習(xí)到。注意右圖中紅色箭頭處的參數(shù)，其中有“位置”和“不透明度”這兩項(xiàng)。所謂參數(shù)就是指進(jìn)行動(dòng)畫(huà)過(guò)渡的圖層屬性，我們之前說(shuō)過(guò)圖層的位置和不透明度的變化可以做成動(dòng)畫(huà)，在這里就反映出來(lái)了。確定后將會(huì)在動(dòng)畫(huà)調(diào)板中看到的效果大致如下圖所示，可以很清楚

17、地看到圓形的位置和不透明度都發(fā)生了均勻的過(guò)渡。如果之前在過(guò)渡設(shè)定中關(guān)閉了“位置”或“不透明度”參數(shù)，顯然就沒(méi)有現(xiàn)在的效果了。這種利用過(guò)渡方式制作動(dòng)畫(huà)的方法較為簡(jiǎn)便，我們只需要考慮某段動(dòng)畫(huà)的開(kāi)始和結(jié)束的樣子就可以了，中間的過(guò)程會(huì)自動(dòng)完成。在這種情況下，開(kāi)始和結(jié)束的那兩幀被稱之為關(guān)鍵幀(KeyFrame)，因?yàn)樗鼈儧Q定了過(guò)渡的形態(tài)。以后我們也會(huì)接觸到有多個(gè)關(guān)鍵幀的動(dòng)畫(huà)。時(shí)間軸動(dòng)畫(huà)時(shí)間軸動(dòng)畫(huà) 認(rèn)識(shí)時(shí)間軸認(rèn)識(shí)時(shí)間軸 通過(guò)前面的課程，我們已經(jīng)學(xué)會(huì)了利用關(guān)鍵幀過(guò)渡，以及利用獨(dú)立圖層這兩種制作動(dòng)畫(huà)的方式。它們可以用來(lái)制作一些簡(jiǎn)單的單物體動(dòng)畫(huà)，在很長(zhǎng)一段時(shí)間內(nèi)也是Photoshop唯一的動(dòng)畫(huà)制作方式。今天我們

18、要學(xué)習(xí)一種新的利用“時(shí)間軸”制作動(dòng)畫(huà)的方式。時(shí)間軸方式廣泛運(yùn)用在許多影視制作軟件中，如Premiere、AfterEffects等，包括Flash也是采用這種方式。 首先，我們按照右圖制作 準(zhǔn)備圖像文件 點(diǎn)擊動(dòng)畫(huà)調(diào)板右下角的按鈕，即可切換到時(shí)間軸方式，如下圖所示。細(xì)心的讀者會(huì)注意到調(diào)板的名稱變?yōu)榱恕皠?dòng)畫(huà)(時(shí)間軸)”，而之前的是“動(dòng)畫(huà)(幀)”。右下角的按鈕變?yōu)榱?，點(diǎn)擊將會(huì)切換到原先的幀方式。 需要注意的是，這兩種方式是互不兼容的，因此不要在制作過(guò)程中進(jìn)行切換。如果誤切換了，可以使用撤銷命令CTRL+ALT+Z挽回。在時(shí)間軸中我們看到了類似圖層調(diào)板中的圖層名字，其高低位置也與圖層調(diào)板相同。點(diǎn)擊圖層

19、左方的箭頭標(biāo)志就會(huì)展開(kāi)該圖層所有的動(dòng)畫(huà)項(xiàng)目，也就是能制作為動(dòng)畫(huà)的要素。在不同性質(zhì)的圖層中，其動(dòng)畫(huà)項(xiàng)目也不相同。 所謂不同性質(zhì)就是指如普通圖層、帶蒙版的普通圖層、文字圖層、調(diào)整圖層等，這些屬于不同性質(zhì)的圖層。如圖11-23所示分別是“PhotoShop CS3”文字層與“形狀1”矢量形狀層展開(kāi)后的動(dòng)畫(huà)項(xiàng)目。其共有的是位置、不透明度、樣式。不同的是文字層多了一個(gè)“文字變形”項(xiàng)目，而矢量形狀層多了兩個(gè)與蒙版有關(guān)的項(xiàng)目。 動(dòng)畫(huà)的制作不能超出圖層自身的 動(dòng)畫(huà)項(xiàng)目，比如不能對(duì)形狀層進(jìn)行“文 字變形”。但有些動(dòng)畫(huà)項(xiàng)目可以后期再 添加，如對(duì)文字層添加蒙版后，就令其 具備了蒙版的動(dòng)畫(huà)項(xiàng)目。 在調(diào)板左上方有一組數(shù)

20、字0:00:00:00， 這是當(dāng)前的時(shí)間碼，從右端起分別是毫秒 秒、分鐘、小時(shí)。一般也就用到秒這級(jí)。 時(shí)間碼后面還有一個(gè)，這個(gè)就是 幀速率，表示每秒多少幀。一般取值為整數(shù)，在影視編輯方面才會(huì)用到小數(shù)幀率。 點(diǎn)擊動(dòng)畫(huà)調(diào)板右上角的 按鈕后選擇“文檔設(shè)定”，就會(huì)出現(xiàn)如下圖所示的時(shí)間軸設(shè)定。在其中可以指定動(dòng)畫(huà)總時(shí)長(zhǎng)和幀速率。按照默認(rèn)的設(shè)置，是總長(zhǎng)10秒，每秒30幀，這樣總幀數(shù)就是300幀，對(duì)于網(wǎng)頁(yè)動(dòng)畫(huà)來(lái)說(shuō)這是一個(gè)相當(dāng)大的數(shù)值了，制作出來(lái)會(huì)占用很大的字節(jié)數(shù)，不利于網(wǎng)絡(luò)的傳輸。 如圖11-25所示，將動(dòng)畫(huà)調(diào)板橫向拉大一些，就會(huì)看到01:00、02:00這樣的時(shí)間標(biāo)志，單位為秒。時(shí)間軸的最右端正是剛才所設(shè)定

21、的5秒總時(shí)長(zhǎng)。將紅色箭頭所指出的滑桿向右方拖動(dòng)，就能放大時(shí)間軸的細(xì)節(jié)，紅框區(qū)域內(nèi)就是放大后的時(shí)間軸。可以看到在秒之間有了01f、02f這樣的標(biāo)志，這就是幀。我們剛才的設(shè)定是5fps，所以每?jī)擅胫g都有5個(gè)幀。雖然我們只看到最大04f，但要知道05f其實(shí)就是和01:00重合在一起的。因此被表達(dá)為01:00f，意思就是該處既是第一秒，也是一個(gè)幀。注意在兩個(gè)紅色箭頭之間有一條不太顯眼的細(xì)線，這是渲染緩沖指示，其他影視編輯軟件也都有這個(gè)指示，不過(guò)在Photoshop中它的作用并不是很重要，在后面的課程中會(huì)提到。右圖為放大的時(shí)間軸細(xì)節(jié)11.4.2 使用時(shí)間軸來(lái)制作動(dòng)畫(huà)使用時(shí)間軸來(lái)制作動(dòng)畫(huà) 現(xiàn)在我們正式開(kāi)

22、始利用時(shí)間軸來(lái)制作動(dòng)畫(huà)，這與我們之前的幀式動(dòng)畫(huà)有很大不同，但相比之下時(shí)間軸方式來(lái)的更直觀和簡(jiǎn)便，也是我們以后最主要的制作方式。 接著上一節(jié)的內(nèi)容，開(kāi)始設(shè)定“PhotoShop CS3”的動(dòng)畫(huà)。在時(shí)間軸調(diào)板中展開(kāi)這個(gè)文字層的動(dòng)畫(huà)項(xiàng)目，如圖11-26所示。確保當(dāng)前時(shí)間為0:00:00:00，同時(shí)注意紅色箭頭處的時(shí)間桿應(yīng)位于最左端，這就表示是處在起始時(shí)刻。 接著用移動(dòng)工具將“PhotoShop CS3”文字 移動(dòng)到畫(huà)面的右端。然后在點(diǎn)擊圖11-26左紅色 箭頭處的秒表按鈕，這表示啟動(dòng)了“位置”這一 動(dòng)畫(huà)項(xiàng)目，并且將目前該文字層的位置(畫(huà)面最 右端)記錄在起始時(shí)刻。時(shí)間軸區(qū)域中出現(xiàn)的黃 色菱形就是該處

23、包含記錄的標(biāo)志，這也稱為關(guān)鍵 幀，是時(shí)間軸的關(guān)鍵幀，與我們以前學(xué)習(xí)的過(guò)渡 幀動(dòng)畫(huà)不同。 將時(shí)間標(biāo)桿拉到最右邊，使用移動(dòng)工具將文字移動(dòng)到畫(huà)面最左端，這時(shí)會(huì)看到時(shí)間軸上的標(biāo)桿處自動(dòng)產(chǎn)生了一個(gè)關(guān)鍵幀。如圖11-27所示，并且注意在紅色箭頭處有一個(gè)菱形的“刪除/添加”按鈕，此時(shí)如果按下該按鈕，將會(huì)刪除時(shí)間標(biāo)桿處已建立的關(guān)鍵幀。如果標(biāo)桿處沒(méi)有關(guān)鍵幀，點(diǎn)擊則可建立一個(gè)新幀。 通過(guò)以上的設(shè)定我們完成了“動(dòng)畫(huà)制作部分”文字的位置移動(dòng)設(shè)定。接著來(lái)設(shè)定其透明度變化。我們先弄個(gè)簡(jiǎn)單的，就是從開(kāi)始時(shí)淡入，進(jìn)行到一半時(shí)完全顯現(xiàn)，然后淡出直到結(jié)束。這樣就需要3個(gè)關(guān)鍵幀進(jìn)行設(shè)定，在開(kāi)始時(shí)刻設(shè)定為0%，一半時(shí)設(shè)定為100%，

24、結(jié)束時(shí)再設(shè)為0%即可完成。大致如下圖所示。注意在時(shí)間軸方式下不能通過(guò)隱藏圖層實(shí)現(xiàn)透明度變化。 從以上操作我們可以總結(jié)出時(shí)間軸式動(dòng)畫(huà)的一個(gè)基本特性，那就是將各個(gè)動(dòng)畫(huà)項(xiàng)目獨(dú)立出來(lái)，對(duì)其中一個(gè)項(xiàng)目的修改并不會(huì)影響其他項(xiàng)目。比如我們?cè)谛薷摹巴该鞫取钡臅r(shí)候就不需要去考慮早先設(shè)定好的“位置”。另外就是各項(xiàng)目的關(guān)鍵幀設(shè)定允許不相同，不必為了統(tǒng)一關(guān)鍵幀數(shù)量再花費(fèi)心思。 關(guān)于新增關(guān)鍵幀有一個(gè)需要注意的問(wèn)題，那就是自動(dòng)添加和手動(dòng)添加的區(qū)別。當(dāng)點(diǎn)擊某個(gè)項(xiàng)目的秒表按鈕 后，該項(xiàng)目就會(huì)在時(shí)間標(biāo)桿處建立一個(gè)關(guān)鍵幀，并自動(dòng)跟蹤該項(xiàng)目在其他時(shí)間范圍中的變化。這就意味著如果將時(shí)間標(biāo)桿移動(dòng)到一個(gè)新位置，并對(duì)圖層的該項(xiàng)目上做出了更

25、改后，將會(huì)自動(dòng)在當(dāng)時(shí)標(biāo)桿處建立一個(gè)新幀。如果未做任何更改又想建立關(guān)鍵幀，就需要手動(dòng)點(diǎn)擊秒表按鈕左邊的 按鈕(注意在已有幀處點(diǎn)擊將刪除該幀)。點(diǎn)擊前一幀 和后一幀 按鈕則可在各關(guān)鍵幀之間跳轉(zhuǎn)。也可以直接在關(guān)鍵幀上點(diǎn)擊右鍵選擇刪除該幀。 一般來(lái)說(shuō)，我們都是在動(dòng)畫(huà)起始時(shí)刻點(diǎn)擊秒表按鈕 建立第一個(gè)關(guān)鍵幀，然后將標(biāo)桿移動(dòng)到適當(dāng)?shù)臅r(shí)刻，對(duì)圖層做出相應(yīng)改變，獲得新的自動(dòng)關(guān)鍵幀。周而復(fù)始完成整個(gè)設(shè)定過(guò)程。相對(duì)而言，手動(dòng)建立幀的機(jī)會(huì)并不多，因?yàn)槎际菫榱嗽O(shè)定，效果與自動(dòng)增加的幀區(qū)別不大。后面的課程中講解制作加速和減速效果時(shí)會(huì)用到手動(dòng)新增幀。 除了單個(gè)項(xiàng)目以外，也可以同時(shí)設(shè)定多個(gè)動(dòng)畫(huà)項(xiàng)目，它們都會(huì)被自動(dòng)跟蹤。現(xiàn)在我

26、們將時(shí)間標(biāo)桿移動(dòng)到起始時(shí)刻，如圖11-30所示，啟動(dòng)“動(dòng)畫(huà)制作部分”文本圖層和“形狀1”相應(yīng)的動(dòng)畫(huà)項(xiàng)目，然后拉動(dòng)時(shí)間標(biāo)桿到不同時(shí)刻，相應(yīng)改變位置和不透明度等。有改變的地方就會(huì)留下幀標(biāo)志。 需要注意的是，由于“形狀1”是矢量蒙版圖層，因此要記錄其位置移動(dòng)必須 使用“矢量蒙版位置”項(xiàng)目，而不是“位置”。11.5 GIF動(dòng)畫(huà)導(dǎo)入和導(dǎo)出動(dòng)畫(huà)導(dǎo)入和導(dǎo)出 視頻的導(dǎo)入視頻的導(dǎo)入 我們也可以將一段視頻作為動(dòng)畫(huà)的素材加以導(dǎo)入，方法是使用“文件”|“導(dǎo)入”|“視頻幀到圖層”命令。這個(gè)命令要求系統(tǒng)中安裝有及以上版本才能使用，否則會(huì)出現(xiàn)如下右圖所示的警告框。QuickTime是蘋(píng)果公司所創(chuàng)的一種應(yīng)用于視頻的優(yōu)秀的編碼方式，早年只能在MAC OS系統(tǒng)中使用，現(xiàn)在已經(jīng)移植到Windows系統(tǒng)中。可從Apple的網(wǎng)站上下載免費(fèi)版本的播放器，網(wǎng)址為 :/。 我們將一段自拍的動(dòng)物視頻經(jīng)由Premiere剪接為簡(jiǎn)短的版本做為演示。進(jìn)入導(dǎo)入視頻幀到圖層后的對(duì)話框如左圖所示。11.5.2 GIF動(dòng)畫(huà)的導(dǎo)入動(dòng)畫(huà)