Jies_L
每人每天仅限5票，快给你心仪的作品鼓励的一票。
投票
0.0°
以后会陆续更新一些动效经验，教程，分享！欢迎交流～
前言
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
全部评论：53条
更多作品
发表评论