WordPress divi主题

如何在 PhotoShop 中从视频制作 GIF

by | May 11, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

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

google广告开户

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

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

让我们开始吧。

最终结果预览

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

蓝色色调海滩的 GIF

首先,将视频导入 Photoshop

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

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

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

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

WordPress divi主题

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

对素材进行调整

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

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

专业提示:确保无论您做什么调整,您都选择了所有图层。

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

如何一次裁剪所有图层

通过单击图层 1 选择所有图层,然后在按住 shift 的同时单击最顶层。 选择矩形选框工具,然后选择要保留的视频(不是要取出的)。 单击图像>裁剪,选择之外的区域将消失。 在我们的视频中,我们选择了整个视频区域,在顶部留下了一些未选择的区域。 我们想让整个视频不那么高,并去除地平线的白色边缘。

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

Photoshop 上裁剪视频的屏幕截图

如何调整 GIF 中的颜色

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

这个 GIF 下载了 211MB 没有颜色过滤器和 312MB 的颜色调整。 如果您真的想要颜色调整,那么您必须减少帧以使最终文件更小。 下一节将对此进行更多介绍。

fiverr建站WordPress程序员

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

使用时间轴编辑帧

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

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

打开时间线窗口的 Photoshop 动作截图

独立站选品工具

如何删除帧以使 GIF 文件更小

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

要删除帧,您可以选择其中一个,然后按时间线窗口播放功能下方的垃圾桶图标。 同样,您可以通过单击一个帧来选择一组连续的帧,然后通过按 shift+click 来选择之前或之后的帧。 如果您不想从 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,您将需要真正减少帧,以便能够以适合 Web 的尺寸获得它。

保存为 web 4-up 选项的屏幕截图

JasperAI 10000字免费额度试用

一个好的经验法则是让您的 GIF 文件不超过 20 MB。 超过这个就太大了。 如果您能够设法将其缩小到 10MB 以下而不会损失太多质量,那么您就赢了。

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

结论

如您所见,在 Photoshop 中从视频片段制作 GIF 非常容易。 唯一需要注意的是您开始的视频长度以及您删除的帧数。 如果你删除的不够多,最终的文件将会非常庞大​​,这将毫无帮助。 可能需要一些试运行才能最终获得符合您需要的 GIF。 如果您正在为教程创建屏幕截图的 GIF,就像在本指南中一样,您将掌握它的窍门,并且每次都会变得更简单。

精选图片来自 emojoez / shutterstock.com

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题