How to make a cinemagraph

Creatives are always looking for the next big medium to engage audiences. First there were images. And then the engaging dynamism of video became a must-have. But what if you could have the best of both worlds? A format that had the movement of video with the accessibility of stills.

Welcome to the world of cinemagraphs.

What is a cinemagraph?

A cinemagraph is an infinitely looping GIF where only a portion of the image has movement. But it’s a little more than that. Cinemagraph makers are looking for an image with enough visual impact that it can stand on its own. The movement simply adds to image; it doesn’t need to be the focus. And as the name suggests, it should have the same evocative qualities of cinema.

How to make your own cinemagraph

The process is surprisingly easy. If you’re filming it yourself, you want a static frame shot where the movement will make a nice seamless loop. If not, you just need to find a suitable video to loop.

Step 1: Find the perfect video 

With over 6 million fresh videos on the Alamy library, there’s plenty to choose from that would make a suitable video to loop. Rolling clouds, waterfalls or a record player would make good clips to practice with.

Step 2: Import your video into the Photoshop ‘Timeline’

When you import your video into Photoshop, it should open the ‘Timeline’ feature at the bottom. If not, you can open it yourself under ‘Window’ > ‘Timeline’.

Step 3: Duplicate your video

You can duplicate your video easily by simply dragging and dropping your video group to the ‘Create a new layer’ option in the bottom-right. Now you should have two identical videos on two separate lines on your ‘Timeline’.

Step 4: Decide where the start of your loop is

It doesn’t matter where the loop should start as long as there’s some tape before it. You’ll see why shortly. Once you’ve chosen where your loop should start, just cut both videos so that they start at the same point.

Step 5: Decide where the end of your loop is

Now we need to decide where the end point is. Once you’ve chosen it, mark it with the time selector. You can now cut the end of your first video so that it ends at the point you’ve chosen. Leave the second video layer for now.

Be wary about the length of your cinemagraph. Ideally, you want it to be as short as possible so that it doesn’t take ages to load.

Step 6: Prepare the loop

This is where the beginnings of the loop take shape. So now that your first video has been appropriately cut, you’ll need to prepare your second video which will help your GIF look seamless.

Drag your second video so that it begins where the first video ends. Then you’ll want to bring back the parts of the video we cut out before the start (this is why your video should have space before the start of the loop). You don’t need to bring back all of it, just enough so that we can make a smooth transition from the first to the second video.

Once you’ve done that, you can now cut the end of the second video so it ends at the same time as the first video. What we’ve done here is simply make the last frame of the second video the same as the first frame of the first video, and thus created a loop.

Step 7: Create a smooth transition with time stamps

At the moment, only the first video is visible as it’s the top layer. So we want to use time stamps and the opacity setting to transition from one video to the next.

There isn’t an exact rule as to when the transition should begin. Just play around until you’ve found something that works for the video. In this 4-second example, I’ve started the transition just after 2 seconds.

And your second time stamp should be at the very end of the video. Then just ensure the first time stamp is set to 100% opacity while the second should be 0% opacity.

Now you should have the makings of your loop. But do continue to play around with where the transition begins if you’re not happy with it.

Step 8: Loop playback

This will be an endlessly looping GIF, so you’ll want to review it in this format. To make the playback loop, simply click on the ‘cog’ to the left of your videos and check the ‘Loop Playback’ option.

In some cases, the process ends here because there’s no other movement in the video you need to tidy up. If that’s the case, skip to exporting in Step 10.

Step 9: Use clipping masks to hide any other movement

To hide any other movement in your video, you first need to choose a frame that you want to use as the still portion of your cinemagraph.

Once you’ve chosen it, select it with the timeline marker. Then you can use that frame as a new layer with the shortcut Command + Option + Shift + E (Control + Alt + Shift + E on Windows).

Then you need to create a layer mask for it in the bottom-right. With the layer mask selected (denoted by the white square around it), simply paint in black the areas where you want the video to come through.

Review your layer mask to see if any adjustments need to be made. But once you’re happy, we can move on to export it as a GIF.

Step 10: Exporting your cinemagraph

Use the ‘Save for Web (Legacy)’ option to export your cinemagraph. In the dialog box, set your dither to diffusion and the colours to 256. The rest of the settings should be fine as standard. If you need to reduce the size of your file, I’d recommend making the dimensions smaller.

And that’s it! Your cinemagraph should be complete and viewable as an endlessly looping GIF. They’re surprisingly easy to make. And once you’ve done your first one, you’ll want to do many more.

They’re visually engaging and easy to place in your content. With cinemagraphs, there’s a whole new way to excite and dazzle your audience with these mesmerising visuals.