使用AE导出高质量的gif的三种方式

一、AME直接导出(操作最简单)

适用于快捷预览,导出的gif比较清晰,但无透明背景,而且导出的文件过大,无法直接用于开发,适合快速预览使用。

方法:

安装Adobe Media Encoder;

在AE中Ctrl+Alt+M加载AME,将格式选择为gif并导出。


使用AE导出高质量的gif的三种方式_第1张图片
用AME可直接导出gif

二、Png序列(推荐)

操作复杂,但输出质量和文件大小适中,且能导出透明图层,可直接用作开发,推荐使用此种方式。

方法:

1.导出png序列图

在AE中Ctrl+M打开渲染队列,点“输出模块”打开设置,将“格式”改为[Png序列],“通道”改为“RGB+Alpha”,设置完成后点击“渲染”,得到一套完整的png序列图


使用AE导出高质量的gif的三种方式_第2张图片
用AE导出序列图


2. 加载序列图

打开PS,点“文件-脚本-将文件载入堆栈”,浏览并选择全部序列图点击“确定”。


使用AE导出高质量的gif的三种方式_第3张图片
在PS中加载序列图


使用AE导出高质量的gif的三种方式_第4张图片
选择全部序列图

3.创建时间轴

待所有序列图加载完成后,打开窗口-时间轴,点“创建时间轴”。


使用AE导出高质量的gif的三种方式_第5张图片
创建时间轴


4.设置时间轴速率

点击时间轴右上角展开菜单,选择“设置时间轴帧速率”,将帧速率和AE合成的速率保持一致(在ae中Ctrl+K打开合成设置可查看帧速率)


使用AE导出高质量的gif的三种方式_第6张图片
设置时间轴帧速率


5.选择“转换帧-从剪辑建立帧”


使用AE导出高质量的gif的三种方式_第7张图片
建立帧

6.点击时间轴左下角,生成帧动画


使用AE导出高质量的gif的三种方式_第8张图片
生成帧动画

7.修改动画顺序

此时动画是倒放,所以点击右上角展开菜单,点击“选择全部帧”,然后点击“反向帧”,将动画正序。

使用AE导出高质量的gif的三种方式_第9张图片
将动画正序

ps.通常会有一时间较长的多余帧,将多余帧删除即可

删除多余帧

8.导出动画

此时动图已设置好,Ctrl+shift+alt+s导出为web所用格式,将杂边颜色修改为图案所应用的界面的背景图层一致或改成“无”,即可导出。


使用AE导出高质量的gif的三种方式_第10张图片
生成gif

三、视频转gif

操作比较简单,生成的图片质量和大小也可以直接用于开发,但是适合非透明动画,背景透明时质量不理想。


1.渲染视频

在AE中Ctrl+M渲染视频,选择“QuickTime”格式(渲染速度快),“RGB+Alpha”通道(能保留透明背景),得到一个带透明背景的视频文件


使用AE导出高质量的gif的三种方式_第11张图片
生成视频

2.在PS中导入视频

在PS中点击“文件-导入-视频帧到图层”


使用AE导出高质量的gif的三种方式_第12张图片
导入视频

3.导出gif

Ctrl+shift+alt+s导出为web所用格式,将杂边颜色修改为图案所应用的界面的背景图层一致或改成“无”,即可导出。虽然打开杂边选项会产生白边,但是看起来更清晰


使用AE导出高质量的gif的三种方式_第13张图片
导出gif



以上三种方式能够应对工作中的大部分使用场景,可根据不同要求选择合适的输出方式,第二种方式虽然看起来复杂但是学会后操作起来是非常快的,而且生成的图片也最满意。当然,假如用于UI设计的话,让代码小哥哥使用代码还原简单的动画,得到的效果才是最好的,所以无论什么输出方式,都不比抱代码小哥哥的大腿管用啦。

你可能感兴趣的:(使用AE导出高质量的gif的三种方式)