Do you want to learn how to create and add Cinemagraphs in your WordPress posts? Cinemagraphs are images with one part or area moving while rest of the image stays still. These images are highly engaging and add an storytelling element to your articles. In this article, we will show you how to easily create and add cinemagraphs in WordPress.

您是否想学习如何在WordPress帖子中创建和添加Cinemagraphs？ 电影胶片是指其中一部分或一部分移动而其余部分静止不动的图像。 这些图像具有很高的吸引力，并为您的文章添加了叙事元素。 在本文中，我们将向您展示如何轻松地在WordPress中创建和添加电影。

什么是电影摄影？ (What are Cinemagraphs?)

Cinemagraphs are typically GIF images where a small part of the image is moving while rest of it remains still. They look very cinematic hence the name cinemagraphs.

电影胶片通常是GIF图像，其中图像的一小部分在移动，而其余部分则保持静止。 他们看起来很电影，因此被称为电影。

They add a storytelling element to images which makes them look more engaging. They are particularly useful when accompanying longform content, , or an .

它们为图像添加了叙事元素，使它们看起来更具吸引力。 当伴随着长篇内容， 或时，它们特别有用。

Creating cinemagraphs is a bit different than regular GIFs. However if you have the right tools, then with little effort and some practice you’ll be able to create stunning cinemagraphs from your own videos.

创建电影胶片与常规GIF有点不同。 但是，如果您拥有正确的工具，那么您无需付出任何努力和实践，就可以从自己的视频中制作出精美的电影。

That being said, let’s take a look at how to easily create and add cinemagraphs in WordPress.

话虽如此，让我们看一下如何轻松地在WordPress中创建和添加电影。

从视频创建电影摄影 (Creating Cinemagraphs from Videos)

To get started, you’ll need the following items:

首先，您需要以下各项：

1. A small video clip that you want to convert into a cinemagraph
   您想要转换为电影胶片的小视频片段
2. Adobe Photoshop
   Adobe Photoshop
3. Your time, patience, and creativity
   您的时间，耐心和创造力

Let’s get started.

让我们开始吧。

First you need to get your video ready. You can use a video editing tool like iMovie to trim the video to just the bare minimal clip that you need for the cinemagraph.

首先，您需要准备视频。 您可以使用iMovie之类的视频编辑工具将视频修剪为仅用于电影摄影的最小片段。

Next, you need to open Photoshop and import your video into layers by clicking on the File » Import » Video Frames to Layers menu.

接下来，您需要打开Photoshop并通过单击文件»导入»视频帧到图层菜单将视频导入到图层中 。

Select your video and then click on the OK button to continue. Depending on your video size, it may take a little while to be fully imported.

选择您的视频，然后单击“确定”按钮继续。 根据您的视频大小，完全导入可能需要一些时间。

Once your video is imported, you will see video frames as layers under the layers panel.

导入视频后，您将在“图层”面板下将视频帧视为图层。

Now you need to select all the layers except for the very first layer (Layer 1).

现在，您需要选择除第一层(第1层)以外的所有层。

Go to Layer » New » Group From Layers menu or press Command + G (CTRL+G on Windows) to add layers into a group.

转到图层»新建»从图层菜单中分组，或按Command + G(在Windows中为CTRL + G)将图层添加到组中。

Next, you need to select the group and go to Layer » Layer Mask » Reveal All to add a mask to the group.

接下来，您需要选择组，然后转到“ 图层”»“图层蒙版”»“全部显示”以向该组添加蒙版。

After adding the mask, press Command + I (Ctrl + I on Windows) keys to invert the color of the mask.

添加蒙版后，按Command + I(在Windows中为Ctrl + I)键反转蒙版的颜色。

Now set the foreground color to white and then click on the brush tool. You need to use the brush tool to highlight the area you want to show in the loop.

现在将前景色设置为白色，然后单击画笔工具。 您需要使用画笔工具突出显示要在循环中显示的区域。

After that, go to Window » Timeline to open all your layers in an animation format.

之后，转到窗口»时间线以动画格式打开所有图层。

You will notice all frames appear transparent in the timeline except for the first frame.

您会注意到，除了第一帧外，所有帧在时间轴上都显示为透明。

To change that, select the first layer (Layer 1) in the layers panel and click on the Unfiy Layer Visibility icon and then press the Match button.

要更改此设置，请在“图层”面板中选择第一层(第1层)，然后单击“取消图层可见性”图标，然后按“匹配”按钮。

Next, click on the toggle icon of the Timeline and select all frames. After that click on the toggle button again to choose Copy Frames.

接下来，单击时间轴的切换图标，然后选择所有帧。 之后，再次单击切换按钮以选择“复制框架”。

After copying the frames, click on the toggle button and select ‘Paste Frames’ option.

复制框架后，单击切换按钮，然后选择“粘贴框架”选项。

You will be asked to choose a paste method. Select ‘Paste After Selection’ and press the OK button.

系统将要求您选择粘贴方法。 选择“选择后粘贴”，然后按确定按钮。

Next, you need to click on the Timeline toggle icon once more and select the ‘Reverse Frames’ option.

接下来，您需要再次单击“时间轴”切换图标，然后选择“反转帧”选项。

Your cinemagraph animation is almost ready.

电影胶片动画即将准备就绪。

To save it on your computer, go to File » Save for Web option. This will bring up a popup where you need to select GIF format and click on the save button.

要将其保存在您的计算机上，请转到文件»保存为Web选项。 这将弹出一个弹出窗口，您需要在其中选择GIF格式，然后单击保存按钮。

That’s all your Cinematograph is ready.

这就是您的Cinematograph一切准备就绪了。

You can add it to your site like you would add any other . Simply edit the where you want to add the cinemagraph and click on the add media button.

您可以将其添加到站点中，就像添加其他 。 只需在要添加电影的地方编辑 ，然后单击添加媒体按钮。

This will bring up the media uploader popup, click on the select files button to upload the GIF file from your computer.

这将弹出媒体上载器弹出窗口，单击“选择文件”按钮以从您的计算机上载GIF文件。

Once uploaded click on the ‘Insert into post’ button to continue.

上传后，点击“插入帖子”按钮继续。

You will now see the image in your WordPress post editor.

现在，您将在WordPress帖子编辑器中看到该图像。

Don’t forget to save or update the post. You can now click on the preview button to see the cinemagraph in action. Here is the cinemagraph we created during this tutorial.

不要忘记保存或更新帖子。 现在，您可以单击预览按钮以查看正在运行的电影。 这是我们在本教程中创建的电影。

We hope this article helped you learn how to create and add cinemagraphs in WordPress. You may also want to see our list of for WordPress users.

我们希望本文能帮助您学习如何在WordPress中创建和添加电影。 您可能还希望查看我们的列表，这些为WordPress用户 。

If you liked this article, then please subscribe to our for WordPress video tutorials. You can also find us on and .

如果您喜欢这篇文章，请订阅我们的 WordPress视频教程。 您也可以在和上找到我们。

翻译自: