6

3种AE常用导出GIF方法解析

 2 years ago
source link: https://www.ui.cn/detail/583024.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
3种AE常用导出GIF方法解析-UICN用户体验设计平台
3种AE常用导出GIF方法解析
65.3°
原创文章 / 经验/观点 / / 举报

2021-06-27



以后会陆续更新一些动效经验,教程,分享!

原文链接:https://mp.weixin.qq.com/s/U2-57rLWxlpEliMKr3otqQ



3786389.png

3786392.png

前言

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

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

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

3786358.gif

一、AE+PS导出

1. 视频格式导出

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

3786376.png

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

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

3786377.gif

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

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

3786378.gif

2. 序列帧图层导出

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

3786379.png

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

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

3786381.gif

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

快捷键 :  打开(WIN : Ctrl+O    MAC : Command+O)

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

3786382.gif

3. 透明导出

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

3786383.gif

二、AE+Media Encoder导出

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

3786384.png

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

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

3786385.gif

三、AE+GIF GUN导出

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

3786386.png

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

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

3786387.gif

方案对比

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

3786388.gif

总结

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

* 部分素材为练习(侵删)

* 未经许可,禁止转载

3786391.gif


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK