How to Create and Add Cinemagraphs in WordPress

How to Create and Add Cinemagraphs in WordPress1-

Do you want to create and add cinemagraphs in WordPress? Cinemagraphs are actually animated GIF images dressed completely in a new way. The one part or area of the image would be moving and the rest of the image stays still. These images are an extremely engaging element for your blog that will keep your audience entertained while reading your articles. The images look very cinematic and that is exactly why they are called cinemagraphs. Cinemagraphs are extremely crucial when it comes to long-form content, podcast episode, or an audio story.

However, creating cinemagraphs are slightly different than the regular GIFs. Today, here at DevotePress, we will be showing how you can easily play around with cinemagraphs and add them in WordPress. So, without any further ado, let’s get started.

How to Create and Add Cinemagraphs in WordPress 

To create and add cinemagraphs in WordPress, you will be needing a video clip, Adobe Photoshop, and your time, patience and creativity. Remember that you don’t need to be a pro at Photoshop to create your own cinemagraphs.

First of all, you need to get your video ready, you can use a video editing tool like iMovie to trim the video if it is too long. For this tutorial, I will be using the above short video; I will capture the pigeon’s movement and the background will remain still.

Next, open the Photoshop and import your video into layers by visiting File > Import > Video Frames to Layers menu.

File » Import » Video Frames to Layers

Then, select your file and the following pop-up will appear:


Here, you’ll be able to choose to upload the entire video or trim them to a specific range. If your video is longer than the portion you’ll actually need to trim it. The shorter you make, the easier it will be for you to work with it.

You will now see video frames as layers under the layers panel. Select all the layers, except for the very first layer, i.e. Layer 1.


Go to Layer > New > Group From Layers menu or press Ctrl + G to add layers into a group.

create group

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

layer>layer mask>reveal all

After you finish adding the mask, press Ctrl + I to invert the color of the mask. Set the foreground color to white and then click on the brush tool. You need to sue the brush tool to highlight the area you want to show in the loop.

After that, you need to 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.

transparent layers in Timeline

You can select the first layer (layer 1) to change this and click on the Unify Layer Visibility icon and press the Match button.

Match Popup

Now, you need to click on the toggle icon of the Timeline and select all frames. Click the toggle icon again and choose Copy Frames.

copy frames

Again, click on the toggle button and select “Paste Frames”, select “Paste After Selection” and then click on the OK button.

paste after selection

You will now have to click on the Timeline toggle again and select the Reverse Frames option.

Reverse frames

Now, go to File > Save for Web to save it on your computer as a GIF file.

Save for Web

And, that is it. That’s all you need to do to create your very own cinemagraph to share with the world. You can add it to your WordPress page or posts just like you regularly upload your gif images and entertain your visitors while they read your articles.

I hope this article helped you create and add cinemagraphs in WordPress. If you have anything to ask, share, or add, feel free to use the comments section below.

Leave a Reply

Your email address will not be published. Required fields are marked *