實(shí)例9 制作GIF動(dòng)畫（素材的制作）

實(shí)例說(shuō)明

GIF動(dòng)畫可以實(shí)現(xiàn)圖片的動(dòng)態(tài)效果。在網(wǎng)頁(yè)中，GIF動(dòng)畫的應(yīng)用非常廣泛，在Photoshop CS3中，可以應(yīng)用“動(dòng)畫”面板制作相關(guān)的GIF動(dòng)畫。在本實(shí)例中，將制作一款數(shù)碼相機(jī)的GIF動(dòng)畫，由于該動(dòng)畫的制作過(guò)程比較優(yōu)復(fù)雜，將分為素材的制作和動(dòng)畫設(shè)置兩部分完成，在本實(shí)例中，將制作GIF動(dòng)畫的素材部分。

技術(shù)要點(diǎn)

在制作本實(shí)例時(shí)，首先導(dǎo)入背景素材圖像，然后使用裁剪工具將素材圖像進(jìn)行裁剪，將背景層進(jìn)行多次復(fù)制，通過(guò)使用色相/飽和度工具將各個(gè)圖層的背景顏色進(jìn)行調(diào)整，接下來(lái)分別導(dǎo)入數(shù)碼相機(jī)和花素材圖像，然后對(duì)該圖像進(jìn)行編輯調(diào)整，最后在添加文本，完成GIF動(dòng)畫的素材部分制作。

本實(shí)例中主要制作GIF動(dòng)畫展示數(shù)碼相機(jī)的炫彩效果，因此在制作動(dòng)畫素材時(shí)，使用了較為鮮艷的顏色，該素材分別由紅、黃、綠、藍(lán)四種不同背景組成，圖案主體部分為一款數(shù)碼相機(jī)圖像，為配合背景顏色的變化，在相機(jī)左側(cè)，分別由紅、黃、綠、藍(lán)四種顏色的花圖像組成，由于在以后的GIF動(dòng)畫中，需要配合背景逐個(gè)突出花圖像，所以在編輯素材時(shí)需將紅、黃、綠、藍(lán)四種花圖像分別創(chuàng)建兩個(gè)圖層，調(diào)整其中一個(gè)圖層中的圖像較大顯示。圖9-1為本實(shí)例完成后的效果。

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

2 確定“背景.jpg”處于可編輯狀態(tài)，在工具箱中單擊“裁剪工具”按鈕，這時(shí)在屬性欄內(nèi)會(huì)出現(xiàn)其編輯參數(shù)，在屬性欄中在“寬度”參數(shù)欄內(nèi)鍵入6.94，在“高度”參數(shù)欄內(nèi)鍵入2.78，在“分辨率”參數(shù)欄內(nèi)鍵入72，將“設(shè)置裁剪圖像的分辨率”設(shè)置為“像素/厘米”，參照?qǐng)D9-3所示將圖像進(jìn)行裁剪，雙擊鼠標(biāo)，退出編輯模式。

3 執(zhí)行菜單欄中的“圖像”/“旋轉(zhuǎn)畫步”/“水平翻轉(zhuǎn)畫布”命令，將畫布進(jìn)行翻轉(zhuǎn)，如圖9-4所示。雙擊鼠標(biāo)，退出編輯模式。

4 選擇“背景”層，在菜單欄中執(zhí)行“圖像”/“調(diào)整”/“色相/飽和度”命令，打開“色相/飽和度”對(duì)話框。選擇“著色”復(fù)選項(xiàng)框，在“色相”參數(shù)欄內(nèi)鍵入0，在“飽和度”參數(shù)欄內(nèi)鍵入85，在“明度”參數(shù)欄內(nèi)鍵入52，如圖9-5所示，然后單擊“確定”按鈕，退出該對(duì)話框。

5 選擇“背景”層，將其拖動(dòng)至“圖層”面板底部的“創(chuàng)建新圖層”按鈕處，復(fù)制得到“背景副本”層，使用同樣方法，分別復(fù)制“背景副本2”層和“背景副本3”層，如圖9-6所示。

6 將“背景副本3”層命名為“黃背景”，將“背景副本2”層命名為“綠背景”，將“背景副本”層命名為“藍(lán)背景”，如圖9-7所示。

7 為了便于編輯，單擊“綠背景”層和“藍(lán)背景”層左側(cè)的“指示圖層可見性”按鈕，將該圖層隱藏，如圖9-8所示。

8 選擇“黃背景”層，在菜單欄中執(zhí)行“圖像”/“調(diào)整”/“色相/飽和度”命令，打開“色相/飽和度”對(duì)話框。在“色相”參數(shù)欄內(nèi)鍵入40，在“飽和度”參數(shù)欄內(nèi)鍵入30，在“明度”參數(shù)欄內(nèi)鍵入-5，如圖9-9所示，然后單擊“確定”按鈕，退出該對(duì)話框。

9 單擊“綠背景”層左側(cè)的“指示圖層可見性”按鈕，將該圖層取消隱藏，選擇“綠背景”層，在菜單欄中執(zhí)行“圖像”/“調(diào)整”/“色相/飽和度”命令，打開“色相/飽和度”對(duì)話框。在“色相”參數(shù)欄內(nèi)鍵入118，在“飽和度”參數(shù)欄內(nèi)鍵入8，在“明度”參數(shù)欄內(nèi)鍵入-1，如圖9-10所示，然后單擊“確定”按鈕，退出該對(duì)話框。

10 單擊“藍(lán)背景”層左側(cè)的“指示圖層可見性”按鈕，將該圖層取消隱藏，選擇“藍(lán)背景”層，在菜單欄中執(zhí)行“圖像”/“調(diào)整”/“色相/飽和度”命令，打開“色相/飽和度”對(duì)話框。在“色相”參數(shù)欄內(nèi)鍵入-153，如圖9-11所示，然后單擊“確定”按鈕，退出該對(duì)話框。

11 單擊“圖層”面板中的“創(chuàng)建新圖層”按鈕，創(chuàng)建一個(gè)新圖層——“圖層1”。選擇工具箱中的“矩形選框工具”，創(chuàng)建一個(gè)如圖9-12所示的矩形選區(qū)，將前景色設(shè)置為白色，按組合鍵Alt+Delete將選區(qū)進(jìn)行填充。

12 按組合鍵Ctrl+D取消選區(qū)。在菜單欄中執(zhí)行“文件”/“打開”命令，彈出“打開”對(duì)話框，從該對(duì)話框內(nèi)選擇本書附帶光盤中的“使用Photoshop CS3編輯網(wǎng)頁(yè)素材/實(shí)例9：制作GIF動(dòng)畫（素材的制作）/手機(jī).jpg”文件，單擊“打開”按鈕，打開該文件，如圖9-13所示。

13 確定“手機(jī).jpg”處于可編輯狀態(tài)，在工具箱中單擊“魔棒工具”按鈕，在屬性欄中在“容差”參數(shù)欄內(nèi)鍵入50，單擊“手機(jī).jpg”中的白色區(qū)域，在白色區(qū)域內(nèi)會(huì)出現(xiàn)一個(gè)選區(qū)，如圖9-14所示。

14 按組合鍵Ctrl+Shift+I將選區(qū)進(jìn)行反選。使用工具箱中的“移動(dòng)工具”，將“手機(jī).jpg”移動(dòng)至到圖9-15所示的位置，在“圖層”面板中自動(dòng)生成“圖層2”。

15 選擇“圖層2”層，將其拖動(dòng)至“圖層”面板底部的“創(chuàng)建新圖層”按鈕處，復(fù)制得到“圖層2副本”層。

16 選擇“圖層2”，按組合鍵Ctrl+T打開自由變化框，右擊鼠標(biāo)，在彈出的快捷菜單中選擇“垂直翻轉(zhuǎn)”選項(xiàng)，將圖像進(jìn)行翻轉(zhuǎn)。

17 按住Ctlr鍵，調(diào)整控制點(diǎn)位置，將圖像調(diào)整為如圖9-16所示的形態(tài)。

18 按Enter鍵，取消自由變換框。選擇工具箱中的“橡皮擦工具”，在屬性欄中在“畫筆”的“主直徑”參數(shù)欄內(nèi)鍵入80，參照?qǐng)D9-17所示將圖像底部進(jìn)行擦除。

19 執(zhí)行菜單欄中的“濾鏡”/“模糊”/“高斯模糊”命令，打開“高斯模糊”對(duì)話框，在“半徑”參數(shù)欄內(nèi)鍵入0.5，單擊“確定”按鈕，退出該對(duì)話框，如圖9-18所示。

20 在“圖層”面板中的“不透明度”參數(shù)欄內(nèi)鍵入60，如圖9-19所示。

21 執(zhí)行菜單欄中的“圖像”/“調(diào)整”/“亮度/對(duì)比度”命令，打開“亮度/對(duì)比度”對(duì)話框，在“亮度”參數(shù)欄內(nèi)鍵入-60，單擊“確定”按鈕，退出該對(duì)話框，如圖9-20所示。

22 在菜單欄中執(zhí)行“文件”/“打開”命令，彈出“打開”對(duì)話框，從該對(duì)話框內(nèi)選擇本書附帶光盤中的“使用Photoshop CS3編輯網(wǎng)頁(yè)素材/實(shí)例9：制作GIF動(dòng)畫（素材的制作）/花素材.jpg”文件，單擊“打開”按鈕，打開該文件，如圖9-21所示。

23 使用工具箱中的“移動(dòng)工具”，將“花素材.jpg”移至到如圖9-22所示的位置，在“圖層”面板中自動(dòng)生成“圖層3”。按組合鍵Ctrl+T，使用“自由變化”工具將圖像的大小進(jìn)調(diào)整。

24 按Enter鍵，取消選區(qū)。在“圖層”面板中將“圖層3”命名為“藍(lán)花”。按住Ctrl鍵不放，單擊“藍(lán)花”層的“圖層縮覽圖”，加載選區(qū)。

25 在該選區(qū)中右擊，在彈出的快捷菜單中選擇“描邊”選項(xiàng)，進(jìn)入“描邊”對(duì)話框，在“寬度”參數(shù)欄內(nèi)鍵入4，將“顏色”設(shè)置為白色，選擇“居外”單選按鈕，如圖9-23所示。單擊“確定”按鈕，退出該對(duì)話框。

26 按組合鍵Ctrl+D取消選區(qū)。選擇“藍(lán)花”層，將其拖至“圖層”面板底部的“創(chuàng)建新圖層”按鈕處，復(fù)制生成“藍(lán)花副本”層，將該圖層命名為“綠花”。

27 選擇“綠花”層，將該圖像移動(dòng)至圖9-24所示的位置。

28 確定“綠花”層處于可編輯狀態(tài)，執(zhí)行菜單欄中“圖像”/“調(diào)整”/“色相/飽和度”命令，打開“色相/飽和度”對(duì)話框。在“色相”參數(shù)欄內(nèi)鍵入-98，將該圖像調(diào)整為黃色調(diào)。然后單擊“確定”按鈕，退出該對(duì)話框。

29 選擇“綠花”層，將其拖動(dòng)至“圖層”面板底部的“創(chuàng)建新圖層”按鈕處，復(fù)制生成“綠花副本”層，將該圖層命名為“黃花”。

30 選擇“黃花”層，將該圖像移動(dòng)至圖9-25所示的位置。

31 確定“黃花”層處于可編輯狀態(tài)，執(zhí)行菜單欄中“圖像”/“調(diào)整”/“色相/飽和度”命令，打開“色相/飽和度”對(duì)話框。在“色相”參數(shù)欄內(nèi)鍵入-55，將該圖像調(diào)整為黃色調(diào)。然后單擊“確定”按鈕，退出該對(duì)話框。

32 選擇“黃花”層，將其拖至“圖層”面板底部的“創(chuàng)建新圖層”按鈕中，復(fù)制生成“黃花副本”層，將該圖層命名為“紅花”。

33 選擇“紅花”層，將該圖像移動(dòng)至圖9-26所示的位置。

34 確定“紅花”層處于可編輯狀態(tài)，執(zhí)行菜單欄中“圖像”/“調(diào)整”/“色相/飽和度”命令，打開“色相/飽和度”對(duì)話框。在“色相”參數(shù)欄內(nèi)鍵入-55，將該圖像調(diào)整為紅色調(diào)。然后單擊“確定”按鈕，退出該對(duì)話框。

35 按Ctrl鍵，分別選擇“藍(lán)花”層、“綠花”層、“黃花”層和“紅花”層，將加選的圖層拖動(dòng)至“圖層”面板底部的“創(chuàng)建新圖層”按鈕處，復(fù)制生成“藍(lán)花副本”層、“綠花副本”層、“黃花副本”層和“紅花副本”層，如圖9-27所示。

36 使用“自由變換”工具將各圖層中的圖像大小進(jìn)行調(diào)整，如圖9-28所示。

37 創(chuàng)建一個(gè)新圖層——“圖層3”。選擇工具箱中的“矩形選框工具”，在工作區(qū)邊緣繪制選區(qū)，右擊該選區(qū)，在彈出的快捷菜單中選擇“描邊”選項(xiàng)，打開“描邊”對(duì)話框，在“寬度”參數(shù)欄內(nèi)鍵入4，將“顏色”設(shè)置為淺灰色，選擇“內(nèi)部”單選按鈕，單擊“確定”按鈕，退出該對(duì)話框，如圖9-29所示。

38 單擊工具箱中的“橫排文字工具”按鈕，在屬性欄內(nèi)的“設(shè)置字體系列”下拉式選項(xiàng)欄中選擇Impact選項(xiàng)，在“字體大小”參數(shù)欄內(nèi)鍵入12，將“設(shè)置文本顏色”顯示窗內(nèi)的顏色設(shè)置為白色，在如圖9-30所示的位置鍵入XUANKU。

39 單擊工具箱中的“橫排文字工具”按鈕，在屬性欄內(nèi)的“設(shè)置字體系列”下拉式選項(xiàng)欄中選擇“方正大黑繁體”選項(xiàng)，在“字體大小”參數(shù)欄內(nèi)鍵入6，將“設(shè)置文本顏色”顯示窗內(nèi)的顏色設(shè)置為黑色，在如圖9-31所示的位置鍵入“炫酷色彩，一起心動(dòng)”。

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

41 將該實(shí)例保存，以便在下一實(shí)例中應(yīng)用。