Are you willing to learn how to Create Cinemagraphs and add them in WordPress posts?Cinemagraphs are pictures with one part moving only and the rest of the image does not move and it stays still.These images are awesome.They add a storytelling the component to your post or article.This article will teach you how to create Cinemagraphs and add them in WordPress.

What are Cinemagraphs?

Cinemagraphs are GIF images in which small area of the image is moving, while rest is not moving.Creating cinemagraphs is little different than regular images.Let’s have a look at how to create cinemagraphs and add them in WordPress.

Create Cinemagraphs from Videos

To Create Cinemagraphs you must have these things:

  1. A short video clip that you have to convert into a Cinemagraph
  2. Adobe Photoshop
  3. Your stamina and patience

Let’s begin

First step is to get your video ready.

Second step is to open the Photoshop and import the video into layers by hiting on the File » Import » Video Frames to Layers menu.

Choose the video and then click ok.

create cinemagraph

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

pik

Next step is to select all the layers except for the first layer.

Go to Layer » New » Group From Layers menu.

create cinemagraph

Next step is  to select the group and go to Layer » Layer Mask » Reveal Allto add a mask to the group.

pik

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

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.

pik

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.

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.

pik

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.

You have to again click the Timeline toggle  and select the ‘Reverse Frames’ option.

pik need edit

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.

That’s all your Cinematograph is ready. need edit

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

pik

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

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

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

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.