V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
quietjosen
V2EX  ›  分享创造

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

  •  2
     
  •   quietjosen ·
    atjason · 2017-08-22 00:04:32 +08:00 · 6130 次点击
    这是一个创建于 2657 天前的主题,其中的信息可能已经有所发展或是发生改变。

    不断有朋友问:

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

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

    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 的方式,全程免费

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

    第 1 条附言  ·  2017-08-22 09:11:48 +08:00
    这是视频的 mp4 格式的源文件: http://sendanywhe.re/1108ZEWK

    感兴趣的话,可以试试你自己常用的工具,做出的 Gif 大小和质量如何,欢迎来真格的。
    28 条回复    2017-08-22 18:06:31 +08:00
    FanWall
        1
    FanWall  
       2017-08-22 00:11:05 +08:00 via Android   ❤️ 2
    ……原来 macOS 上录个 gif 这么麻烦
    quietjosen
        2
    quietjosen  
    OP
       2017-08-22 00:14:36 +08:00
    @FanWall 有很多工具,但能平衡好视频质量和文件大小的,就少了。
    Showfom
        3
    Showfom  
       2017-08-22 00:34:41 +08:00
    转换成 GIF 可以用 ffmpeg 做吧
    konakona
        4
    konakona  
       2017-08-22 00:36:39 +08:00
    @FanWall 我也是这个感觉,哈哈哈哈。
    不过我是用工具的-.- LICEcap.
    Trim21
        5
    Trim21  
       2017-08-22 00:38:29 +08:00
    win 下面用的 screen2gif..想想反正图片要丢到微博图床上去就没在意过大小
    cnnblike
        6
    cnnblike  
       2017-08-22 00:51:25 +08:00
    licecap 不是快多了么?
    ETiV
        7
    ETiV  
       2017-08-22 03:34:05 +08:00 via iPhone
    QTPlayer 还可以用 Trim ( CMD+T )来做剪辑

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

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

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

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


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

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

    另外 Monosnap 也可以直接录屏生成 Gif,美滋滋。
    TangMonk
        20
    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
    quietjosen
        21
    quietjosen  
    OP
       2017-08-22 11:44:47 +08:00
    @mopvhs 你这是为了录手机吧?
    quietjosen
        22
    quietjosen  
    OP
       2017-08-22 11:45:04 +08:00
    @TangMonk 不错,收了。
    msg7086
        23
    msg7086  
       2017-08-22 14:45:11 +08:00
    我做 gif 好像是用的 imagemagick,直接把新番转成动图,感觉还行。
    不过做完以后扔进 Fireworks 里过一遍导出,似乎文件还会再小一些。
    Bigk
        24
    Bigk  
       2017-08-22 16:35:20 +08:00
    我直接用 LICEcap
    noe132
        25
    noe132  
       2017-08-22 17:10:25 +08:00
    @ynyounuo 的 1.3M gif 在不损失画质的情况下还可以继续压缩到 600kb
    ynyounuo
        26
    ynyounuo  
       2017-08-22 17:14:32 +08:00
    @noe132
    嗯,我一般用 ImageOptim 也是差不多的效果,这个是录完直接导出没有压缩的
    noe132
        27
    noe132  
       2017-08-22 17:50:40 +08:00
    根据楼主的视频,ffpmeg 解压出每一帧然后做成 gif
    一共 591 帧

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

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


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

    如果做成 APNG (我的 APNG 压缩工具崩溃了。。。待我研究一下移植到 x64
    quietjosen
        28
    quietjosen  
    OP
       2017-08-22 18:06:31 +08:00
    @noe132 谢谢这么详细的测试。看起来不错,唯一的问题就是你说的,颜色丢失带来的表格的横线消失。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2828 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 07:44 · PVG 15:44 · LAX 23:44 · JFK 02:44
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.