以后会陆续更新一些动效经验，教程，分享！欢迎交流～

前言

GIF格式的名称是Graphics Interchange Format的缩写，是在1987年由Compu Serve公司为了填补跨平台图像格式的空白而发展起来的。

GIF是一种位图。最初的GIF只是简单地用来存储单幅静止图像（称为GIF87a），后来随着技术发展，可以同时存储若干幅静止图象进而形成连续的动画，这样相较于静态的图片更具有表达力，且承载的内容也会更多一些，再加上它对PC，Mactiontosh和Android OS等多种平台都支持。所以使得GIF在整个互联网野蛮生长，也是设计师接触最多的动效格式了。

与此同时，GIF也很多的局限和不足，它不支持24bit彩色模式，最多存储256色。内存占比会比较大，会影响整个产品应用的性能，它属于有损压缩，导出动图有颗粒感、锯齿、半透明效果非常差，尤其是动效落地时透明的GIF有白边（完全不能忍）

一、AE+PS导出

1. 视频格式导出

这是设计师最常用的一种导出GIF的办法，需要AE输出MOV后，结合PS导出。正因为这样，它的操作会比较麻烦，输出GIF图的大小和质量一般。

步骤01：AE菜单栏文件 — 导出 — 添加到渲染队列 — 导出MOV视频格式

快捷键：WIN : Ctrl+M    MAC: Command+Shift+/

步骤02：导入MOV — 储存WEB所有格式 — 导出GIF

快捷键 :  WIN : Ctrl+Alt+Shift+s+S    MAC: Command+Option+Shift+S

2. 序列帧图层导出

同样的也是需要AE导出PNG序列帧图层后，结合PS导出，操作步骤依然很麻烦，但是输出的大小会比MOV输出的小一些，并且质量也会好一些

步骤01：AE菜单栏文件 — 导出 — 添加到渲染队列 — 选择PNG序列 （默认是QuickTime）

快捷键：WIN : Ctrl+M    MAC : Command+Shift+/ 

步骤02：PS菜单栏文件 — 打开 — 点选文件第一张（一定要勾上图层序列）— 储存WEB所有格式 —  导出GIF

快捷键 :  打开（WIN : Ctrl+O    MAC : Command+O）

快捷键 :  储存WEB所有格式 （WIN : Ctrl+Alt+Shift+s+S  MAC : Command+Option+Shift+S

3. 透明导出

在前两者导出的方法中，只需要选择通道为RGB + Alpha（默认是RGB）就可以导出透明的GIF图，但是GIF图会有白边，这个没办法解决。

二、AE+Media Encoder导出

Media Encoder需要单独安装，安装完成后可以无缝连接AE。相当于导出可以直接通过AE就能完成，操作也相对比较简单。并且GIF导出来的大小内存低，质量也比较高。也是本人常用的GIF方法，适用于小图

步   骤：AE菜单栏文件 — 导出 — 添加到Adobe Media Encoder渲染队列— 选择格式动画GIF（视频H2.64） —  导出GIF

快捷键：WIN : Ctrl+Alt+M    MAC : Command+Option+M

三、AE+GIF GUN导出

AE有各式各样的插件，GIF GUN主要为了方便导出GIF，因为操作比较简单，这个插件也是使用AE的小伙伴常用的，但是，它导出GIF的大小一般，并且GIF的画质也会有压缩

步   骤：打开AE菜单栏窗口（最下面GIF GUN插件） — 调节好参数 — 导出GIF

前   提：打开AE菜单After Effects — 首选项 — 脚本和表达式 勾选允许脚本写入和访问网络，启用JavaScript

方案对比

以下是相对应的案例，案例图片质量可能没那么明显变化，但是大小变化很直观。（因为案例色彩少）常用的AE输出GIF的方法就在这里了，大家可以根据不同的需要去选择相对应的方法。

总结

由于GIF的兼容性比较强，所以被很多初期慢速的互联网公司使用。在实际的工作中，也不乏有产品和运营叫你制作一些酷炫的动态效果。但是GIF占用的内存相对程序的运行会增加产品的负荷。所以一定要规划好项目中的动效。毕竟用户对体验的最佳感受是好用。

* 部分素材为练习（侵删）

* 未经许可，禁止转载

Powered by Froala Editor