How To Create A Cinemagraph In Adobe Photoshop

of 06

How To Create A Cinemagraph In Adobe Photoshop

Image shows the timeline panel and the red -coloured mask used to create the effect.
If you can wield a Photoshop Brush and create a mask, you are good to go.

Every now and then you encounter a graphic technique that makes you wonder, “How did they do that?” Lately I have been seeing a lot of images where a portion of that image is in motion. It may be a head and shoulders shot of a model where the model suddenly blinks or a gorgeous landscape image with a stream and the water is moving. Every time I encounter one of these I ask, “How did they do that?”.  In fact, I am encountering them more and more on the web thanks to the explosion of Animated Gif’s that seem to be popping up everywhere from Facebook to stock photography sites.

The technique is called a “cinemagraph” and it, it turns out, they are really easy to create.

So where does the term “cinemagraph” come from. In 2011 the photographer Jamie Black and Digital artist Kevin Burg devised a technique to animate some of their images and wanted to call it something sexier than “Animated Photo”. The technique has exploded across the internet and if you want to see how the pros do it, check out this article on creating a cinemagraph for Harper’s Bazaar.

To get started, all you need is Photoshop or a video editor and a video and you are good to go.

Before you start rooting through your video collection you need to be aware of a few things:

  • Use a tripod when you shoot the video. The scene needs to be rooted in place.
  • No pans, zooms or other special video tricks. This is a “point and shoot” technique.
  • The video should be no longer than 10 seconds.
  • Look for motion in the clip that is naturally repetitive which will make it easier to loop the video.

To see the final result of this "How To" point your browser here. With that in mind here’s how to create a cinemagraph in Photoshop.

of 06

Preparing the video in Adobe Photoshop

The Photoshop timeline is shown
Photoshop contains a timeline that can be used for video.

Photoshop contains a timeline which allows you to add and edit a video shot with anything from your smartphone to a video camera. Most videos are output to mp4 but there is an extensive list of video formats you can use. In this case, I have imported a video of the High Falls in Wawa , Ontario. If you look at the Layers panel you will see your video is now in a Video Group layer.

There a couple of things I did to prepare Photoshop. The first is, I clicked the Gear icon in the Timeline (Window>Timeline) and changed the resolution to 100% and selected Loop Playback.

I also noticed the video is 15 seconds in length. It needs to be shortened. To accomplish this, I pulled the End Of Work Area indicator to the 7-second mark and then clicked and dragged the end of the video to that point.

To test, press the Space Bar to play the video. To pause playback, press the Spacebar once more.

of 06

Creating The Still Image For A Cinemagraph In Adobe Photoshop

The screenshot is shown on the timeline and has been moved to its own Layer in the Payers panel.
Photoshop has a nifty way of taking the needed screenshot.

Photoshop contains a rather nifty way of taking a screen shot, which is exactly what we need. To do this move the playhead to the start of the video and choose Select>All or press Command/Ctrl- A. With the screen selected, choose Edit>Copy Merged (Shift-Command-C …Mac or Shift-Ctrl-C… PC). Photoshop will place a copy of the screen on the clipboard. Paste the screen into place.

The image will be placed on the timeline. This is not what you want. Open the Layers panel and drag the image out of the video group onto a separate layer.

Back in the timeline panel, move the image to the start of the timeline.

of 06

How To Loop A Cinemagraph Video In Adobe Photoshop.

The video is split on the timeline and the Transitions panel is open.
Photoshop contains a collection of very common video transitions which can be used to smooth a jump between clips.

To start, turn off the visibility of the image layer in the Layers panel. We need to concentrate on the video.

If you press the Spacebar you will see the video play and when it loops back to the start there is a bit of a jump. To fix that, select the video in the timeline, drag the playhead to about the midpoint of the timeline and click the Scissors tool. What this does is to split the clip, meaning the start of the second clip and the end of the first clip are essentially the same. All I have to do is to swap their positions on the timeline and, when I press the spacebar the jump between the start and the end is gone. Unfortunately, there is a jump in the middle. Here’s how to deal with that.

Click the Transition button to open the Transition pop down. You will notice there are a number of fades and at the bottom is a duration. I selected Cross Fade and set the duration to about 1/3 sec and then dragged the Cross Fade to the point between the split.

Another approach is to move the split clip out of the Video group in the Layers panel. You then move the original clip so there is a bit of an overlap between them. Drag the Fade transition onto the copy and then line up the overlap with the graph on the top clip.

Either one works, so feel free to use what works best for you.

of 06

Creating the Motion For A Cinemagraph In Adobe Photoshop

The mask is painted onto the image in the image layer.
Use a mask to create the "hole" for the video to play through.

To start turn on the visibility of the Image Layer and, on the timeline, drag the image duration to the end point of the video layers. If you press the spacebar you aren’t going to see a thing because the image covers the video. Let’s fix that.

With the image layer selected in the Layers panel click the Add Layer Mask button to add a mask to the image. Set your default colours to Black and White , making sure Black is the foreground colour and click once on the mask in the Layer to select it.

Click once on the Brush tool and, when the Brush Options panel opens select a soft brush with 0 hardness and 100% opacity. One thing I do is to press the \-key so I can see my mask as I paint it. Once I have painted on the mask I press the \-key to turn it off and then press the spacebar to review the effect. If I need to add or remove areas from the mask, I can use a White brush to remove areas or switch to the Black brush to add to the mask. As well, you can press the [-key to reduce the brush size or the ]-key to increase it.

If you find the mask is a bit hard on the edges, select the Mask in the Layers panel, open the Properties and increase the feather value.

of 06

How To Prepare A Cinemagraph For Output In Adobe Photoshop

If your intention is to output your cinemagraph for desktop playback then selecting File>Export>Render Video … is your choice. In this instance, size is not an issue so the file can be output as an .mp4 or QuickTime movie.

If your intention is to run this out through a web page then size is a definite issue and an Animated GIF is the more logical solution.

To start select File>Export> Save For Web (Legacy) …. This will open the old Save For web panel.

 In the Preset area I selected GIF 128 dithered and, in looking at the Size value in the bottom left corner, 12.1 Mb simply isn’t going to work. The first step is to reduce the physical dimensions of the image to 50%. The file size reduces to a more acceptable 3.87.

To further reduce the file size , try reducing the number of colors in the Gif palette. In the case of this image, there really is not a lot of colour and by reducing the the number of colours to 32 the file size rolls in at a totally acceptable 2.9 Mb.

The final step was to set the looping value to Forever.When finished I clicked Save.

One final note, this GIF is awfully long and 199 frames  is a bit much. The reason I have that duration was more for demonstration purposes than anything else. Try and keep the frame count below 100 which means, for a 30 fps video the duration should be around 3 to 4 seconds.