制作 GIF

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 提供适用于您旅程各个阶段的云产品。 立即开始使用 200 美元的免费积分!

以下是我制作 GIF 的方法。 有时用于博客文章。 有时用于推文。 有时用于文档。 有时只是为了好玩。 GIF 在某些情况下非常有用,并且比静止图像甚至视频更能传达信息。

我使用的是 Mac,所以这些方法大多是 Mac 特有的。

GIPHY CAPTURE

在 App Store 上可用,GIPHY CAPTURE 拥有极其简单的界面。 将其放置在您要录制的位置,点击录制,点击停止。

每次打开应用程序就像一个会话。 您录制的 GIF 将显示在底部栏中。 录制完成后,点击其图标即可打开此屏幕

您可以将其上传到 GIPHY,这在您需要在线存储它时非常有用,但您也可以将其本地保存。 您也可以在上传或保存之前对其进行编辑,并且可以

  • 修剪开头/结尾
  • 选择循环方式
  • 将尺寸调整为 640px、480px 或 320px 宽度(仅有这三种选择)
  • 添加字幕
在 GIPHY CAPTURE 中录制的示例 GIF

显然,此应用程序是 GifGrabber 的演变,那些喜欢 GifGrabber 的人讨厌这款应用程序,但这就是互联网的魅力。

现在,这款应用程序是我最常使用的 GIF 制作应用程序,但有限的功能,例如无法很好地控制文件大小,有时会促使我尝试其他应用程序。

LICEcap

LICEcap 只有一个最小的用户界面。 它是一个透明的窗口,您可以将其放置在您要录制的内容之上,点击录制,点击停止。 您可以拖动窗口来调整大小,也可以设置精确值。

我喜欢它可以制作任何尺寸的 GIF。 如果您需要更小或更大,通常可以在录制前放大或缩小浏览器以适应。 不过,最好的部分是您可以设置 FPS(每秒帧数),这会对文件大小产生巨大影响。 如果您要显示需要相当平滑动画的内容,可以提高 FPS。 如果您要显示立即改变状态的内容,可以降低 FPS。 当您能够创建能够以极小的文件大小完成任务的 GIF 时,这是一件令人非常满足的事情。

小技巧:即使在录制过程中也可以拖动窗口本身。

Photoshop

Photoshop 可以对现有的 GIF 进行操作,您可以打开它们,然后使用“存储为 Web 所用格式”来调整大小,并更改颜色信息等内容,这些都会影响文件大小。

但 Photoshop 实际上也可以制作 GIF。 当我想要制作一个可以完全控制每一帧的 GIF 时,我就会选择它。 例如,我可能会拍摄很多大小完全相同的窗口截图,这些截图逐步展示了如何完成某项操作。 然后我会

  1. 将它们作为图层放入单个 Photoshop 文件中
  2. 打开时间轴,创建一个关键帧动画
  3. 为每个图层创建一个关键帧,其中只有该图层处于打开状态
  4. 调整时间和设置
  5. 存储为 Web 所用格式

此示例产生了以下结果

一个时长 16 秒、大小为 800×582 的 GIF,仅有 137K,还不错。

优化

无论我以哪种方式创建 GIF,我都会将其通过 ImageOptim 进行优化。