.

前言

这是第一次写文章教程，想把自己的方法分享出来，也是自己的一种提高，如果哪里不顺，还请多多包涵，留言指正。

当下UI设计师多多少少都会涉及到动效的制作，如交互动效，icon动效，运营类的微动效等，从设计制动效到交付开发的过程中，总有一个不起眼的环节占用我大量时间，这个环节就是将完成的动效导出gif（这里不考虑其他方式如Lottie导出的json），在自己查阅了大量资料，大量文章，咨询了很多人以及自己实践了n多次后，得到了很多种解决办法，在此，提炼了一些常用到，效果较好的方法分享出来，希望能够帮到遇到同样问题到朋友们。

一.使用插件Gifgun

这是我目前常用的方法之一

优点：

1导出gif快捷，效率高，可用于给其他人展示动效效果的场景

缺点：

1.导出的gif质量不算最高，会出现细微的卡帧，尤其在一个物体匀速运动的情况下表现尤为突出

2.较ps导出的gif，色差会稍大一些

在自己的使用过程中发现，目前还是17版的ae配合1.5版本的gifgun是最佳搭配，导出的gif体积偏小，画质不会出现毛刺，要求不是特别严格的情况下，可以交付开发使用。但18版和19版的ae，使用gifgun插件导出gif的画质多少都受到了影响，常出现毛刺现象，所占体积较17版导出的gif偏大。（这里先放文字描述，有时间了会放上这几版的对比效果）

附件会附上17版Ae和1.5版gifgun

下面是使用gifgun导出gif的过程步骤：

在Ae中做好动效后

点击 窗口

选择 gifgun

点击 生成GIF

这样就搞定了，这种是不是很方便。

二.使用Ae导出视频，再使用ps导出gif

这是目前我目前常用的方法之一

• 优点：

1.导出gif的质量比较高，gif动作流畅度高。

2.所占容量也较小

3.满足上面两个优点后，可直接交付于开发使用。

• 缺点：

1.从ae到ps到gif导出，过程步骤多，效率略低（如果熟练掌握，电脑性能好，不存在等待问题，效率低这个问题也就不算太大问题了）

2.导出的gif时长受限，时长也决定了gif的大小，这个需要综合考虑到ps软件和所用电脑到性能，一般导出gif在4s以内，超过4s的经常会出现“未知错误”，这个问题我也在线求答案。

3.对上面的两点的小补充，我个人电脑是2018版macpro笔记本（算是一般电脑了吧），每次将视频拖入到ps中时，要等待很长时间，选择了“导出web格式”后，也要响应很长时间页面才能激活，电脑性能好的这方面应该好些。

下面正式介绍操作过程：

在Ae中做好动效后导出视频

文件——导出——添加到渲染队列

在渲染队列里找到输出模块，选择要导出到视频格式

点击 无损

点击 格式选项

选择 Apple ProRes 422（我常用到格式）

点击 渲染

导出视频后，打开ps，建立自己所需大小到画板，然后直接用鼠标将视频拖拽到ps中

然后创建视频时间轴，步骤：

点击 窗口——时间轴——创建视频时间轴

ps里还可以为背景做装饰和点缀，正常编辑图层即可，下面是导出gif了

点击 文件——导出——存储为Web 所用格式

点击 存储 即可导出GIF（图像大小可调节导出GIF到宽高，同时也影响了gif到体积）

但

是

但是在开始说但缺点里有提到，gif导出会被时长限制，这里提供一个小技巧：给ps清理缓存，会一定程度缓解这个问题，尤其是gif恰好4s，但是在导出时出现了未知错误的情况下。

编辑——清理——全部/视频高速缓存

这样这个ae到gif到过程就完成了。

三，导出透明Gif

这种情况经常用在icon动效的情景中，常用方法两种

1.导出透明背景的视频，然后用ps导出gif（我常用这种）

2.导出透明背景的png序列，然后导出gif （不做细述）

下面展示第一种方法，也是我常用的方法：在Ae导出视频，选择视频格式的时候，先将“视频输出”的通道选择“Alpha”

然后再重复视频在ps里导出gif的过程即可。

四.导出gif中特定数量到关键帧图片

这种也常用在icon动效上，有的开发小哥是使用图片序列来实现动效，需要你先和开发沟通最多可用多少张图片，例如可以使用10张，则在ae中。。。

鼠标右键——合成设置

将帧速率改为 10 （想要导出图片的数量）

在导出时，将格式选择为“png序列”，确定，然后渲染即可

以上是我目前常用的方法，抛砖引玉，希望能有更好方法的大神能够留言分享。

Powered by Froala Editor