上一篇文章《比阿里犸良還強大！Lottie 動效設計完全指南（基礎篇）》已經(jīng)系統(tǒng)地為大家講解了 Lottie 動效的基本知識，相信很多同學都躍躍欲試了。而在我們使用 AE 制作動效的過程中，往往會遇到很多問題，第一個大問題就是動效素材的導入。本文將以一個實際動效案例的導入流程為例，幫助大家了解高效導入設計文件的方法。

以上為本次演示的動效案例。導入文件之前我們首先要分析操作對象的特點，有哪些部分是要做動效的，哪些部分是靜止的。需要運動的圖層或組要單獨分開，保持靜止的圖層可以合并。如果涉及對稱結構，可以在 AE 中只做一邊，預合成以后使用翻轉即可。

從PS導入AE

將動效文件整理好就可以導入 AE 了，當我們將 psd 文件拖入 AE 中會有三個提示選項：

1. 素材

當我們已經(jīng)導入了 psd 文件，需要從原 psd 補充素材的時候可以選擇此選項，但是每次只能選擇一個圖層或者將所有圖層合并為一個圖層導入。優(yōu)點是能讓圖層保持在 ps 中的位置，缺點是當有多個圖層需要添加時需要多次導入。

2. 合成

選擇此選項，所有圖層都會按照畫板大小導入，所以會導致很多圖層有透明區(qū)域。優(yōu)點是對于可以復用的元素（如小雞仔的翅膀）可以采用翻轉的方式快速復制，無需移動即可變化到對稱位置。缺點是會增大文件尺寸。使用 Lottie 輸出動效時不建議此方式，會增加資源。

3. 合成-保持圖層大小

選擇此項，優(yōu)點是圖層會裁切掉所有的透明區(qū)域，能夠保證文件尺寸最小。缺點是翻轉以后需要通過位移才能讓圖層和對稱元素保持相同位置?？梢酝ㄟ^先建立預合成，再一鍵翻轉的方式，避免移動操作。使用 Lottie 制作動效時，推薦采用此方式。

從AI導入AE

從 AI 中導入 AE 相對要麻煩一些。首先我們需要將 AI 文件導入 AE 中，選中 AI 圖層，然后「右鍵-創(chuàng)建-從矢量圖層創(chuàng)建形狀」。AI 文件就轉換為可以在 AE 中編輯的矢量圖形，但是如果我們直接將 AI 文件直接拖入 AE 中，這樣會導致所有形狀都在一個圖層里，如下圖所示。

在AI中拆分圖層

所以我們需要在導入 AE 之前，先將 AI 文件拆分成多個圖層。

首先還是和 PS 一樣將各部分按照需要進行拆分，先不用命名。然后選中最上方圖層，選擇「選項卡菜單-釋放到圖層（順序）」，再選中除最上方圖層外的所有圖層，按住鼠標并下拉。這樣所有的圖層就拆分開了。最后再刪除掉最上方空圖層即可。

完成以上步驟再對拆分開的圖層進行命名。之所以沒有讓大家一開始就命名，是因為操作的過程中發(fā)現(xiàn)，釋放圖層以后命名好的圖層名就改變了。

使用插件在AE中拆分圖層

剛才提到的，導入的 AI 文件不分層，其實可以通過 Explode Shape Layers 插件解決。只需在 AE 中安裝即可解決我們導入 AI 文件過程中的問題。

1. 形狀一鍵拆分

通過該插件可以一鍵將 AI 圖層轉換為矢量形狀，相對于「右鍵-創(chuàng)建-從矢量圖層創(chuàng)建形狀」要更加簡單高效。轉化為矢量形狀后，點擊第一個按鈕，即可將圖層拆分為單個形狀。

2. 形狀一鍵組合

使用一鍵拆分功能會將圖層拆分成一個一個圖形，但是很多時候我們不需要拆分的那么細。比如案例中的小雞仔，有的部分是不動的，我們希望把它合并成一個圖層。這個時候點擊第二個按鈕即可一鍵組合形狀。

3. 刪除空圖層

有時候拆分 AI 圖層后會出現(xiàn)空圖層，此時選擇第四個按鈕即可選中這些圖層，便于刪除。

4. 批量選擇修改填充/描邊屬性

使用最后兩個功能可以快速選中形狀層并快速修改屬性，不常用。

AE與AI無縫銜接

以上說的方法都是單純的在 AI 或者 AE 中處理素材的方法，但是我們實際工作中，經(jīng)常會需要增加或者調整素材。最后介紹一款大殺器，可以無縫銜接 AI 與 AE ，不僅可以將 AI 中的元素一鍵導入到 AE 中，還可以將 AE 中的文件導入 AI。

Overlord 具有全面而強大的，能夠滿足我們導入文件的各種需要：

• 導出所選內容：AI導出到AE，或者AE導出到AI；
• 導入所選內容：AI/AE選中內容后，在AE/AI中選擇導入，即可導入所選內容；
• 導出選項：分層導入所選元素、記錄形狀數(shù)據(jù)、保持中心點在形狀中心，默認是在合成的中心、導出內容到畫布中心，默認是保持原位置；
• 快速切換 AE/AI 窗口；
• 在 AI 中新建一個與 AE 合成相同尺寸的畫布；
• 導入色板到 AE 中（需配合 Ray Dynamic color2 插件）；
• 將參考線導入 AE。

日常使用過程中我們只需在導出選項中，選擇分層導入所選元素，即可快速將所選內容快速原位復制到 AE 合成中（需要 AI 畫布與 AE 合成大小相同）。

當我們需要將幾個部分導出為一個圖層時，只需關閉分層導出，再將幾個元素選中以后，點擊導出即可。

綜合對比以上幾種方式，Overlord 對我們日常導入和編輯素材來說更加方便快捷，當然不同的方式也有不同的應用場景。大家按需使用。

Sketch和Figma導入AE

目前越來越多的設計師通過 Sketch 和 Figma 來設計文件了。Google 團隊開發(fā)了一款插件 AEUX，可以讓這兩個軟件和 AE 無縫打通。詳情可閱讀：《谷歌設計團隊發(fā)布了一款動效神器，讓 UI 和動效無縫打通！》

插件安裝

1. 插件下載

下載鏈接：https://pan.baidu.com/s/1CL9LO3gA17cSBBqaIZflJQ 提取碼：tmue

備用下載鏈接：https://share.weiyun.com/5895PQ8

2. Explode Shape Layers安裝說明

將「AE腳本」文件夾復制到相應 AE 目錄下即可，如下：

..Support Files/Scripts/ScriptUI Panels

該腳本將會出現(xiàn)在 AE 的「Window」菜單下。

2. Overlord安裝說明

將 overload 文件夾分別復制到：

• C:\Program Files（x86）\Common Files\Adobe\CEP\extensions
• C:\Users\用戶名\AppData\Roaming\Adobe\CEP\extensions
• C:\Users\用戶名\AppData\Roaming\BattleAxe

以上路徑最后面文件夾如果沒有就自己手動創(chuàng)建。打開 AE，在拓展里打開腳本隨便輸入注冊碼。打開 AI，在拓展里打開腳本，開始使用，這個腳本也需要在 AI 打開配合使用。

使用 AE 過程中的文件導入，就講解到這里。下一篇將帶大家了解使用 AE 導出 Lottie 文件時需要注意的問題，歡迎持續(xù)關注。

歡迎關注作者的微信公眾號：「懿凡設計」