以下是我制作 GIF 的方法。 有时用于博客文章。 有时用于推文。 有时用于文档。 有时只是为了好玩。 GIF 在某些情况下非常有用,并且比静止图像甚至视频更能传达信息。
我使用的是 Mac,所以这些方法大多是 Mac 特有的。
GIPHY CAPTURE
在 App Store 上可用,GIPHY CAPTURE 拥有极其简单的界面。 将其放置在您要录制的位置,点击录制,点击停止。

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

您可以将其上传到 GIPHY,这在您需要在线存储它时非常有用,但您也可以将其本地保存。 您也可以在上传或保存之前对其进行编辑,并且可以
- 修剪开头/结尾
- 选择循环方式
- 将尺寸调整为 640px、480px 或 320px 宽度(仅有这三种选择)
- 添加字幕

显然,此应用程序是 GifGrabber 的演变,那些喜欢 GifGrabber 的人讨厌这款应用程序,但这就是互联网的魅力。
现在,这款应用程序是我最常使用的 GIF 制作应用程序,但有限的功能,例如无法很好地控制文件大小,有时会促使我尝试其他应用程序。
LICEcap
LICEcap 只有一个最小的用户界面。 它是一个透明的窗口,您可以将其放置在您要录制的内容之上,点击录制,点击停止。 您可以拖动窗口来调整大小,也可以设置精确值。

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

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

但 Photoshop 实际上也可以制作 GIF。 当我想要制作一个可以完全控制每一帧的 GIF 时,我就会选择它。 例如,我可能会拍摄很多大小完全相同的窗口截图,这些截图逐步展示了如何完成某项操作。 然后我会
- 将它们作为图层放入单个 Photoshop 文件中
- 打开时间轴,创建一个关键帧动画
- 为每个图层创建一个关键帧,其中只有该图层处于打开状态
- 调整时间和设置
- 存储为 Web 所用格式

此示例产生了以下结果

优化
无论我以哪种方式创建 GIF,我都会将其通过 ImageOptim 进行优化。
ScreenToGif 也很棒!
谢谢! 我同意。
最适合 Windows
请不要这样做。
GIF 是用于动画图片的效率最低的格式。 尝试使用 iPad 2 访问一个包含 GIPHY 内容的页面。
使用普通的视频代替。 托管它们可能会因为浏览器兼容性问题而有些棘手,但流量开销要小得多。
有时 GIF 是向开发人员展示一些效果的快速方法。 你可以在 Dribbble 上看到很多例子。
公平地说,这确实取决于预期用途。 我们经常使用 GIF 捕捉工具来帮助向团队中的其他成员说明质量保证问题。 它们是创建简短、小巧、易于访问和共享的动态图像的快速方法,并且与大多数业务通信工具兼容。 正如 Chris 所示,它们甚至可以在 Photoshop 等工具中轻松地进行后期编辑,无需使用视频编辑工具。
没错,GIF 可能不是用于动画图片的特别高效的格式,但这并不意味着我们不应该使用 GIF,它们非常有用。
就基于照片的 GIF 而言,我同意你的观点。
我上周刚刚读了 这篇文章,它展示了在使用多个动画图像时,使用 WebM 作为替代方案可以大幅减少页面大小。 对于具有摄影质量的动画图像,这似乎是一个明智的选择——最终结果几乎没有区别。 但是,对于较短的“基于矢量的”动画,我发现 GIF 更清晰,文件大小也能够接受。 正如 Chuck 所说,这取决于预期用途。
不过,WebM 也有一些注意事项,主要与对该格式的支持和 WebM 与 GIF 相比的“可分享性”有关(基本上是一样的问题)。 还有一个问题是,大多数移动浏览器会阻止/禁用 HTML5 视频自动播放,这需要一些技巧。
对于有兴趣的人,我尝试过使用 Gifsicle(通过 Grunt 插件 grunt-contrib-imagemin),但发现文件大小的减少幅度非常小,所以放弃了。 我确实发现使用 这个 GIF 优化工具 可以大幅减少 GIF 文件大小,并且几乎不会影响质量(有些减少幅度高达 75%,比 Photoshop 更胜一筹)。 如果您想减小几个 GIF 的文件大小,我强烈推荐它,当然,它不适合批量优化。
另外,如果您真的需要类似幻灯片的东西,可以考虑将您的图层拼接成一个单独的 PNG 或 JPEG 文件。 将其放在一个具有 overflow:hidden 的 div 中,并使用一些 js 或 CSS3 动画来重新定位。 这并不难实现。 生成图像的大小在某些平台上有限制,因此请考虑不要使用太多帧或将整个解决方案拆分成多个精灵图。
拼接方法优化了压缩和减少开销。 试试看:使用五个幻灯片,比较拼接后的文件大小与五个单独文件大小的总和。
此外:如果不存在 js 或 CSS3 动画,此技术会自动降级(始终显示第一帧)。
如果您真的想尝试一些奇怪的东西,可以使用标签、隐藏的单选按钮和“~”选择器(即“纯 CSS 幻灯片”)来添加纯 CSS 导航。
这比 GIF 好多了。
不过,您不能将其作为单个媒体资产导入 WordPress 中。
Google 照片也提供了一个相当简单的动画工具。
还值得一提的是:ImageMagick
您可以对图像应用许多不同的压缩过滤器,以获得最佳的大小/质量比。 另外,它可以与一些 bash 脚本快速自动执行。
很棒的文章!
我还建议使用 GIFBrew,这是我用来创建 GIF 的工具。 它提供了许多选项,可以将 GIF 调整到合适的大小/质量。
https://geo.itunes.apple.com/us/app/gif-brewery-3-video-to-gif/id1081413713?mt=12&at=11lMug&ct=jns-linkshare
WebKit 和 Chrome 都切换到允许在移动设备上自动播放视频,如果设置了
muted
属性,这应该让 Phil 在大约一年后感到高兴。不错的文章 Chris。
自从 Wes Bos 发布了他关于 GIF 工作流程的视频,我一直使用 ScreenFlow 来编辑和创建动画 GIF。
http://wesbos.com/animated-gif-workflow/
最近 ScreenFlow 进行了更新,现在它可以导出动画 GIF。
http://www.telestream.net/screenflow/whats-new.htm
只要有可能,我更愿意使用小型的 mp4 而不是 GIF。一如既往,这取决于情况……
如果你想要一个漂亮整洁的网页界面来制作网络摄像头 GIF 或重混其他 GIF,那就永远可以使用 https://giflr.com。它还允许你进行绘图或添加字幕。
像 GIF Movie Gear 和 GIFmation 这样的 GIF 软件怎么了?现在所有的 GIF 应用程序都只是电影转换器和基本动画制作工具,比如 Photoshop。没有办法像本地调色板和帧处理那样编辑每个帧的单独属性,这让你无法以更小的文件大小充分发挥 GIF 的能力。
如果你和我一样,使用 Windows,你可以使用 RecordIt,它也适用于 Mac http://recordit.co/
+1 我喜欢 recordit,顺便说一下,我在 Mac 上。
哦,Recordit 看起来确实很不错。感谢分享!
+1 支持 recordit,我在 Mac 和 pic 上使用它。
虽然我会尝试使用 LICEcap,因为它有时很方便,可以移动视窗,而不是制作一个包含冗余区域的更大 GIF。
我觉得有必要分享一下 GIF 制作的鼻祖,微软 GIF Creator https://en.wikipedia.org/wiki/Microsoft_GIF_Animator
很棒。超级酷,现在我有了所有我需要的东西,可以更“诡异”地使用 Gif 了!!
信息图表怎么样……你觉得你能在信息图表上做点什么吗?
嘿,Chris — GIFV 怎么样??看起来像是 Imgur 在 2014 年推出的一种非常好的选择,但是关于它的信息很少……它内置了 mp4 和 webm 备用,看起来很有效……为什么没有引起足够的关注?
Imgur 简介:http://blog.imgur.com/2014/10/09/introducing-gifv/
Reddit 上的更多信息:https://np.reddit.com/r/HighQualityGifs/comments/4qxl6o/are_you_ready/d4x5xj1?context=3
我在那篇文章中没有看到任何指向实际项目、软件、仓库或任何东西的链接。但似乎有一些聪明的想法。