动态图片怎么制作 html,AE教程:怎么制作出GIF动态图

今天给大家分享一下如何用AE配合AI &PS进行简单的gif动效制作。步骤1

新建AI

打开 AI, 文档类型选择 Video and File, AI 画布会自动帮助创建文字安全线，便于后期导入 AE 中。

步骤2

绘制LOGO

新图层，图形工具画圆1，描边，填充 border: 6px; color: #fff;

新图层，复制圆1，缩小，改 border:2px;

新图层，钢笔工具描绘左侧弯形直线，填充 color: #fff，复制，旋转，剪切到另一个新图层生成右侧弯形曲线。

新图层，直线工具生成中间横线，color: #fff; border: 2px;

新图层，输入 SURF, 调整字体设置，使其大小适中

新图层，复制 SURF，内容改成 ZONG

需要注意的是，每一个需要运动的元素都需要创建在单独的图层上。因为 AE 支持直接导入 AI 文件，同时会将 AI 每一个图层对应生成

步骤3

导入AI

打开 AE, 将 AI 导入[import as component]，生成新的 Component.

双击 Component

双击 Component, 即可看到每个图层，下面可以开始正式制作动画了。

步骤4

创建关键帧

根据自己想要的动画效果，创建关键帧，并设置对应属性。每一个单独的图层好比一个跳跃的小动物，黑色画布好比美丽的草原。而你就好比大自然的神，让每个小动物在特定的时刻以某种方式出现在大自然的某个地方。

主要动效过程：

大圆先从 scale: 5% 到 scale: 100%;

0.2s 后，小圆再从 scale: 5% 到 scale: 100%;

1.5s，左右竖线渐变出现，opacity: 0% – 100%

1.3s，当竖线快完全出现时，渐变中间的横线，opacity: 0% – 100%

1.5s – 2.5s, 改变左右竖线的 position, 同时改变中间横线的 scale, 形成拉伸开来的效果

2.5s – 3.5s, 利用 Alpha matte 功能制作文字上浮功能

3.5s – 6s，利用 Null object 群组所有元素，设置旋转效果

效果基本完成啦。

步骤5

设置动效

但动画效果都是线性的，看起来没有什么动感。这时候需要点击 Graph Editor 按钮，去调节动画曲线。但让也可以快捷设置 Ease in || Ease out || Ease Ease, 按照你想象中的方式设置它。曲线越缓，动效渐变越快，反之亦然，多设置几次就会找到你喜欢的模式。

步骤6

渲染导出

渲染导出，导出格式选择如下。

导出为PNG

点击 Output Module，将导出 Format 设置为 PNG Sequence. 这样 AE 便会将所有图片帧按 Sequence 保存到指定地址。

步骤7

图片导入PS

打开PS, Open 保存图片的文件夹，选择第一张图片，导入时记得勾选 Image Sequence checkbox.

步骤8

存储为WEB

存储为 WEB，格式选择为 gif 即可。

关注疯狂的美工官网 每天分享不同电商资讯！