Photoshop_CS3_GIF動畫制作

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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