ps cc結(jié)合AE做一個(gè)時(shí)鐘動(dòng)態(tài)圖(6)

1、使用軟件：Adobe Photoshop、Adobe After Effect

版本：當(dāng)然是越新越好，推薦CC。注意Windows下只有64位系統(tǒng)才能安裝AE CC，如果你是32位系統(tǒng)只能用CS4版本了。

以下以Windows版AE CC、PS CC作為例子，其他版本大同小異，用MAC的同學(xué)自己轉(zhuǎn)換一下快捷鍵哈~

由于我習(xí)慣用英文版AE，大家可能用中文版比較多，我盡量都照顧。中文翻譯以AE CC官方中文版為準(zhǔn)。

2、關(guān)于GIF動(dòng)圖

GIF會(huì)動(dòng)，是因?yàn)樗怯珊芏鄦螐埖膱D片打包在一起播放，因而體積會(huì)很大，動(dòng)輒好幾兆，要發(fā)網(wǎng)上播放容易卡殼兒影響效果。當(dāng)然適當(dāng)?shù)膬?yōu)化可以減小體積，更重要的是在做之前要心里有個(gè)數(shù)，在保證效果的前提下盡量避免會(huì)造成臃腫的情況。

那么什么參數(shù)會(huì)影響GIF圖的體積呢？

①尺寸②動(dòng)畫(huà)時(shí)長(zhǎng)③幀率④顏色數(shù)

尺寸、動(dòng)畫(huà)時(shí)長(zhǎng)很容易理解；

幀率說(shuō)的是每秒播放多少?gòu)垐D，幀數(shù)越大動(dòng)畫(huà)越流暢，代價(jià)就是體積變大，一般超過(guò)超過(guò)30就沒(méi)意義了；

顏色數(shù)是很多人忽略也很重要的一個(gè)關(guān)鍵影響因素，顏色數(shù)越少體積越小，同時(shí)畫(huà)質(zhì)越差，但是很多動(dòng)畫(huà)本身就沒(méi)用幾種顏色，這里頭的壓縮空間就很可觀了，所以那種有復(fù)雜寫(xiě)實(shí)背景的GIF通常要么體積巨大要么畫(huà)質(zhì)很渣。

尺寸我建議用dribbble的400x300像素，長(zhǎng)度控制在10秒內(nèi)，幀率25，顏色數(shù)根據(jù)動(dòng)畫(huà)的不同盡量用128以下的吧。

3、“動(dòng)”之前的準(zhǔn)備

除非已經(jīng)很熟練了，不然那種一拍腦子就想三下五除二做一個(gè)好看的動(dòng)圖出來(lái)的行為常常事倍功半甚至一事無(wú)成。這里我強(qiáng)烈建議大家拿出筆和紙，畫(huà)一畫(huà)分解圖，理清一下思路。分鏡圖不是什么高深的東西，只要能把關(guān)鍵的幾個(gè)畫(huà)面簡(jiǎn)單畫(huà)出來(lái)，簡(jiǎn)單描述素材怎么運(yùn)動(dòng)就好，關(guān)鍵是自己邊做的時(shí)候不會(huì)忘了要做啥，提高效率。下圖就是第一次分享時(shí)一位學(xué)員畫(huà)的分鏡草圖，一個(gè)很簡(jiǎn)單的天氣圖標(biāo)動(dòng)畫(huà)，她用一個(gè)下午的時(shí)間就完成了自己的GIF處女作。

成品：

然后就是在PS里畫(huà)了，大家都是玩UI的應(yīng)該都很熟悉了。這里要注意的是要根據(jù)之前分鏡設(shè)計(jì)的動(dòng)作把素材分離好，分組、圖層命名越清晰越好（或者你自己能記住哪個(gè)圖層是什么東西也行），圖層樣式保留著別柵格化了，最后存儲(chǔ)成PSD文件。

4、將PSD文件導(dǎo)入AE

終于要到AE了�。�！激動(dòng)了有木有！�。∠葎e急，導(dǎo)入PSD文件這一步很重要，很多新手卡在這兒了。

啟動(dòng)AE，文件→導(dǎo)入→文件，或者直接快捷鍵CTRL+I，選擇要導(dǎo)入的PSD文件：

注意了，先別急著按導(dǎo)入，在“導(dǎo)入為（Import As）”下拉菜單選擇“合成 - 保持圖層大�。–omposition - Retine Layer Sizes）”，再按導(dǎo)入，這樣就能保持圖層的獨(dú)立性了。

另外兩個(gè)選項(xiàng)，F(xiàn)ootage（素材）就是將這個(gè)PSD當(dāng)成一張圖導(dǎo)入，而Composition（合成）則和我們的選擇很像只不過(guò)導(dǎo)入的每一張圖層都是等同畫(huà)布大小，中心點(diǎn)也是一樣的。

然后AE會(huì)問(wèn)你是否保留圖層樣式（Editable Layer Styles），當(dāng)然留著了！

點(diǎn)確定，然后就在項(xiàng)目列表里看到了我們的合成（Composition），以后我們就要在這個(gè)合成里完成各種酷炫狂拽吊炸天的動(dòng)畫(huà)了——不過(guò)在此之前我們還得設(shè)置好才行。在合成上右鍵→合成設(shè)置(Composition Settings)

長(zhǎng)寬都自動(dòng)繼承了PSD文件畫(huà)布的設(shè)置，像素長(zhǎng)寬比（Pixel Aspect Ratio）選方形像素（Square Pixel），幀率（Frame Rate）設(shè)為25，時(shí)長(zhǎng)（Duration）設(shè)為10秒，其他默認(rèn)就好了，然后點(diǎn)確定。

合成設(shè)置也可以在這里找到：

然后就開(kāi)始我們的動(dòng)畫(huà)之旅吧！別忘了存盤(pán)哦（Ctrl+S）！

5、在AE里制作動(dòng)畫(huà)

將PSD文件正確導(dǎo)入AE之后，我們就可以開(kāi)始動(dòng)畫(huà)的制作了，介于本篇教程是基礎(chǔ)篇，具體的動(dòng)畫(huà)內(nèi)容、技巧等不作太多贅述，計(jì)劃在以后的教程里做展開(kāi)。這里只聊聊AE的基本操作。

首先我們看下AE的界面：

雙擊打開(kāi)PSD文件同名的合成（例：未標(biāo)題-1）

項(xiàng)目面板——所有素材、合成都在這里哦。

這個(gè)面板顯示打開(kāi)的合成里的各個(gè)層，注意到在PS里分好的組是以合成的形式存在的，雙擊之可進(jìn)入“組1”、“組2”。

預(yù)覽面板，可以看懂我們的小圖圖了連參考線也能導(dǎo)入哦。其實(shí)AE可以把PS里的路徑、圖層樣式、參考線、分組統(tǒng)統(tǒng)導(dǎo)進(jìn)來(lái)，果然是Adobe自家兄弟！

時(shí)間軸，大概是UI設(shè)計(jì)師們比較陌生的東西了，別怕，西西帶你玩轉(zhuǎn)它！

萬(wàn)事開(kāi)頭難，下面我們先來(lái)做個(gè)最簡(jiǎn)單的動(dòng)畫(huà)，本例是一個(gè)鐘，那就讓指針轉(zhuǎn)一圈。把時(shí)間軸上的指針移到0秒，找到指針?biāo)趫D層（組4），點(diǎn)開(kāi)小三角，點(diǎn)Transform->Rotation（變換->旋轉(zhuǎn)）旁邊的小秒表，這樣我們就在0秒處添加了一個(gè)關(guān)鍵幀，如圖：

然后將指針移到10秒處，將旋轉(zhuǎn)數(shù)值設(shè)為360°（會(huì)自動(dòng)變成1x+0.0°），意思是轉(zhuǎn)了一圈。好，按下空格播放可以看到旋轉(zhuǎn)的效果。

如何做炫目的效果不是本篇教程的目的，成功動(dòng)起來(lái)了咱就翻篇吧~

再次提醒：一定要記得隨時(shí)存盤(pán)！

6、輸出動(dòng)畫(huà)，生成GIF

動(dòng)畫(huà)做再屌，輸不出來(lái)也白搭。AE雖然是專(zhuān)業(yè)影視動(dòng)畫(huà)軟件，但它的輸出選項(xiàng)其實(shí)少的可憐（當(dāng)然配合自家的MediaEncoder能輸出更多格式，不過(guò)這不在本教程討論范圍了），反正是沒(méi)有GIF直接輸出的選項(xiàng)了，我們只能曲線救國(guó)。

方法一：輸出視頻轉(zhuǎn)GIF

確保我們的“未標(biāo)題-1”合成處在被選中狀態(tài)（邊框變黃色），

被選中 未選中

按下快捷鍵Ctrl+M，合成就被加入到渲染隊(duì)列（Render Queue）了。

“渲染（Render）”就是把動(dòng)畫(huà)生成動(dòng)畫(huà)文件的過(guò)程，下面我們來(lái)做些設(shè)置：?jiǎn)螕裟莻�(gè)Lossless（無(wú)損）那個(gè)黃字（不是小三角哦）。

彈出的對(duì)話框格式（Format）里選Quicktime：

點(diǎn)開(kāi)旁邊的格式選項(xiàng)（Format Option），視頻編碼（Video Codec）選

擇PNG，質(zhì)量（Quality）選100，這樣就能幾乎畫(huà)質(zhì)無(wú)損地輸出。

如果找不到Quicktime選項(xiàng)請(qǐng)先安裝Quicktime，蘋(píng)果官網(wǎng)上可以找到 http://www.apple.com/quicktime/

好，其他選項(xiàng)保持默認(rèn)，點(diǎn)兩次確定之后回到渲染隊(duì)列，點(diǎn)擊輸出到（Output to）小黃字（不是小三角哦），設(shè)置生成的文件路徑以及文件名，這里我還是保持默認(rèn)的“未標(biāo)題-1.mov”吧，然后別忘了點(diǎn)渲染（Render）按鈕，等進(jìn)度條跑完后，我們又要回熟悉的PS了~

將我們生成的“未標(biāo)題-1.mov”直接拖進(jìn)PS，會(huì)看到多了一個(gè)時(shí)間軸，

其實(shí)PS是可以簡(jiǎn)單制作視頻的，不過(guò)我也不太會(huì)用，有時(shí)間再研究研究。好，現(xiàn)在點(diǎn)擊文件→存儲(chǔ)為web所用格式：

終于到最后一步了，這里有很多的優(yōu)化選項(xiàng)，說(shuō)實(shí)話我也沒(méi)研究透。左下角能看到輸出的大概大�。ū緢D是381.1k），右下角可以播放查看動(dòng)畫(huà)，注意這里有個(gè)循環(huán)選項(xiàng)記得把“一次”改為“永遠(yuǎn)”不然它就只播放一次就停了。

右上的這些參數(shù)才是優(yōu)化的重點(diǎn)，大家可以自己調(diào)整試試看什么參數(shù)能調(diào)的又小又不失真，最后點(diǎn)“存儲(chǔ)為”輸出，就大功告成了！

這種方法的好處是生成文件少，直觀方便管理，且中間生成的視頻文件也可作為展示資料用。

方法二：輸出圖像序列（ 序列幀）

有時(shí)候因?yàn)橐恍┰駻E輸出視頻失敗或者PS無(wú)法導(dǎo)入，這時(shí)就可以試試圖像序列。

在AE里，渲染設(shè)置的時(shí)候選擇PNG 序列（PNG Sequence）

然后輸出路徑指定一個(gè)文件夾存放輸出的圖像序列，這樣點(diǎn)渲染后就會(huì)生成一組帶序號(hào)的PNG文件。

然后打開(kāi)PS，如果是PS CC及以上版本，直接可以文件 -> 打開(kāi) ，然后選中圖像序列其中的一張圖，勾上“圖像序列”選項(xiàng)

然后幀率選25

之后的步驟參照方法一就行。

如果你的PS是CC以前的版本就稍微有點(diǎn)繁瑣了，主要是導(dǎo)入序列幀比較麻煩。打開(kāi)PS，文件 -> 腳本->將文件載入堆棧

彈出的面板選擇 瀏覽

然后選中所有序列幀

然后就耐心等待圖像載入到PS圖層里（如果你的圖像序列很多，會(huì)載入相當(dāng)長(zhǎng)一段時(shí)間）

點(diǎn)擊 創(chuàng)建幀動(dòng)畫(huà)，時(shí)間軸變成這樣（有時(shí)候載入圖層后你的時(shí)間軸直接是下圖這樣，就不用點(diǎn)創(chuàng)建幀動(dòng)畫(huà)那一步驟）：

然后點(diǎn)擊時(shí)間軸右上角的選項(xiàng)菜單，選擇 從圖層建立幀：

這樣終于把動(dòng)畫(huà)導(dǎo)進(jìn)來(lái)了，可以先點(diǎn)下面的播放按鈕播放一下，看看播放順序是否正確

如果發(fā)現(xiàn)反了（多數(shù)情況如此），點(diǎn)擊剛才的小菜單，選擇 反向幀 來(lái)修正：

然后，選擇時(shí)間軸上的所有幀，點(diǎn)擊下面的“0秒”，在彈出來(lái)的菜單選擇 其他時(shí)間 ，用以設(shè)置每幀存在時(shí)間：

彈出來(lái)的面板輸入0.04，這個(gè)值是根據(jù)我們動(dòng)畫(huà)設(shè)置的25幀/秒來(lái)計(jì)算的（大家想想如果動(dòng)畫(huà)設(shè)置了30幀/秒或者其他值這里該填多少？），

確定之后的步驟和之前相同了，點(diǎn)擊文件→存儲(chǔ)為web所用格式：

如果有問(wèn)題或者建議，歡迎討論！