鼠繪皮卡丘
第二章 讓皮卡丘動起來
【概要】：
本堂課的內(nèi)容主要是帶領大家學習如何用PS設計一個簡單的皮卡丘動畫。
【內(nèi)容框架】：
1.PS動畫介紹
2.讓皮卡丘動起來并輸出為表情
【使用軟件】PS
【設計難度】：★★☆☆☆
【講師】：承輝學院謝志瑤
【最終效果圖】：
1小節(jié):ps動畫介紹
在學習動畫制作之前,我們需要先熟悉在ps里制作動畫的一個功能——時間軸。在“窗 口”里面勾選“時間軸”,這時這個窗口就會出現(xiàn)了。
時間軸窗口
也可以選擇默認工作區(qū)——動感,動感工作區(qū)是ps里自帶的制作動畫時比較方便的工 作區(qū)的排布。
時間軸窗口出現(xiàn)后,我們就可以開始制作動畫了,點擊“創(chuàng)建幀動畫”
時間軸就會開啟幀動畫模式，如圖所示
如果點擊左下角的按鈕可以切換到時間軸模式。 時間軸模式我們可以看做簡單版的AE,可以制作復雜點的動畫,幀動畫模式就比較簡 單一些。我們這節(jié)課主要用的就是幀動畫模式制作,之后的課程會講到時間軸模式的 制作,點擊可以再切換回來。
我們可以看到幀動畫模式，默認狀態(tài)是只有一幀的，幀是什么意思呢，我們制作動畫都是以幀為單位的，可以把每一幀看做一個靜態(tài)圖片，比如說我們看一個動畫片，是1秒20幀，那么就可以說這個動畫每1秒鐘是由20張圖片組成。
最標準的動畫是一秒24幀，早期技術沒那么發(fā)達的時候，制作動畫就需要一秒鐘畫24張畫，比如迪斯尼啊，皮克斯這些比較知名的動畫公司，他們的動畫都是這個幀速率，所以我們的觀看體驗都會覺得非常好，非常流暢。因為據(jù)科學研究證明人的眼睛一秒鐘之內(nèi)能最多能捕捉24張圖片組成的影像，所以在這個幀速率下人眼觀看是最流暢合理的。但是我們制作簡單的GIF動畫的話，一般幾幀就可以了。
默認幀動畫模式只有一幀，一幀當然是不可能組成動畫的，那我們?yōu)榱四茏屗軇悠饋?，需要添加新的幀?shù)。
點擊新建按鈕新建動畫幀，可以看到窗口就隨之多了幀數(shù)。
將動畫幀拖到垃圾桶上可以進行刪除。
下面我們新建幾個不同顏色的圖片嘗試一下動畫制作。
動畫幀和圖層里的圖層相對應，這些動畫幀也可以拖拽移動位置。
這時按播放按鈕就可以播放了，形成了一個小動畫，也可以點擊停止。播放按鈕的快捷鍵是空格鍵。
播放按鈕旁邊的按鈕從左到右分別是選擇第一幀，選擇上一幀和選擇下一幀。
如果發(fā)現(xiàn)動畫播放過快或者過慢的話，可以點擊秒數(shù)改變每幀的播放時間。也可以按住shift鍵選擇多個幀數(shù)一起改變。點擊“其他”可以輸入任意想要秒數(shù)。
播放時一般默認狀態(tài)是僅播放一次，我們可以把它調(diào)節(jié)成“永遠”，循環(huán)播放模式來看效果。
一些拷貝單幀，粘貼單幀，和刪除幀等操作可以在窗口右側的三角按鈕里找到，大家可以試下這些操作。如果對制作的動畫不滿意，也可以選擇刪除動畫。
這樣我們幀動畫模式下制作動畫的基本操作我們已經(jīng)掌握了。
接下來看下如何輸出GIF動圖，在“文件”里選擇“存儲為web所用格式” 快捷鍵:mac電腦是com+option+shift+s，PC電腦是ctrl+alt+shift+s。選擇GIF模式，顏色選擇最大顏色識別個數(shù)256，是清晰度最高的，之后進行存儲。
2小節(jié):讓皮卡丘動起來并輸出為表情
學完ps里動畫制作的基本原理和工具后,我們就可以開始做一個QQ的彈跳感的皮卡 丘了,這里我們用4幀組成一個GIF動畫,可以到達一個基本流暢的感覺,當然也可以增加幀數(shù),制作更加流暢有難度的效果。 制作原理雖然我們已經(jīng)明白了,但是一個流暢真實的動畫其實是基于力學的原理存在 的。一個動作的完成是由預備——進行——緩沖組成的。拿人跑步為例子,跑步的時 候,我們一般擺好姿勢,進行的下一個動作不是直接沖出去,而是身體會有一個膝蓋下壓或者身體下傾的預備動作,這個時間會非常短暫,再向前彈出去,停止的時候, 也會有一個緩沖,緩沖也是非常短暫的一個效果,而且根據(jù)物體的質(zhì)量或者物體的速度不同都會有不同的變化,如果大家都有學過物理的話應該不難理解,所有的生物和非生物都是遵循這個理論而存在的,所以我們想要制造真實的動畫效果,模擬真實的 動畫原理,就一定不能脫離開力學的基本作用。
但是我們做動畫的時候一般都會夸張化和戲劇化一些，就像《貓和老鼠》動畫片，就有很多超出常識的夸張手法的表現(xiàn)，這也是動畫的魅力所在。
我們做的簡單小GIF也是在遵循基本動畫原理上來做的,我們這次的案例是做一個Q彈感比較強烈的皮卡丘,類似一個橡皮球原地彈跳,那我們就可以想象一下橡皮球彈跳的質(zhì)感,先彈上去然后再收縮回來,這樣一個簡單的動作。(下圖為小球彈跳參考)
因為我們做的是簡單的原地彈跳，所以動作很簡單。接下來就可以進行嘗試了，因為我們之前做皮卡丘的時候分好了骨骼，做動畫的時候會方便很多。
這里我們需要4幀動畫幀,分別為默認姿勢——向上拉伸——回歸——向下壓縮四個動 作。
為了方便調(diào)整骨骼,整理好圖層,命名好名字,復制出另外三個組。
調(diào)整組合圖層分別調(diào)出四個狀態(tài),因為默認和回歸兩個的狀態(tài)類似,所以直接拷貝就可 以。調(diào)整的時候要注意由于力的作用,向上拉伸的時候整個身體會由于拉長而變瘦,向下壓縮的時候身體會向兩邊拓寬,想要夸張化的效果就可以再夸大化,使力的作用更明顯。耳朵、尾 巴和眼睛也都會跟隨變化,這樣動起來才更生動真實。如果要達到更真實的效果,還可以增加 幀數(shù)調(diào)的更細微。
要注意的是這些組在ps里是相互疊加的狀態(tài),是為了保證皮卡丘彈跳的時候不錯位,保證重心和位置不變。
接下來時間軸窗口的動畫幀就和圖層相對應起來，調(diào)整合適的秒數(shù)幀速率
播放看看效果,如果效果不滿意可以繼續(xù)調(diào)整,調(diào)整完畢就可以按照我們1小節(jié)教的GIF的輸出方法輸出動圖了。
這樣一個GIF動畫就完成了,我們也可以用這樣的方法制作簡單的小表情用在一些聊天軟件上。接下來同學們就來制作屬于自己的小動畫吧~(′?ω?`)ノ
敬請期待系列課程：
第三章 創(chuàng)意皮卡丘 讓他適用于UI的各個部分
為了方便大家保存，所以再放松下專題頁長圖：
