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

2017-08-22 00:04:32 +08:00
 quietjosen

不断有朋友问:

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

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

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

1. 使用 QuickTime Player 录屏

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

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

2. 使用 QuickTime Player 编辑视频

这一点其实是最便利的。

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

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

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

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

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

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

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

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

尾巴

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

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

6154 次点击
所在节点    分享创造
28 条回复
FanWall
2017-08-22 00:11:05 +08:00
……原来 macOS 上录个 gif 这么麻烦
quietjosen
2017-08-22 00:14:36 +08:00
@FanWall 有很多工具,但能平衡好视频质量和文件大小的,就少了。
Showfom
2017-08-22 00:34:41 +08:00
转换成 GIF 可以用 ffmpeg 做吧
konakona
2017-08-22 00:36:39 +08:00
@FanWall 我也是这个感觉,哈哈哈哈。
不过我是用工具的-.- LICEcap.
Trim21
2017-08-22 00:38:29 +08:00
win 下面用的 screen2gif..想想反正图片要丢到微博图床上去就没在意过大小
cnnblike
2017-08-22 00:51:25 +08:00
licecap 不是快多了么?
ETiV
2017-08-22 03:34:05 +08:00
QTPlayer 还可以用 Trim ( CMD+T )来做剪辑

……不过话说回来,赶紧淘汰 GIF 吧,跟 h264 比,码率太球大了……
Valyrian
2017-08-22 03:39:30 +08:00
SharkIng
2017-08-22 03:51:27 +08:00
CloudApp 就可以直接录
Fooleap
2017-08-22 05:16:01 +08:00
GIF Brewery
inflationaaron
2017-08-22 07:07:30 +08:00
@ETiV 一直有 APNG 和 WEBP 的尝试啊,但是用的人少。imgur 倒是用 gifv 取代了不少 gif,可还是不能完全放弃。
yidinghe
2017-08-22 07:45:25 +08:00
xshare 不错,直接录 GIF
ynyounuo
2017-08-22 08:03:01 +08:00
楼上推荐直接录制软件的各位贴一下录制的 gif 质量再推荐吧…
真以为楼主弱智找不到直接录制的软件才走那种麻烦的路么?

我之前用 screencapture 命令来抓取单个窗口的连续截图,再通过 PS 合成 gif,再相应的压缩文件。好处是可以保留背景阴影的透明度并且可以自己选择关键帧,后来发现我买的 Cinemagraph 的 gif 导出效果非常不错,就转而用更方便的 Cinemagraph 导入 ScreenFlow 录制的 ProRes 4444 再导出 gif 了,还可以添加文字之类的修饰。

最适合高画质低容量的录制方法依旧还是只保留有用关键帧。其实应该可以用 MoviePy 之类的识别相似帧然后只保留一两帧,当然因为本来总帧数就不多和手动调整也没啥优越性。

当然,希望 gif 早日被替代…真的垃圾。
ynyounuo
2017-08-22 08:23:19 +08:00
之前录制的 gif 效果展示:


不过我一般不会特别严格限制文件大小,所以我录制的 gif 分辨率会比较高,对我来说 5MB 以内都是可以接受的。
quietjosen
2017-08-22 08:31:32 +08:00
@ynyounuo 你这个清晰度可以的,也是 1.3M ,不大。

不过,压缩及大小这事,也得看内容的变化。如果真的要严格测试,最好用相同的视频。当然,一般没谁有空折腾这事。
quietjosen
2017-08-22 08:55:47 +08:00
@ynyounuo 你上面的 Gif 是如何做的?「用 screencapture 命令来抓取单个窗口的连续截图,再通过 PS 合成 gif,再相应的压缩文件」还是「买的 Cinemagraph 」?
ynyounuo
2017-08-22 09:26:30 +08:00
@quietjosen 后者
quietjosen
2017-08-22 10:35:06 +08:00
@ynyounuo 收到,谢。
mopvhs
2017-08-22 11:26:28 +08:00
我是这样的:先开 QuickTime Player,再开 LICEcap 套在上面录 QuickTime Player。

另外 Monosnap 也可以直接录屏生成 Gif,美滋滋。
TangMonk
2017-08-22 11:29:34 +08:00
命令行一句话转成 gif

$ ffmpeg -i Untitled.mov -pix_fmt rgb24 -r 10 -f gif - | gifsicle --optimize=3 --delay=3 > out.gif

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/384704

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX