How To Create Animated Cinemagraphs

Cinemagraphs are a really compelling take on the traditional animated GIF, only showing motion in a portion of the frame to focus on a specific movement. This results in a very compelling looped animation and we’re going to show you how to make one right now.

To give credit where credit is due, the cinemagraph began with Jamie Beck and Kevin Burg on their tumblog From Me to You. (More on the history of Cinemagraphs here.) They’ve created some pretty amazing stuff, like the example on the left, so be sure to check out their work for inspiration.

Our example isn’t quite so elegant. (You can see it to the right.) As an example, I put together an (imperfect) cinemgraph that makes it look like I’m digging around in my nose for, let’s say, buried treasure. In this post I’m going to show you how I made it so you can make your own, perhaps more tasteful, cinemagraphs. This process is better demonstrated on video, so watch the one at the top of the page for an in-depth walkthrough. If you want step-by-step instructions in text form, read on.

Step One: Come Up with an Idea and Shoot a Short Movie Clip

To get started, you’re going to need a movie clip to work with. You want to choose something where the motion on display can be isolated nicely. Coffee-stirring and nose-picking are just two options. There are plenty of others. Just avoid getting too close to your subject as you want the surrounding areas to be entirely still.

Once you know what you’re going to do, record a short movie clip. Start with something very simple, as the longer the clip is the more frames you’ll have to pull. 20-30 frames can be fairly time consuming, as you have to isolate the moving area in every single one, so be careful about being too ambitious. Creating a cinemagraph can be very time consuming, so limit the frames you need as best you can.

When you’re done shooting your clip, transfer it over to your computer. It’s time to get to work.

Step Two: Create Your Frames in Photoshop

Photoshop can open movie files, so just drag your clip onto the app and you’ll see the first frame like it’s a standard still image. (Note: Photoshop can’t read every type of file, so convert to an MP4 if you’re having trouble with formats.) There are a lot of ways to move the frames you want to use into a new Photoshop document, but I like to copy them individually because I can skip certain frames that are unnecessary and choose exactly where I want to start and end in the clip. If you prefer another method, go right ahead. To start copying frames, go to the Window menu and open the animation panel. Scroll to the first frame you want to use in your movie clip, select all (Command/Control+A) and copy. Now paste that frame into a new layer in a new Photoshop document. You want to keep doing this for all the frames you’re going to use. When you’re done, you can close the movie clip and focus on the new Photoshop document.

Step Three: Isolate the Motion in Every Frame

This part of the process is the most time-consuming. Basically, you need to erase the parts of each frame that you don’t want to move. I like to do this by selecting the relevant, moving part with the polygonal lasso, inverting my selection (Command/Control+Shift+I) and refining the edge of that selection (Command/Control+Option/Alt+R) to increase the feather size so the edges are nice and soft. (You can also have a built-in feather by adjusting the settings of the polygonal lasso if you prefer.) Once you’ve done all that, just press the Delete key to remove the parts you don’t need. Now repeat this for every frame.

Step Four: Tell Photoshop How You Want Your Animation to Play

Creating the animation is pretty easy because you’ve basically done that already. You just need to go into the Animation panel you opened earlier and start by clicking the Frame Mode button. It’s the one all the way in the bottom right corner. When you do that you should just have one frame. Make sure it looks like the starting point — meaning the only layer that’s showing in your layers panel is the first frame — and then go ahead and click the “Duplicate Frame” button. (It’s the one that looks like a little page icon and is to the left of the middle in the panel.) This will create a new frame based on the previous one, and you can go ahead and display the next frame in your animation. I did this by creating each frame in its own layer, then showing only the one that was supposed to be visible. (You can see this demonstrated in the video up at the top of the post.) You’ll need to repeat this process for every frame. Just press the “Duplicate Frame” button, show the next frame, and keep repeating the process until every frame has been added.

At this point you’re basically done with the animation, but you’ll probably want to set the duration to something other than the default. Generally the default is 10 seconds, which is very slow. Generally you’ll want to set it to “No Delay”, but you can fool around with the options and decide what you want. To choose a duration, just select all the frames you want to change and click on the duration on the bottom of one of the frames. You may want to adjust individual frames to last slightly longer than others. Go ahead and play around with your options until you get the motion you desire.

Step Five: Save for Web

Now all you have to do is save your image. Go to the File menu and choose “Save for Web & Devices”. Be sure to choose GIF 8-bit Dithered as your preset and check the animation box in the bottom right corner of the screen (if it isn’t checked already). You can make other alterations, but generally all you’ll need to do here is save. Once you’re done, that’s it. You’ve created a cinemagraph.

That’s all there is to it! If you make your own cinemagraph, share it in the comments!