比阿里犸良还强大!Lottie动效设计完全指南(导入篇)

上一篇文章《比阿里犸良还强大!Lottie 动效设计完全指南(基础篇)》已经系统地为大家讲解了 Lottie 动效的基本知识,相信很多同学都跃跃欲试了。而在我们使用 AE 制作动效的过程中,往往会遇到很多问题,第一个大问题就是动效素材的导入。本文将以一个实际动效案例的导入流程为例,帮助大家了解高效导入设计文件的方法。

比阿里犸良还强大!Lottie动效设计完全指南(导入篇)

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

从PS导入AE

比阿里犸良还强大!Lottie动效设计完全指南(导入篇)

将动效文件整理好就可以导入 AE 了,当我们将 psd 文件拖入 AE 中会有三个提示选项:

比阿里犸良还强大!Lottie动效设计完全指南(导入篇)

1. 素材

当我们已经导入了 psd 文件,需要从原 psd 补充素材的时候可以选择此选项,但是每次只能选择一个图层或者将所有图层合并为一个图层导入。优点是能让图层保持在 ps 中的位置,缺点是当有多个图层需要添加时需要多次导入。

2. 合成

选择此选项,所有图层都会按照画板大小导入,所以会导致很多图层有透明区域。优点是对于可以复用的元素(如小鸡仔的翅膀)可以采用翻转的方式快速复制,无需移动即可变化到对称位置。缺点是会增大文件尺寸。使用 Lottie 输出动效时不建议此方式,会增加资源。

3. 合成-保持图层大小

选择此项,优点是图层会裁切掉所有的透明区域,能够保证文件尺寸最小。缺点是翻转以后需要通过位移才能让图层和对称元素保持相同位置。可以通过先建立预合成,再一键翻转的方式,避免移动操作。使用 Lottie 制作动效时,推荐采用此方式。

从AI导入AE

比阿里犸良还强大!Lottie动效设计完全指南(导入篇)

从 AI 中导入 AE 相对要麻烦一些。首先我们需要将 AI 文件导入 AE 中,选中 AI 图层,然后「右键-创建-从矢量图层创建形状」。AI 文件就转换为可以在 AE 中编辑的矢量图形,但是如果我们直接将 AI 文件直接拖入 AE 中,这样会导致所有形状都在一个图层里,如下图所示。

比阿里犸良还强大!Lottie动效设计完全指南(导入篇)

在AI中拆分图层

所以我们需要在导入 AE 之前,先将 AI 文件拆分成多个图层。

比阿里犸良还强大!Lottie动效设计完全指南(导入篇)

首先还是和 PS 一样将各部分按照需要进行拆分,先不用命名。然后选中最上方图层,选择「选项卡菜单-释放到图层(顺序)」,再选中除最上方图层外的所有图层,按住鼠标并下拉。这样所有的图层就拆分开了。最后再删除掉最上方空图层即可。

完成以上步骤再对拆分开的图层进行命名。之所以没有让大家一开始就命名,是因为操作的过程中发现,释放图层以后命名好的图层名就改变了。

使用插件在AE中拆分图层

刚才提到的,导入的 AI 文件不分层,其实可以通过 Explode Shape Layers 插件解决。只需在 AE 中安装即可解决我们导入 AI 文件过程中的问题。

比阿里犸良还强大!Lottie动效设计完全指南(导入篇)

1. 形状一键拆分

通过该插件可以一键将 AI 图层转换为矢量形状,相对于「右键-创建-从矢量图层创建形状」要更加简单高效。转化为矢量形状后,点击第一个按钮,即可将图层拆分为单个形状。

比阿里犸良还强大!Lottie动效设计完全指南(导入篇)

2. 形状一键组合

使用一键拆分功能会将图层拆分成一个一个图形,但是很多时候我们不需要拆分的那么细。比如案例中的小鸡仔,有的部分是不动的,我们希望把它合并成一个图层。这个时候点击第二个按钮即可一键组合形状。

比阿里犸良还强大!Lottie动效设计完全指南(导入篇)

3. 删除空图层

有时候拆分 AI 图层后会出现空图层,此时选择第四个按钮即可选中这些图层,便于删除。

4. 批量选择修改填充/描边属性

使用最后两个功能可以快速选中形状层并快速修改属性,不常用。

AE与AI无缝衔接

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

比阿里犸良还强大!Lottie动效设计完全指南(导入篇)

Overlord 具有全面而强大的,能够满足我们导入文件的各种需要:

  • 导出所选内容:AI导出到AE,或者AE导出到AI;
  • 导入所选内容:AI/AE选中内容后,在AE/AI中选择导入,即可导入所选内容;
  • 导出选项:分层导入所选元素、记录形状数据、保持中心点在形状中心,默认是在合成的中心、导出内容到画布中心,默认是保持原位置;
  • 快速切换 AE/AI 窗口;
  • 在 AI 中新建一个与 AE 合成相同尺寸的画布;
  • 导入色板到 AE 中(需配合 Ray Dynamic color2 插件);
  • 将参考线导入 AE。

比阿里犸良还强大!Lottie动效设计完全指南(导入篇)

日常使用过程中我们只需在导出选项中,选择分层导入所选元素,即可快速将所选内容快速原位复制到 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 文件时需要注意的问题,欢迎持续关注。

欢迎关注作者的微信公众号:「懿凡设计

比阿里犸良还强大!Lottie动效设计完全指南(导入篇)

收藏 424
点赞 22

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。