我是如何免费为自己的产品制作 Gif 动图的

[quietjosen]

不断有朋友问：

你是怎么做 Gif 的？画质不错，文件也不大。 用什么 app 录制的？好顺滑的录屏。 …

真有那么神吗？其实我觉得还好啦。大家可以到我的网站上看看效果，比如：

• https://toolinbox.net/Klib/
• https://toolinbox.net/iPic/

Anyway，今天我就分享下自己私藏的小秘密。其实也很简单，就是以下三步（基于 macOS 平台）：

1. 使用 QuickTime Player 录屏

其实 macOS 自带的 QuickTime Player 录屏效果还是挺不错的，使用起来也简单：启动后在菜单中选择即可，或者使用 Command + Ctrl + N 快捷键。

这一方式个好处：录屏时可以包含状态栏。因为我知道一些工具其实是不支持录制状态栏的，而我的几款产品恰好都是基于菜单栏的，故有此一说。

2. 使用 QuickTime Player 编辑视频

这一点其实是最便利的。

我之前曾使用 iMovie 来编辑视频，但其仅支持 16:9 的视频，实在太麻烦了，遂放弃。

我对视频的编辑其实很简单：删除无用帧。步骤如下：

• 使用 QuickTime Player 打开上面录制的视频
• 按下 Command + E 显示 Clips
• 按下 Command + Y 在当前帧分割视频
• 删除无用帧

以下大致演示编辑过程（其中的视频本身是 Klib 展示阅读器的操作示意，制作完成的 Gif 在 这里）：

此方式最大的不足是：不能在视频中添加文字。

3. 使用工具将视频转换为 Gif

这一步的选择余地应该挺大的，我个人常用的是下面这个网站：

http://image.online-convert.com/convert-to-gif

支持宽度等设定，感觉转换效果还可以。

尾巴

以上是我目前录制 Gif 的方式，全程免费。

我并没有说这是最佳选择、也没有为此背书的意思，以后也可能视情况而调整方案。如果你有更好的方式，欢迎告诉我。

[quietjosen]

@mopvhs 你这是为了录手机吧？

[quietjosen]

@TangMonk 不错，收了。

[msg7086]

我做 gif 好像是用的 imagemagick，直接把新番转成动图，感觉还行。
不过做完以后扔进 Fireworks 里过一遍导出，似乎文件还会再小一些。

[Bigk]

我直接用 LICEcap

[noe132]

@ynyounuo 的 1.3M gif 在不损失画质的情况下还可以继续压缩到 600kb

[ynyounuo]

@noe132
嗯，我一般用 ImageOptim 也是差不多的效果，这个是录完直接导出没有压缩的

[noe132]

根据楼主的视频，ffpmeg 解压出每一帧然后做成 gif
一共 591 帧

不降低帧率和图片大小(1244 x 1080)的情况下是 2.6M 。

如果缩减帧率一般到 30fps，则可以压缩到 1.6M


做出来的效果还算不错，但是因为用的是全局调色板，可能有一些颜色信息的丢失。
用本地调色板的话效果会好一些，但是每一帧都带有调色板，能复用的信息变少了，文件就会变得很大。

如果做成 APNG （我的 APNG 压缩工具崩溃了。。。待我研究一下移植到 x64

[quietjosen]

@noe132 谢谢这么详细的测试。看起来不错，唯一的问题就是你说的，颜色丢失带来的表格的横线消失。