實例10 制作GIF動畫（動畫的制作）

實例說明

GIF動畫是互聯(lián)網(wǎng)常用的一種動畫格式，在網(wǎng)頁中添加GIF動畫，不僅可以美化網(wǎng)站，還可以吸引觀眾，起到更好的宣傳效果。應(yīng)用Photoshop CS3中的“動畫”面板可能制作GIF格式動畫，通過本實例的學(xué)習(xí)，使用讀者能夠了解“動畫”面板的應(yīng)用。

技術(shù)要點

本實例的制作過程中，首先打開上一實例中保存的“制作GIF動畫（素材的制作）”文件，然后進入“動畫”面板，在“動畫”面板中復(fù)制新的幀，然后通過編輯各幀中圖層的不同顯示狀態(tài)，完成GIF動畫的制作。

在制作本實例時，應(yīng)注意調(diào)整各幀中的幀延遲時間。因為第2幀中的背景顏色與第1幀中的背景顏色沒有變化，所以需要將第1幀中的圖像顯示時間延長至0.5 s，使其有一個較長的停頓過程，然后將其他幀中的圖像均延遲0.2 s，完成該實例的制作。圖10-1為該動畫的部分靜幀畫面。

1 運行Photoshop CS3，在菜單欄中執(zhí)行“文件”/“打開”命令，彈出“打開”對話框，從該對話框內(nèi)選擇本書附帶光盤中的“使用Photoshop CS3編輯網(wǎng)頁素材/實例9：制作GIF動畫（素材的制作）/作GIF動畫（素材的制作）.psd”文件，單擊“打開”按鈕，打開上一實例中保存的文件，如圖10-2所示。

2 執(zhí)行菜菜單欄中的“窗口”/“動畫”命令，進入“動畫（時間軸）”面板，如圖10-3所示。

3 單擊“動畫（時間軸）”面板底部的“轉(zhuǎn)換為幀動畫”按鈕，進入“動畫（幀）”面板，如圖10-4所示。

4 單擊“動畫（幀）”面板底部的“復(fù)制選中的幀”按鈕，復(fù)制幀，如圖10-5所示。

5 使用以上方法，按下“動畫（幀）”面板底部的“復(fù)制選中的幀”按鈕3次，復(fù)制3個幀。

6 選擇第1幀，在“圖層”面板中單擊“黃背景”層、“綠背景”層、“藍背景”層、“藍花副本”層、“綠花副本”層、“黃花副本”層和“紅花副本”層左側(cè)的“指示圖層可視性”按鈕，將該些圖層隱藏。

7 單擊第1幀中的“選擇幀延遲時間”下拉按鈕，在彈出的下拉式選項欄中選擇0.5，使該幀延遲0.5 s，如圖10-6所示。

8 選擇第2幀，在“圖層”面板中單擊“紅花副本”層左側(cè)的“指示圖層可視性”按鈕，將該圖層取消隱藏，單擊第2幀中的“選擇幀延遲時間”下拉按鈕，在彈出的下拉式選項欄中選擇0.2，使該幀延遲0.2 s。

9 選擇第3幀，在“圖層”面板中單擊“黃花副本”層和“黃背景”層左側(cè)的“指示圖層可視性”按鈕，將該些圖層取消隱藏，單擊第3幀中的“選擇幀延遲時間”下拉按鈕，在彈出的下拉式選項欄中選擇0.2，使該幀延遲0.2 s，如圖10-7所示。

10 確定第3幀處于可編輯狀態(tài)，在“圖層”面板中將“炫酷色彩,一起心動!”層中的文字移動至圖10-8所示的黃花圖像底部。

11 選擇第4幀，在“圖層”面板中單擊“綠花副本”層和“綠背景”層左側(cè)的“指示圖層可視性”按鈕，將該些圖層取消隱藏，單擊第4幀中的“選擇幀延遲時間”下拉按鈕，在彈出的下拉式選項欄中選擇0.2，使該幀延遲0.2 s。

12 確定第4幀處于可編輯狀態(tài)，在“圖層”面板中將“炫酷色彩,一起心動!”層中的文字移動至圖10-9所示的綠花圖像底部。

13 選擇第5幀，在“圖層”面板中單擊“藍花副本”層和“藍背景”層左側(cè)的“指示圖層可視性”按鈕，將該些圖層取消隱藏，單擊第5幀中的“選擇幀延遲時間”下拉按鈕，在彈出的下拉式選項欄中選擇0.2，使該幀延遲0.2 s。

14 確定第5幀處于可編輯狀態(tài)，在“圖層”面板中將“炫酷色彩,一起心動!”層中的文字移動至圖10-10所示的藍花圖像底部。

15 接下來將該動畫進行輸出。執(zhí)行菜單欄中的“文件”/“存儲為Web和設(shè)備所用格式”命令，打開“存儲為Web和設(shè)備所用格式”對話框，如圖10-11所示。

16 單擊“存儲”按鈕，打開“將優(yōu)化結(jié)果存儲為”對話框，在“文件名”文本框中鍵入“數(shù)碼相機動畫”，在“保存類型”下拉式選項欄中選擇“僅限圖像（*.gif）”選項，如圖10-12所示。其他參數(shù)使用默認(rèn)設(shè)置，單擊“保存”按鈕，將該動畫保存。

17 現(xiàn)在GIF動畫的制作就全部完成了，圖10-13為該動畫的部分靜幀畫面。如果讀者在制作過程中遇到了什么問題，可以打開本書附帶光盤“使用Photoshop CS3編輯網(wǎng)頁素材/實例10：制作GIF動畫（動畫的制作）/制作GIF動畫（動畫的制作）.psd”文件，該文件為本實例完成后的效果。