Make a Cinemagraph from a video in Photoshop, & animated gif tutorial

Cinemagraphs, also called “living photos” have made a bit of a comeback lately (sorry, they aren’t new). I actually wrote a tutorial on how to do this back in 2005 in my How to Wow for the Web book from Peachpit press, I actually called it “Bringing a Picture to Life” back then. Now it’s time to do them in Adobe Photoshop using videos. Its really useful for a website header, ad, Facebook post, or a kiosk because you can make a gif and set it to looping forever and get an endless looping video at a pretty small file size.

A Cinemagraph is when you have a photograph, but parts of it are moving. This is done by masking a photo with a looping video underneath. We will do this from a video, this tutorial works in Photoshop CS6 (extended) and Photoshop CC only. Check out my video which shows you step-by-step how to do this. I have a few extra tips in here including:

How to use guides to get a better match for the loop
How to easily see what you are masking from the video
How to export as an animated gif
How to get the gif into facebook

How to Make a Cinemagraph with Photoshop CS6 and CC

The model here was Tiffany, and I shot this (Canon 5D MkIII) at Eaves Ranch, Santa Fe, New Mexico

Note: If you don’t have Photoshop CS6 Extended (for video support) or Photoshop CC this tutorial won’t work for you, I’m sorry, but the video features before that were different, but you might be able to adapt the tutorial to work in earlier versions, but I can’t offer support on that.

Once you have made your cinemagraph, you can export it as video or as a gif. Use save for web to export the gif and make sure you set looping to “forever”.

You can upload this gif to your website, See example here

Here are written step-by-step instructions, for those who prefer to read.

Make a CINEMAGRAPH in Photoshop Tutorial and Make a GIF

Start with a video, here’s a video that I shot just recently of Tiffany. The goal is to find repeating movements and to freeze this into a photograph and just kind of have her hair and the tassel moving, and then, we can loop it, and then, you can upload it to a website as an animated gif or whatever, via small file size, and it can endlessly loop and create this movement. It’s kind of a cool effect.

This tutorial will work in Photoshop CS 6 or CC. Earlier versions have different animation engines. Now, to get the video in here, you just choose File, Open, and then, you just choose the video and it will open in the timeline. Open the video into Photoshop and make sure the timeline is visible. Window>Timeline (This only works in Photoshop CS6 Extended or CC) So, as you can see, we’ve got 16 seconds here; it’s way too long.

The first thing, is to break this down to a short loop where the action is happening. So we’re going to grab the play head here and just pull it across. This is known as scrubbing. So what I’m doing is I’m looking at the movement around here in the tassels, and around here in the hair. In also noticing she’s blinking about once a second. What we’re looking for is a consistent loop where the wind is blowing about the same. Make sure her eyes are looking in the same direction, we are looking for a seamless trasition to use as the looping point.

We trim the video, by clicking and dragging on the end and the beginning. We have it down to a couple of seconds, which is all we need.

Now we want to check this to make sure that it’s looping correctly. First thing we can do is just expand our timeline a little bit. This is not changing the direction of the video at all. All its doing is just giving us a little bit more to play with here on our timeline.

Now if you want to know more about video, I have a two actual full training tutorials on working with video on Photoshop. I have a free one here, I have a couple of more in-depth courses.

Making Movies in Photoshop

Video in Photoshop

Click on the menu at the right of the timeline and choose Loop Playback. Now, by doing this, this will enable us to look at our loop. So when it gets to the end, it will go back again, so make sure that’s turned on. And then, when we hit the Play, notice it’s going to go all the way through, and then, play again. So let’s just watch that and what we’re looking for is just any sudden jumps.

This is a good base video for use to use. So the next thing we want to do is freeze this into a photograph and that’s super easy.Duplicate the video layer. So you can hit Ctrl J or Command J on Mac for jump, or just drag into the New Layer icon, and that’s going to duplicate that video.

Now we don’t want this to be a video anymore. We want this top layer to be an image, so we just right click and then choose Rasterize Layer.

If you’ll look at our timeline, notice the image clip is right after the other one on the same layer. We want them on top of each other though, not one after the other. What you need to do is remove it out of the video group. So take that layer, which is an image, and drag it above, and see that little line will appear there. Release and notice, now, it’s on a layer above the video.

Make sure you drag the image to the left so that it lines up at the beginning.

Now, what we need to do is just reveal the areas that we want to have movement and we can do that by using a layer mask. However, it’s going to be quite difficult to see where we’ve masked that because both of these layers look the same, it’s pretty hard to tell what’s video and what’s an image. So what we’re going to do is we’re going to put a temporary effect on this video so we can see clearly where we’re masking it.

Hide the top layer

Apply a Hue and Saturation Adjustment layer right above the video. Drag the hue slider across for some crazy colors, which we can hide later on, but now, we can see where we’re masking, because we just want to mask around the hair and and the tassels.

Apply a layer mask to the top layer (image layer).

Now this layer mask is filled with white so it has no effect. Paint the white parts of the photograph to allow the video to display underneath.

Choose black for the foreground color, grab a brush, Opacity is set to 100, and I’m actually, even just going to turn off pen pressure. I want to just have a solid opacity.

Paint around the area of the hair. The feather is definitely going to move a little bit, and her hair here is definitely going to blow around, so let’s just give it a little space over here for it to move into.

When you preview the video, hide the Hue and Saturation Adjustment Layer.

You can spend as much time noodling as you want to get the masking perfect.

Let’s get a little bit of movement going in these tassels, so I’m just going to turn on our Hue and Saturation Adjustment again so I can see what’s going on, make sure I select black, maybe make this brush a little bit larger, and I’m just going to paint over these tassels because I want to see these move around in the wind. I think it’s going to add a really nice effect, and okay.

So let’s hide the adjustment layers again and play this back. We’ve got some really nice movement going there and we’ve created our basic cinemagraph.

Exporting as an animated gif

Now, I’ll show you how to export this out as an animated gif. Choose Export and we’re going to go to Save for Web.

Change the size to 650 width because, maybe, I want to put it on a WordPress blog.

Make sure you choose gif and not jpg.

Make sure you’re not under Original, but you’re under Optimized to see what the image will look like. We’ve got 67 frames in here. We can hit the Play button, and, look, we can actually preview that gif right in save for web.

Set the Tone in 256 colors, which is the maximum. We pretty much want to do that and whatever settings you’ve got here

Look at Looping Options. We want to change this to Forever because you want this to loop endlessly.

And let’s click the preview and have a look in the browser and see what our gif is actually going to look like.

So you can see up here, that’s exactly what it’s going to look like. It’s going to look quite nice. It’s going to play well.

We’re just going to hit Save and call this cinemagraph.gif. All right and thats our final gif.

Posting an animated gif on Facebook

You cannot upload an animated gif directly to Facebook. If you want to share it on Facebook, you will need to upload it to your website and paste the image url (hotlink it from your website). If you don’t have a website, or don’t wan to post it there, there are other solutions. The most popular is a free website called giphy

I hope you found this tutorial useful. Add a comment and let me know what you would like to learn. I create a new tutorial each week here at PhotoshopCAFE. You can see all the free photoshop tutorials here

BTW, I have a free ebook on Working with Layer Blending Modes in Photoshop that you will love. Drop your info here and I’ll send it to you in an email right away.

See you at the CAFE!

Colin

I have more Photoshop animation tutorials here

P.S I have a couple of premium courses that teach you video in Photoshop. They are

Video in Photoshop (Designer and Photographers guide) and

Making Movies in Photoshop (video with included ebook)

PS Don’t forget to follow us on Social Media for more tips.. (I’ve been posting some fun Instagram and Facebook Stories lately)
You can get my free Layer Blending modes ebook along with dozens of exclusive Photoshop Goodies here

You might also like:

how to photograph a lunar eclipse for beginners

Why are there tools missing in Camera RAW sometimes?

Photoshop on iPhone – PhotoshopCAFE