比阿里犸良还强大！Lottie动效设计完全指南（导入篇）

上篇文章《比里犸良还强大！Lottie 动效设计完全指南（基础篇）》已经系统地为大家讲解了 Lottie 动效的基本知识，相多同学都跃跃欲了。而在使用 AE 制作动效的过程中，往往会遇多问题，第一个大问题就是动效素材的导入。本文将以一个实际动效案例的导入流程为例，帮助大家了解高效导入计文件的方法。

以上为本次演示的动效案例。导入文件之前首先要析操作对象的点，有哪些部是要做动效的，哪些部是静止的。需要运动的图层或组要独开，保持静止的图层可以并。如果涉及对称结构，可以在 AE 中只做一边，预成以后使用翻转即可。

从PS导入AE

将效件整好就可导入 AE 了，当我们将 psd 件拖入 AE 中会有个示项：

1. 素材

我们已经导入了 psd 文件，需要从原 psd 补充素材时候可以选择此选项，是能选择个图层或者将所有图层合并为个图层导入。优是能让图层保持在 ps 位，缺是有多个图层需要添加时需要多导入。

2. 合成

选择此选项，所有图层都会按照画板大小导入，所以会导致很多图层有透明区域。优是于可以复用元素（如小鸡仔翅膀）可以采用翻转快速复制，需移动即可变化到称位。缺是会增大文件尺寸。使用 Lottie 输出动效时不议此，会增加资。

3. 合成-保持图层大小

选择此项，优是图层会裁切掉所有透明区域，能够保证文件尺寸最小。缺是翻转以后需要过位移才能让图层和称元素保持相位。可以过先立预合成，再键翻转，避免移动操作。使用 Lottie 制作动效时，荐采用此。

从AI导入AE

从 AI 中导 AE 相对要烦一。首先我们需要将 AI 文件导 AE 中，选中 AI 图，「右键-创建-从矢量图创建形状」。AI 文件就转换为以在 AE 中编辑的矢量图形，但是果我们直接将 AI 文件直接拖 AE 中，样导致所有形状在一个图里，下图所示。

在AI中拆分图层

所以我们需导入 AE 之，先将 AI 文件拆分多图层。

首先还 PS 一样将各部分按照需行拆分，先不用命。然后选中方图层，选择「选项卡单-释到图层（顺序）」，再选中除方图层外的所图层，按住鼠标并下拉。这样所的图层就拆分了。后再删除掉方空图层即可。

完成以上步骤对拆分开的图进行命名。之所以没有让大家一开始就命名，是因为操的程中现，释放图以命名的图名就改变。

使用插件在AE中拆分图层

刚才提到的，导的 AI 文件不分，其以通 Explode Shape Layers 插件决。只需在 AE 中安装即决我们导 AI 文件程中的问题。

1. 形状一键拆分

通过该插件可以一键将 AI 图层转换矢形状，相对于「右键-创建-从矢图层创建形状」加简单高效。转化矢形状后，点击第一按钮，即可将图层拆分单形状。

2. 形状一键组

使用一键拆功能会将图层拆成一个一个图形，但是多候不需要拆的那细。比如案例中的仔，有的部是不动的，希望把它并成一个图层。这个候点击第二个按钮即可一键组形状。

3. 删除空图层

有时候拆分 AI 图层后会现空图层，此时择第个按钮即可中这些图层，于删除。

4. 量择修改填充/描边属性

使最后两个功可快速中形状层并快速修改属性，。

AE与AI无缝衔接

上说的方法都是单纯的在 AI 或者 AE 中处素材的方法，但是我们实际工作中，经会需要增或者调整素材。最后介绍一款大杀器，可无缝衔接 AI 与 AE ，仅可将 AI 中的元素一键导入到 AE 中，还可将 AE 中的件导入 AI。

Overlord 具有全面而强大的，够满足我们导入件的各种需要：

• 导出所选内容：AI导出到AE，或者AE导出到AI；
• 导入容：AI/AE中容后，在AE/AI中择导入，即可导入容；
• 导出选项：层导入所选素、记录形状数据、保持中心点在形状中心，默认是在成的中心、导出内容画布中心，默认是保持位置；
• 速切换 AE/AI 窗口；
• 在 AI 中新建一个与 AE 合成相同尺寸的画；
• 导入色板到 AE （需配合 Ray Dynamic color2 插件）；
• 将参考线导入 AE。

常使用程中我们只需在导出选项中，选择分导所选元素，即快速将所选内容快速原位复到 AE 合成中（需要 AI 画与 AE 合成大小相同）。

我们需要将几个部分导出为个图层时，需关闭分层导出，再将几个元素选以后，击导出即可。

综合对上几种方式，Overlord 对我们日导入和编辑素材来说更方快捷，当然同的方式有同的应场景。大按需使。

Sketch和Figma导入AE

目前越来越多的设计师通过 Sketch 和 Figma 来设计件了。Google 团队开发了一款插件 AEUX，可这两个软件和 AE 无缝打通。详情可阅读：《谷歌设计团队发布了一款效神器， 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

该脚本将会现在 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

上路径最后面件夹如果没有就自己手创建。打开 AE，在拓展里打开脚本随输入注册码。打开 AI，在拓展里打开脚本，开始使，这个脚本需要在 AI 打开配合使。

使用 AE 过程中的文件导入，就讲解这。下一篇将带大家了解使用 AE 导出 Lottie 文件需要注的问题，欢迎持续关注。

欢迎关注作者的微信公众：「懿凡设计」