GIF的艰辛之路

杭州/UI设计师/4年前/901浏览
GIF的艰辛之路

最近在做gif,尝试过很多方法,各种软件、在线网页,付费的不付费的都有,也确实踩了不少坑,在这里做一个分享,希望能帮助大家

如果你最终想输出gif图,途径无非有:图片转gif,视频转gif这两种方式

 

但是其中设计到的方式方法却很多:本文按照以下目录做分析

软件导出gif


1、After Effects,对于设计的小伙伴,这个软件并不陌生,AE中有款插件gifgun可以直接便捷的快速输出gif。

 

gifgun是一款很功能强大、全面好用的After Effects插件,只需要一次点击即可完成操作,简单的一键式工作流程,Alpha通道支持,批量渲染和GIF压缩,GifGun是为AE制作GIF的首选工具。



各个版本gifgun插件下载地址:

Win/Mac:

链接: https://pan.baidu.com/s/17IDYeKwJbTb1lkU-qrbo7Q  密码: l5jl


gifgun插件安装需要注意几点,具体可以参考https://www.bilibili.com/video/BV1W7411L78u?from=search&seid=591330940490719147


2、Photoshop,Ps通过png序列导出gif,相信很多小伙伴都用过,这也是比较普遍且无损的一种方式。


首先要将png序列从AE中导出,操作如下:选中AE中要导出的项目-添加到渲染队列-输出模块-格式-png序列,导出后的png图片会按顺序在文件夹中显示。

着重讲下拿到PNG序列如何在ps输出gif,具体方法是如下:



3、Photoshop,Ps通过iff序列导出gif,这种方法用的会少一些,甚至没有听说过,但却很强大。

这里做个代练。同样的方法要将IFF序列从AE中导出,选中AE中要导出的项目-添加到渲染队列-输出模块-IFF序列。拿到IFF序列文件,按照以下方式操作:



4、Priciple,它是一款专业的交互设计软件,轻便、易上手,关键是还能跟Sketch打通,这款软件通过录屏的方式输出gif,操作也非常简单:

5、Rotato,如果这个没听过,Design Camera肯定见过吧,被称为动效神器,支持各种动态UI样机并导出gif。


同样的,Rotato也与sketch也能完美结合,可以读取sketch各个图层组件,并且可以以悬浮的形式表现出来,层次感极强。可以将交互动效直接拖入样机,双重动效(页面动效+样机动效),所有的这些动效可以直接通过视频和gif导出,想想就很心动,感兴趣的小伙伴可以去官网下载,



下面这个功能额外说一下,就是将Sketch文件导入Rotato,并有非常强的层次性效果,多角度展示并最终导出视频或gif,效果杠杠的~



软件下载地址:https://dl.lizhi.io/rotato

此外,新版本样机有水印,安装下面激活软件,即可消除水印。


激活文件链接: https://pan.baidu.com/s/1gCqAuoD9giM5nATiD6hrqw  密码: um5g


激活文件是我自己网上买的,如果不能用的小伙伴,淘宝里花5块钱单独买个pkg激活文件即可。

还有一点,Rotato软件导出gif默认是通过gifski软件导出,没有装gifski的小伙伴在App store可以直接下载,免费的哦~



以上就是比较主流的通过常用软件导出gif的方式,当然现在也有很多视频导出gif,各种表情包、影视片段截取,被应用的很广泛,我们这里着重说各大专业平台上对gif研定10M大小左右的例子,毕竟小表情包也不需要那么大的分辨率。


视频转gif


1、 gifski,没错,这个好用的软件又来了,他是独立的app。傻瓜式的操作界面,容易上手,直接拖入视频,同时还支持调整长宽比例、帧数、质量等灵活操作。



2、 priciple,好用的东西总是设计的很完美,如果其他方式不好使的时候,不妨试试把视频拖入priciple,因为视频本身就是动态播放的,再通过priciple中录制功能完成录制,从而导出gif。


3、 GIF brewery 3,这款软件仅支持苹果系统,曾经的免费和强大受到很大关注。现在在苹果商店下载时需付费30元。本来是专门推荐免费的方法,但这款忍不住还是推荐了。

因为这种一次性终身付费比有些在线网站按年度付费来的划算的多。关键是这款软件操作简单、压缩质量高,压缩率也高。是一款比较良心的软件。


直接将视频拖入软件即可快速转成gif,可以灵活设置参数导出。


undefined


4、视频转gif在线网站

https://www.apowersoft.cn/video-to-gif-online


这个网站是我目前看到的压缩率最高、质量最高且免费的在线网站。

举个例子:我导入25M左右的视频(分辨率1920*1080),导出的gif只有10.2M,关键是很清晰。


可能这个例子不全面,因为具体的压缩率和大小跟视频的颜色的复杂度等有很大的关系。它也有专业版的,名称:蜜蜂剪辑,不过免费版也够用了。具体大家不妨试一下。


那么接下来就要介绍几款几乎所有制作gif都离不开的操作——gif压缩


在这之前,先了解一下影响Gif大小的因素:

尺寸(分辨率大小)、帧数、时间、像素颜色数量

简单的说就是:尺寸越大,帧数越大,时间越长,画面颜色越复杂,gif图内存肯定就越大,反之则小。具体看哪个要素是最重要的。

 

举个例子:

文章开头说的ps导入iff序列,由于是单独的图片帧,所以通过减帧可以大幅度减少内存,手动减帧也需要技巧,每隔几帧减少一帧,一般问题不大,何况这里可以更改帧延迟,通过速度较少画面不流畅感。


gif压缩

 

1、 PP鸭(PP Duck),一款好用的图片压缩软件,支持苹果和windows系统,有付费功能,但是免费的也足够用了。操作简单,只需要将图片拖入PP鸭,就能自动批量压缩(一次性导入上限是10张),还支持压缩前后图片对比。


但是,对,但是来了,虽然压缩品质很高,基本上可以达到无损,但是压缩大小可没有那么乐观,小伙伴可以试一下,多的可以压缩的40%,但是大部分的压缩比列在10%左右,甚至只有1%。对于文件本身不大的文件,这款软件非常好用。



2、Gif brewery 3,前面提到的视频转gif,gif brewery3 适用,gif压缩起来一样不含糊,有很多小伙伴在实际压缩时,有个疑问,本来文件是20M,我用它压缩反而更大,速度也更快,原因可能是因为下面这两个参数:帧速率(Frames Per Second),每秒刷新的图片的帧数越多,gif就越流畅,所占内存页就越大,反之则不够流畅,内存也越小。

优化GIF颜色(Optimize GIF Colors),数值越大,颜色损失的就越少,内存就越大,反之则越小。


3、 最普遍的还是在线压缩,说到在线压缩,就有不能不说的坑。

很多在线gif压缩后,要么质量非常差,颜色、分辨率、流畅性,简直惨不忍睹。要么就收费,收费其实很正常,但是付费会员后,体积是下去了,但是图片质量还是损耗了很多,还有的还不如免费的。这都是泪啊~


这里给大家分享几个相对来说不错的免费网站:

https://ezgif.com/resize


是一个国外GIF压缩工具,功能很强大,支持gif压缩, gif制作、视频转gif。

在默认情况下,gif压缩基本上是无损的,这里有压缩等级可以选择,小伙伴可以试试:

注意一点:这个网站支持的最大文件大小:35M


4、图贴士(原工具之家):https://www.tutieshi.com/compress/

默认状态下,保持图片的原始宽度,压缩质量为70,这样也有不错的压缩比率,gif质量也比较高


今天分享的这些方法适用于各种gif表情包等,但是最主要的是是针对稍大一些的gif文件,准备上传10M以内gif平台的方法,毕竟内存小的gif压缩方法实在是多。对清晰度也确实没那么高。


下面针对上面这些方式简单做个比较,

最后,能导出、转化、压缩gif的方式还有很多,以上是我自己使用过程中觉得不错的,推荐给大家!


71
Report
|
109
Share
相关推荐
作品集
Recommanded by editor
插画——日常
Recommanded by editor
动效
动效
动效
动效
作品收藏夹
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
相关收藏夹
动效
动效
动效
动效
作品收藏夹
学习类文章
学习类文章
学习类文章
学习类文章
作品收藏夹
作品集
作品集
作品集
作品集
作品收藏夹
动效学习
动效学习
动效学习
动效学习
作品收藏夹
UI设计
UI设计
UI设计
UI设计
作品收藏夹
文章  工具
文章  工具
文章  工具
文章  工具
作品收藏夹
大家都在看
Log in