Photoshop GIF動畫制作公開課PPT教案

1、會計學(xué)1Photoshop GIF動畫制作公開課動畫制作公開課一一.教學(xué)目標(biāo)教學(xué)目標(biāo)Photoshop第1頁/共26頁二二.教學(xué)重點和難點教學(xué)重點和難點第2頁/共26頁三三.教學(xué)方法和教學(xué)安排教學(xué)方法和教學(xué)安排第3頁/共26頁四四.教學(xué)過程教學(xué)過程第4頁/共26頁四四.教學(xué)過程教學(xué)過程第5頁/共26頁四四.教學(xué)過程教學(xué)過程1）動畫面板和圖層面板2）制作簡單的逐幀GIF動畫3）制作過渡GIF動畫4）利用圖片素材創(chuàng)意設(shè)計動畫5）本章小結(jié)3.講解過程講解過程第6頁/共26頁四四.教學(xué)過程教學(xué)過程1. 動畫面板動畫面板2.圖層面板增加的選項圖層面板增加的選項 第7頁/共26頁四四.教學(xué)過程教學(xué)過程動畫

2、面板的打開方法為：單擊動畫面板的打開方法為：單擊“窗口窗口”菜單選擇菜單選擇“動畫動畫”即可打開和關(guān)閉動畫面板如下圖所示。即可打開和關(guān)閉動畫面板如下圖所示。圖層面板中各部分的功能如下：圖層面板中各部分的功能如下：當(dāng)前幀：即動畫文件中當(dāng)前的單幅畫面當(dāng)前幀停留時間：當(dāng)前畫面停頓時間當(dāng)前動畫文件循環(huán)選項：設(shè)定當(dāng)前動畫循環(huán)播放次數(shù)選擇第一幀：選擇動畫開始的單幅畫面選擇上一幀：選擇上一幅單幅畫面播放當(dāng)前動畫：預(yù)覽當(dāng)前動畫選擇最后一幀：選擇當(dāng)前動畫的最后一幅畫面過濾動畫幀：兩個幀之間的位置、透明度、效果變換復(fù)制所選幀：復(fù)制當(dāng)前畫面刪除所選幀：刪除當(dāng)前畫面轉(zhuǎn)換為時間軸動畫：轉(zhuǎn)換為更復(fù)雜的、功能更強大的動畫面

3、板第8頁/共26頁四四.教學(xué)過程教學(xué)過程當(dāng)打開動畫面板的同時，在圖層面板上也會增加一些關(guān)于動畫制作的選項，如下圖所示：當(dāng)打開動畫面板的同時，在圖層面板上也會增加一些關(guān)于動畫制作的選項，如下圖所示： 圖層面板中各部分的功能如下：圖層面板中各部分的功能如下：統(tǒng)一圖層位置： 統(tǒng)一設(shè)定當(dāng)前圖層在所有幀當(dāng)中顯示的位置統(tǒng)一圖層可見性： 統(tǒng)一設(shè)定當(dāng)前圖層在所有幀當(dāng)中是否顯示統(tǒng)一圖層樣式： 統(tǒng)一調(diào)整當(dāng)前圖層在所有幀中的樣式幀的傳播特性： 將第1幀的改變傳播給所有幀第9頁/共26頁四四.教學(xué)過程教學(xué)過程 一個動畫制作的完整過程：一個動畫制作的完整過程： 1.1.制作編輯動畫制作編輯動畫 2.2.設(shè)定幀的延遲時間

4、設(shè)定幀的延遲時間 3.3.動畫的循環(huán)方式動畫的循環(huán)方式 4. 4.動畫文件的導(dǎo)出動畫文件的導(dǎo)出第10頁/共26頁四四.教學(xué)過程（簡單動畫）教學(xué)過程（簡單動畫） 既然稱為動畫，那就是要令畫面中的圖像動起來，現(xiàn)在我們來實際動手畫制作一個“簡單”的動畫吧。1.新建一個200200的空白圖像，如右圖所示。2.新建一個圖層并畫上一個黑色的菱形，大致下圖所示。第11頁/共26頁四四.教學(xué)過程（復(fù)制幀）教學(xué)過程（復(fù)制幀） 3.然后打開動畫面板，在開啟了動畫調(diào)板后，我們就可以開始制作動畫了，在動畫調(diào)板中點擊箭頭處的“復(fù)制所選幀”按鈕，就會看到新增加了一個幀，如下圖所示。按照我們以前的習(xí)慣，這個圖標(biāo)應(yīng)該表示為新

5、建，如新建圖層等，在這里雖然字面上的解釋是復(fù)制，但其實也是一種新建，只不過這新增加出來的幀其實和前一個幀是相同的內(nèi)容。相應(yīng)的，大家也應(yīng)該能想得到垃圾桶似按鈕的作用就是刪除幀。 4.確認(rèn)動畫調(diào)板中目前選擇的是復(fù)制出來的第2幀，然后使用移動工具將圖層中的形狀移動一定距離，大致如右圖所示?？梢钥吹诫m然在第2幀中形狀的位置發(fā)生了改變，但在原先第1幀中方塊的位置依然未變。這是一個很重要的特性。 第12頁/共26頁四四.教學(xué)過程（調(diào)整幀）教學(xué)過程（調(diào)整幀）第13頁/共26頁四四.教學(xué)過程（設(shè)置動畫時間）教學(xué)過程（設(shè)置動畫時間） 6.現(xiàn)在大家可以按下動畫調(diào)板中的播放按鈕，在圖像窗口就可以看到形狀移動的效果了

6、，只是移動的速度很快。這是因為沒有設(shè)置幀延遲時間。注意動畫調(diào)板中每一幀的下方現(xiàn)在都有一個“ 0秒”，這就是幀延遲時間(或稱停留時間)。幀延遲時間表示在動畫過程中該幀顯示的時長。比如某幀的延遲設(shè)為2秒，那么當(dāng)播放到這個幀的時候會停留2秒鐘后才繼續(xù)播放下一幀。延遲默認(rèn)為0秒，每個幀都可以獨立設(shè)定延遲。 7.設(shè)定幀延遲的方法就是點擊幀下方的時間處，在彈出的列表中選擇相應(yīng)的時間即可。如圖11-8所示，將第7幀設(shè)為0.5秒。第14頁/共26頁四四.教學(xué)過程（設(shè)置動畫時間）教學(xué)過程（設(shè)置動畫時間） 8. .列表中的“無延遲”就是0秒，如果沒有想要設(shè)定的時間，可以選擇“其他”后自行輸入數(shù)值(單位為秒)。也可

7、以在選擇多個幀后統(tǒng)一修改延遲，選擇多個幀的方法和選擇多個圖層相同，先在動畫調(diào)板中點擊第1幀將其選擇，然后按住SHIFT鍵點擊第6幀，就選擇了第1至第6幀。然后在其中任意一幀的時間區(qū)進行設(shè)定即可，如下圖所示，設(shè)為0.1秒。這是一個比較常用的延遲時間。 9.再次播放動畫，就會看到形狀移動的速度有所減緩，并且在移動的最后會停留較長時間。很明顯，這是由于它被設(shè)置了較長延遲的緣故。而這種較長的延遲實際上起到了一種突出的作用，在實際制作中就可以利用這個特點來突出某個主題。第15頁/共26頁四四.教學(xué)過程（設(shè)置動畫循環(huán)方式）教學(xué)過程（設(shè)置動畫循環(huán)方式） 10.除了延遲時間外，動畫還有一個特點就是可以設(shè)定播放

8、的循環(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)頁部件的時候。比如將一個欄目的名稱從無到有用動畫漸顯出來，這樣當(dāng)名稱完全顯示出來后就應(yīng)當(dāng)固定，而不能再次消失然后再次漸顯。這時就要使用“一次”的循環(huán)設(shè)定了。第16頁/共26頁四四.教學(xué)過程（導(dǎo)出動畫）教學(xué)過程（導(dǎo)出動畫） 11.導(dǎo)出能用于網(wǎng)頁的獨立動畫文件，則需要使用菜單【文件存儲為We

9、b和設(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，則所生成的圖像中只有第一幀的畫面。第17頁/共26頁四四.教學(xué)過程（導(dǎo)出動畫）教學(xué)過程（導(dǎo)出動畫） 12.在存儲過程中可能出現(xiàn)如下圖所示的警告信息，不必理會，確定即可。也可以讓其不再顯示?？偨Y(jié)： 在這個章節(jié)中大家要掌握的是動

10、畫的兩項屬性，即幀延遲時間和循環(huán)次數(shù)。另外要掌握“復(fù)制幀、移動圖層”這種的制作簡單物體位移動畫的方法。并使用該方法制作出同時有兩個物體位移的動畫。第18頁/共26頁四四.教學(xué)過程（過渡動畫）教學(xué)過程（過渡動畫） 目前我們制作動畫的方法還屬于全手動類型的，就是逐幀進行制作。比如一個物體的移動，我們是從頭到尾參與了每一幀的設(shè)定。這種方式能夠帶來最大的可干預(yù)性，但同時也使得制作變得非常繁瑣，尤其是幀數(shù)多的時候。今天我們要學(xué)習(xí)的就是利用幀過渡來制作動畫，它的基本原理是，設(shè)定好某段運動的起始幀和結(jié)束幀，然后在這兩幀中產(chǎn)生平均的過渡。如果是物體的移動，則就是先設(shè)定好移動起點幀和終點幀。第19頁/共26頁四

11、四.教學(xué)過程（過渡動畫）教學(xué)過程（過渡動畫） 在上一節(jié)課中，我們講了我們制作的是位移動畫，是利用圖層的移動。除此之外，還可以通過設(shè)定不同的圖層部透明度來產(chǎn)生動畫，那就是在不同的幀中改變圖層調(diào)板中的部透明度數(shù)值?，F(xiàn)在新建一個400100的圖像，新建一個圖層并繪制一個圓形。然后一次性復(fù)制4個幀出來，將會看到5個幀都是相同的內(nèi)容。將所有幀的停留時間統(tǒng)一改為0.1秒，如下圖所示。 接著選擇第2幀，在圖層調(diào)板中將方塊圖層的不透明度改為80%，第3幀60%，以此類推，因為我們還有一個0%的延遲，所以還需要再復(fù)制一個幀出來，為第6幀，并設(shè)定透明度為0%。形成的效果如右圖所示。這時候播放就會看到方塊逐漸漸隱的

12、效果。第20頁/共26頁四四.教學(xué)過程（過渡動畫）教學(xué)過程（過渡動畫） 1.新建一個圖像，大約500100，新建圖層并畫上圓形形狀，將其移動到左上角。接著復(fù)制1幀，在新幀中將方塊移動到右下角，并將圖層部透明度設(shè)為10%，大致下左圖所示。然后按下紅色箭頭處的按鈕，將出現(xiàn)下右圖所示的對話框，下右圖中紅色箭頭處的過渡方式是指過渡相對哪一幀，由于之前我們選擇的是第1幀，并且總共也只有2幀，所以既可以選擇默認(rèn)的“下一幀”，也可以選擇“最后一幀”。要添加的幀數(shù)就是指過渡過程所將占用的幀數(shù)，這里設(shè)為5，那么加上原來7幀，這個動畫總共就是7幀。 2.由于只有一個圖層(背景層未有變化)在參與動畫，所以現(xiàn)在圖層選

13、項中任何一個都是可以的。但不選擇背景層的話會形成成透明背景，有關(guān)動畫背景透明的問題我們會在以后學(xué)習(xí)到。注意右圖中紅色箭頭處的參數(shù)，其中有“位置”和“不透明度”這兩項。所謂參數(shù)就是指進行動畫過渡的圖層屬性，我們之前說過圖層的位置和不透明度的變化可以做成動畫，在這里就反映出來了。第21頁/共26頁四四.教學(xué)過程（過渡動畫）教學(xué)過程（過渡動畫） 3.確定后將會在動畫調(diào)板中看到的效果大致如下圖所示，可以很清楚地看到圓形的位置和不透明度都發(fā)生了均勻的過渡。如果之前在過渡設(shè)定中關(guān)閉了“位置”或“不透明度”參數(shù)，顯然就沒有現(xiàn)在的效果了。 4.這種利用過渡方式制作動畫的方法較為簡便，我們只需要考慮某段動畫的開始和結(jié)束的樣子就可以了，中間的過程會自動完成。在這種情況下，開始和結(jié)束的那兩幀被稱之為關(guān)鍵幀(KeyFrame)，因為它們決定了過渡的形態(tài)。以后我們也會接觸到有多個關(guān)鍵幀的動畫。第22頁/共26頁四四.教學(xué)過程（設(shè)計創(chuàng)意思考）教學(xué)過程（設(shè)計創(chuàng)意思考）第23頁/共26頁四四.教學(xué)過程（設(shè)計創(chuàng)意思考）教學(xué)過程（設(shè)計創(chuàng)意思考）第24頁/共26頁 受限于Photoshop主要是做圖