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

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

2019/07/25 15622评论 7

上一篇文章《比阿里犸良还强大!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 文件时需要注意的问题,欢迎持续关注。

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

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/lottie-dynamic-design-guide-2

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 版式设计 界面设计 排版布局 职场 优设专访 设计师干货 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 AI教程 设计理论 设计流程 神器下载 字体下载 设计师专访 psd下载 设计规范 海报设计 设计趋势 用户体验设计 平面设计 动效设计 logo设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里