如何从视频在 PhotoShop 中制作 GIF

已发表: 2019-07-16

如果您来到这里想知道如何使用 Photoshop 制作 GIF，那可能是因为您上传到网站的视频拖慢了加载时间。 好吧，你来对地方了。 在本指南中，我们将向您展示如何在 Photoshop 中根据视频素材制作 GIF。 它将在您的网站上看起来很棒，并且比视频文件的速度更优化！

借助 GIF，您可以在网站上循环播放任何类型的视频。 它可以是来自宣传材料的剪辑、教程的屏幕录制，或者几乎任何您真正想要的东西。

对于本教程，您需要一些视频素材和 Adob​​e Photoshop。 如果您没有 Photoshop 订阅，您可以免费试用，因此您可能会发现拥有 Photoshop 对网页设计有很大帮助！ 如果您的视频很长，您可能希望先在 iMovie 或 Adob​​e Premiere 等视频编辑器中将其剪短。 Photoshop 在您导入时也有一个修剪选项，但如果原始素材非常长，视频编辑器会更好。

让我们开始吧。

最终结果预览

这是我们为本教程创建的 GIF 的最终结果，非常适合部分或模块背景。

蓝色调的海滩的 GIF

首先，将视频导入 Photoshop

要将视频剪辑导入 Photoshop，您需要先进入 Photoshop 编辑器。 从那里，单击文件 > 导入 > 视频帧到图层。 选择您要使用的视频，然后单击打开。

在弹出对话框中，您有两个选择； 1. 从头到尾 – 使用整个视频，或者， 2. 仅选定范围 – 使用修剪选项并仅使用视频的一部分。

在此之下，可以选择将导入限制为选定的帧数。 如果视频较短，请选择较小的数字，如果视频较长，请选择较大的数字。 这可能需要一些反复试验，直到您获得正确的流程。 例如，变化很小或很慢的素材会有很多看起来几乎完全相同的帧。 另一方面，如果镜头速度很快并且有很多视觉变化，如果你取出太多帧，它可能看起来很紧张。

对于本教程，我们选择“从头到尾”和“限制为每 3 帧”。 确保单击“制作帧动画”。

关于导入带有帧作为图层的视频以制作 GIF 的 photoshop 操作的屏幕截图

对素材进行调整

这是对视频素材进行任何类型调整的最佳时机，从大小裁剪到调整颜色级别。 例如，视频的角落可能有一个难看的物体，或者视频的全高对于您想将其放置在网站设计中的位置来说太大了。 或者，如果视频素材过度饱和，您可以使用调整面板一次调整所有图层的饱和度。

对于那些有创意的人，对不同的图层进行调整将为您的 GIF 创造各种不同的效果。 你不能做的是删除背景或使用一次只能在一层上工作的工具。

专业提示：确保无论您进行何种调整，都已选择所有图层。

Photoshop 上“图层”面板的屏幕截图 - 如何在 Photoshop 中制作带有视频的 GIF

如何一次裁剪所有图层

单击图层 1 选择所有图层，然后在按住 shift 键的同时单击最顶层。 选择矩形选框工具，然后选择要保留的视频区域（不是要删除的区域）。 单击图像 > 裁剪，选区外的区域将消失。 在我们的视频中，我们选择了整个视频区域，在未选择的顶部保留了一点。 我们希望降低整个视频的高度并去除地平线的白色边缘。

Photoshop 操作的屏幕截图 - 选择和裁剪

在 photoshop 上裁剪视频的屏幕截图

如何调整 GIF 中的颜色

选择所有图层后，单击面板菜单中的调整选项卡。 您可以使用任何调整工具并将它们应用到 GIF 中的图层。 例如，您可以将颜色变为黑白或赋予双色调效果。 我们使用带有色调的黑白调整使视频的颜色更具艺术感。 这非常适合不会妨碍其余内容的背景。 您可以使用任何您喜欢的色调并以您想要的任何方式调整不同的颜色级别。 只是一个建议，如果您添加颜色调整，您的最终文件将比不添加时更大。

此 GIF 下载时不带滤色器为 211MB，带颜色调整时为 312MB。 如果您真的想要调整颜色，那么您必须减少帧数以使最终文件更小。 下一节将详细介绍这一点。

视频中黑白加色调的屏幕截图

使用时间轴编辑帧

使用时间线窗口，您可以编辑帧以减小 GIF 文件的最终大小。 例如，剪辑末尾的额外帧似乎滞后或创建了静态部分。 取出的帧数越多越好！ 但要小心，你删除了太多的帧，最终效果会变得跳跃，花点时间检查删除一些帧后循环的外观。

要访问时间线窗口并查看 GIF 如何在循环中工作，请单击窗口 > 时间线。 屏幕底部将打开一个长水平面板。 在左下角，有一些控件。 选择循环选项为“永远”，然后按播放按钮查看 GIF 的外观。 在我们的例子中，我们的 GIF 看起来不错，但仍然太长。 在超过 200 帧并进行颜色调整后，最终文件高达 312mB。 您可以按照下面“另存为 GIF”部分中的步骤检查最终文件的大小。 看一看后，只需按取消而不是保存。 您还可以使用“为 Web 导出”选项减小文件的大小。

用于打开时间线窗口的 photoshop 操作的屏幕截图

如何删除帧以减小 GIF 文件大小

为了使我们的 GIF 更小，我们取出最后 200 帧。 完整的视频有一个部分，其中无人机相机转动并向左平移到海滩后面的公园。 我们不需要它。 现在我们的 GIF 重 160MB。 还是蛮大的。 我们不再取出任何帧，因为它会变得不稳定，因此我们将其保留原样，以便稍后使用“保存为 Web”选项进行优化。

要删除帧，您可以选择一个并按下时间轴窗口播放功能下的垃圾桶图标。 同样，您可以通过单击一个帧来选择一组连续的帧，然后通过按 shift+单击来选择之前或之后的帧。 如果您不想从 GIF 的开头或结尾剪切素材，但想缩短它，请按一个删除交替帧，然后命令+单击每隔一帧。

Photoshop 中时间线窗口的屏幕截图

我们喜欢当您在 Photoshop 上用视频制作 GIF 时，您可以在导入时和之后剪切素材的各个部分！ 太实用了。

如何改变 GIF 的速度

时间线窗口还为您提供减慢或加快 GIF 的选项。 时间线中的每一帧下面都有一个速度控制。 默认测量值为“无延迟”或“0”，但您使用的视频可能已经进行了速度调整。 我们的视频就是这种情况。 如果您查看上面删除帧的屏幕截图，您可以看到我们的帧有 0.04 秒的延迟。 当我们预览 GIF 时，它看起来像是加速了。 我们不想那样。

我们通过单击时间线窗口左上角的三行并单击“选择所有帧”来选择时间线中的所有帧。 在任何帧上，我们单击向下的小箭头并选择“无延迟”。 这将使我们的 GIF 自然流动。 要创建看起来像慢动作的 GIF，请选择 1 秒以上的任何值。

photoshop 动作的屏幕截图 - 使用时间轴来控制 GIF 的速度

另存为 GIF 并优化

当一切都完成后，是时候将项目保存为 GIF 了。 单击文件 > 导出 > 保存为 Web（旧版）并在弹出对话框中选择 GIF 选项。 检查文件的大小并考虑它的输出。 您可以采取一些措施来减小文件大小。

  • 减少颜色计数。
  • 减少或消除抖动。
  • 减少高度和宽度。

要检查调整如何改变您的 GIF，请单击“预览”按钮。 使用 2-Up 和 4-Up 选项卡查看不同的选项。 如果它仍然太大，您可能需要返回并删除更多框架。 目标文件大小小于 20 MB。 如果您正在为全角部分创建 GIF，您将需要真正减少框架以使其尺寸适合网络。

Save for web 4-up 选项的屏幕截图

一个好的经验法则是保持您的 GIF 文件不超过 20 MB 左右。 超过这个就太大了。 如果您可以设法将其压缩到 10MB 以下而不会损失太多质量，那么您就赢了。

我们最终从我们的 GIF 中删除了更多帧以将其减小到 18 MB。 然后我们把它通过 GIFCompressor，并减少了 55%。 GIFCompressor 是一个免费的在线工具，它可以在不降低质量的情况下减小 GIF 大小。 您可以上传最大为 50MB 的 GIF。

结论

如您所见，在 Photoshop 中根据视频素材制作 GIF 非常容易。 唯一需要注意的是您开始的视频长度以及您删除了多少帧。 如果你没有删除足够多的文件，最终的文件将非常庞大，这根本没有帮助。 可能需要进行一些试运行才能最终获得您想要的 GIF。 如果您正在为教程创建屏幕截图的 GIF，就像在本指南中一样，您将掌握它的窍门，并且每次都会更简单。

精选图片来自 emojoez/shutterstock.com