How to Add Cinemagraphs in WordPress

This time we will go through the process of not only adding a cinemagraph to your WordPress website but how to create one.

The Basics

Let’s begin with what is a cinemagraph is and how it can help your site.  A cinemagraph is an image with one part of this picture moving, as in a video, while the rest of the pictures stays still.  The most common use for this technique is for advertising.

The great thing about these images is that they can be pretty engaging.  Your articles are enriched with content that sometimes inadvertently bring in more visitors.

The name “cinemagraph” obeys to the fact that the photo looks like watching a movie at the cinema.

It might seem as if they were similar, but cinemagraph and GIF are not the same thing.  All you need is practice until it comes naturally.

Creating Cinemagraphs from Video

You will be amazed at the little number of materials needed to create cinemagraphs from videos.   Here’s what you will need to get started:

  1. A short video clip that you will be turning into a cinemagraph.
  2. Adobe Photoshop

Add some time and patience to those two and you are on the path of success.  Let’s split the process into steps:

  1. You will first need to make some edition on the video.  Use any video editor to trim the video into the small bit that you will be transforming into a cinemagraph.
  2. Import your trimmed video to Photoshop.  Click on the File » Import » Video Frames to Layers menu to, in fact, place the video in layers.  You will be prompted to your files, select your video and click OK.  Depending on the size of your video, it might take some time for it to load into Photoshop.
  3. Once the video has been completely imported, click on the Labels tab.  You will see video layers as frames.  Select all the layers except for the first one (Layer 1). Put the selected layers into a group like this: Layer » New » Group From Layers.
  4. Next, you need to mask the selected layers.  Go to Layer » Layer Mask » Reveal All to do this.
  5. Invert the color of the mask by pressing Ctrl+I (Command+I on a Mac).
  6. Now you have to set the foreground color to white and click on the brush.  Use the tool brush to highlight the area that you want to show in the loop.
  7. Go to Window » Timeline and open all the layers in animation format.  You will notice that all frames appear transparent except for the first one.  To change this, select this first layer (Layer 1) and click on the Unify Layer Visibility icon and press the Match button.
  8. Click on the toggle button icon of the Timeline and select all the frames.  Next, click on the toggle button again and choose Copy Frames.
  9. Click on the toggle button and select “Paste Frames”, select “Paste After Selection” and then OK.
  10. You will need to click on the Timeline toggle again and select the Reverse Frames option.
  11. Save it on your computer as a GIF by clicking on File » Save for Web.

Your cinemagraph is now ready to use.  To add it to your WordPress, just click on the Add Media button to add it to your post.

Leave a Reply

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