如何在 Photoshop 中制作 Cinemagraph

几年来，Cinemagraphs 一直是我最喜欢的设计趋势之一。 它们是照片和视频的完美结合，为您的网站打造了一件优雅的艺术品，增添了一丝神秘感。

Cinemagraphs 很棒还有一个关键的实际原因：它们的文件很小。 与整个视频文件相比，向您的站点添加小动作要容易得多！ 但除了物流之外，还有最后一个原因让动态照片如此神奇：它们实际上比您想象的要容易得多！

准备好开始了吗？ 拉起你的椅子，打开 Photoshop，然后按照这七个简单的步骤来创建你自己的电影照片！

1. 选择您的视频文件

要制作电影图片，您将从一个基本的视频文件开始。 理想情况下，您可以自己拍摄视频，这样它就可以针对您的公司并与您的品牌完美匹配，但如果您只是进行试验，下载股票视频就可以了！

在本教程中，我使用的是我们在纯蓝色背景下在 Jenga 之旅内部拍摄的视频。 （如果您报名参加设计趋势课程，您将获得相同的文件！）

在为您的动态图片选择完美的视频时，您需要牢记以下几点：

• 相机需要一直保持静止。 如果您自己拍摄视频，请挖出旧的三脚架以尽可能保持稳定。 如果您正在浏览股票期权，请寻找尽可能少的变动！
• 您要保留的运动应该很容易隔离。 如果对象在彼此面前交叉或在整个屏幕上移动，则很难在保持背景静止的同时隔离您真正想要的移动。
• 视频应该循环播放。 为了让 cinemagraph 永不过时，它需要循环播放。 虽然 Photoshop 绝对可以帮助解决问题，但最简单的方法是使用可以轻松循环播放或具有可逆开头和结尾的视频。

获得视频文件后，您就可以将其加载到 Photoshop 中了。

2.导入视频文件

打开 Photoshop，前往文件 > 打开。 选择您的文件，然后您会看到视频显示为图层。 如果它没有自动显示，请确保您也可以通过转到“窗口”>“时间线”来查看时间线。

您会注意到视频文件会自动放入一个组“Video Group 1”。 你可以把它留在那里，但如果只有一个图层在一个组中困扰你，请随时将视频图层拉出并删除该组！ 这不是必需的。

3.清理时间线

播放您的视频文件几次——您需要全部吗？ 如果您希望 cinemagraph 关注的部分之前或之后有额外的镜头，请继续修剪文件，使其不碍事。 您可以通过单击时间轴中文件的边缘并将其拖动到所需的时间戳来执行此操作。

如果您的视频文件很长并且您无法查看整个文件或无法到达您想要的确切位置，您可以使用时间轴窗口底部的比例尺来放大和缩小。

注意：您修剪的文件部分仍会保存，所以不要担心丢失数据！ 如果您决定稍后需要某个部分，您可以随时单击并将边缘拖回原处。

我的原始视频文件以 Jenga 塔倒塌结束，这不容易循环播放。 所以我把那部分剪掉并从一开始就修剪了一些，只是为了简化我的工作时间！

清理完时间轴后，就可以隐藏不需要的动作了。

4.创建遮罩层

现在您将创建 cinemagraph 的“照片”方面。 将视频暂停在您要创建的“图像”上，然后选择整个区域。 将其复制并粘贴到一个新层中。

如果你点击播放，你会注意到现在你看不到任何视频，因为后面的视频在最上面。 现在是时候添加一个蒙版了，这将使我们能够选择我们想要显示的确切动作！

继续添加图层蒙版，从图层面板底部的选项或转到图层>图层蒙版>显示全部。

5.隔离运动

确保选择了图层蒙版（而不是图层本身），然后使用画笔工具。 就像任何蒙版一样，用黑色刷会隐藏蒙版（显示下面图层的内容），而用白色刷会显示蒙版（隐藏下面图层的内容）。

对于此示例，我希望在双手保持静止时显示 Jenga 塔的运动。 为此，我将塔顶的面具涂成黑色，其余部分则为白色。

这使您可以隔离运动，仅显示您希望 cinemagraph 显示的运动，同时保持其余部分静止不动。

6. 导出为 Gif

一旦您对您的 cinemagraph 感到满意，就可以导出它了！ 只需转到“文件”>“导出”>“保存为 Web 格式（旧版）” 。 您可以在这里尝试很多选项，但最重要的两个是：

1. 另存为 gif（位于对话框顶部附近）
2. 将循环选项设置为永远（位于对话框底部附近）

文件大小和质量之间总是有一点平衡，所以我绝对建议您尝试这些设置，以确保您得到的正是您需要的导出。

就是这样！ 您刚刚创建了自己的电影图片以与世界分享。 结果如何？ 我们很想在评论中知道。

如何使用 Photoshop 文件

当您在 Photoshop 中打开此文件时，您将看到完成的 cinemagraph。 如果您愿意，欢迎您使用它，或者您可以尝试看看我们是如何设置一切的！

首先取消屏蔽所有图层，“基本素材”除外。 那是我们开始使用的原始电影文件。 如果你点击播放，你将能够看到手移动了多少来摇动 Jenga 板！

然后我们添加了遮罩层来隔离运动，让我告诉你 - 在纯色背景上选择这样的几何形状使遮罩过程变得非常简单！ 根据您的视频文件，您可能需要更精确一些，但我们会把它留给您。

接下来，我们决定只关注循环良好的视频片段，以创造那种永恒的效果。 然而，我们将整个文件留在那里，所以你可以看到整个东西！

最后，我们更改了曲线以校正文件中的某些颜色。 您可能需要也可能不需要这样做，具体取决于您的视频，但请记住：制作动态图后，您始终可以继续编辑！

就是这样！ 您已经准备好可以在您的站点上显示的电影图片。 在下面的评论中告诉我们：你打算用这种趋势创造什么？