本教程是向大家介紹Photoshop結(jié)合AE制作超炫的GIF動畫圖片，教程很實用，介紹的非常詳細，需要學(xué)習(xí)者對這兩款軟件都比較熟悉。轉(zhuǎn)發(fā)過來，喜歡的朋友可以跟著一起來學(xué)習(xí)制作！

版本：當(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)。

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

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

GIF會動，是因為它是由很多單張的圖片打包在一起播放，因而體積會很大，動輒好幾兆，要發(fā)網(wǎng)上播放容易卡殼兒影響效果。當(dāng)然適當(dāng)?shù)膬?yōu)化可以減小體積，更重要的是在做之前要心里有個數(shù)，在保證效果的前提下盡量避免會造成臃腫的情況。

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

①尺寸②動畫時長③幀率④顏色數(shù)

尺寸、動畫時長很容易理解;

幀率說的是每秒播放多少張圖，幀數(shù)越大動畫越流暢，代價就是體積變大，一般超過超過30就沒意義了;

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

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

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

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

成品：

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

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

終于要到AE了!!!激動了有木有!!!先別急，導(dǎo)入PSD文件這一步很重要，很多新手卡在這兒了。

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

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

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

然后AE會問你是否保留圖層樣式(Editable Layer Styles)，當(dāng)然留著了!

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

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

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

然后就開始我們的動畫之旅吧!別忘了存盤哦(Ctrl+S)!

5、在AE里制作動畫

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

首先我們看下AE的界面：

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

項目面板——所有素材、合成都在這里哦。

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

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

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

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

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

如何做炫目的效果不是本篇教程的目的，成功動起來了咱就翻篇吧~

再次提醒：一定要記得隨時存盤!