工具

• After Effects CS6 or CC
• Photoshop CS6 or CC

設計流程

After Effects

在一個合成中創建轉場效果

另外一個合成中創建展示效果

導出

Photoshop
4. 優化GIF圖像

素材

倫敦背景圖一張

　　你未來會是一名專業的設計師嗎?60秒完成性格測試獲取免費學習資料：

　　http://www.silusheji.com/zhuanti/xinggeceshi/?zh-fxy

　　(如無法點擊，復制到瀏覽器打開即可，完成測試可獲得相關學習資料一份)

手機透視效果模板一張

一、基本構建

創建轉場效果合成

步驟1

打開AE，合成>新建合成(Cmd+N)，尺寸為640*1136，幀數29，持續6s

步驟2.

導入倫敦背景圖像，將圖像丟入合成1，調整背景圖像尺寸，使其適合畫布

步驟3

創建3個藍色框（用形狀圖層），這些藍色框將從屏幕上方下落到屏幕底部，寬度213、214、213px。三個方框上方的方框寬度640px,輸入相應文本。

步驟4

用鋼筆勾勒出云朵和6片雪花空心圓（勾勒的略水，見諒）

步驟5

保存一下

展示合成

步驟1

創建合成2

尺寸1280 x 720幀數29，時間6s

步驟 2. 導入iPhone背景,調整尺寸。

步驟3

把合成1拖到合成2里面，那么合成2里面應該是這樣：（p.s，我加了一層背景層）

步驟4.

選中合成1，效果>扭曲>邊角定位，讓合成1的4個角對上模板中屏幕的4個角。

-----------------------------------------------以上為基本構建部分-------------------------------------------------------------------

二、動效制作

下面，我們來分解一下動畫

1.3個藍色方框變長，不同時的落下

2.透明框從底部往上移動，自始至終寬度不變。

3.4個框抵達目的地后，文字開始出現，藍色框文字是比例擴大+從不透明變透明，透明框中得文字是從不透明變透明。

4. 云朵圖標，同時伴隨雪花。

5. Snowy文字出現。

形狀圖層中，可以控制的屬性有比例、位置、不透明度、描邊等等，本文的動效中，就充分利用了這些屬性隨時間的變化，打造出動畫效果。

處理過程

首先推薦2個腳本插件Ease and wizz和Repostion Anchor Point

一個方便做運動曲線，一個方便設置錨點位置。

三個藍色框

打開合成1，選中三個藍色框，設置如下

備注

1.最左面和最右面的藍色框錨點在上方（利用Anchor Point插件設置）

2.比例從0-100%

3.利用Ease and wizz選中關鍵幀，可以很方便的調節運動曲線。

透明框

透明框的運動，開始以很快的速度移動了大部分位移，后來速度減慢，緩緩移動到原位，設置如下

備注：Ease and Wizz中設置Quad+out 運動效果比較平滑。

底部文字

備注：

1.三個藍色框，當藍色框觸及到底部時，文字快速彈出，不透明度從0->100%,比例從0->100%

2.透明框中的文字隨透明框一起運動（位置設置可以參考透明框），但是，左側的文字先到，右側的-4度后到，注意時間軸中得設置。

云朵

當透明框的文本開始出現時，云朵出現，先是透明度從0-100%。

而比例開始時是60%，當透明度到了100%時，從60%->100%

雪花小圓點

當云朵動效完成后，雪花小圓點開始逐個出現。

備注：

1.注意小圓點會錯落的向右移動，然后彈回，注意運動順序的調節

2.此次也建議用Quad+Out

3.注意小圓點逐個出現，因此透明度的變化要在時間軸上依次設置。

Snowy文字效果

這里運用了蒙版運動，來打造Snowy文本逐漸出現的效果，注意Snowy不透明度也要變化（蒙版的不透明度變化是多余，請勿模仿）

效果：

原作者的做法：

效果：

結果：

----------------------------------------------------以上為動畫制作部分--------------------------------------------------------------

三、導出

方法1：AE+PS

1.保存后，AE中合成>添加到渲染隊列

完成設置后，點渲染

2.用PS打開渲染出來的.mov(文件>導入>視頻幀到圖層）

3.Cmd+Shift+S 或者 文件>儲存為Web可用格式

備注：

1.循環選項選擇永遠

2.圖像大小可以設置

3.注意選擇Gif格式

方法2：LiceCap

如果你不想用PS的話，可以先調節AE中畫布大小，再使用LiceCap這款錄屏為Gif的小軟件錄制，很方便，堪稱最好用的GIF錄制軟件。（有多平臺版本）

錄制效果：

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的ae 创建图像等高线 蒙版_如何用AE创建简单的UI动效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。