Buzz
Cinemagraphs are a fascinating twist on the classic animated GIF, where only a part of the image moves to emphasize a specific motion. The result is a captivating, looping animation, and we're here to guide you through the process of creating one.
Giving credit where it's due, the idea of the cinemagraph was first brought to life by Jamie Beck and Kevin Burg on their Tumblr From Me to You. (Learn more about the history of Cinemagraphs here.) They've crafted some incredible pieces, like the example on the left, so make sure to check out their work for some creative inspiration.
Our example isn't quite as polished. (You can see it to the right.) For fun, I created a somewhat imperfect cinemagraph that makes it appear like I'm searching for buried treasure in my nose. In this post, I'll walk you through how I made it, so you can create your own, perhaps more refined, cinemagraphs. This process is best understood through video, so watch the tutorial at the top for a thorough guide. If you'd prefer text instructions, keep reading.
Step One: Brainstorm an Idea and Capture a Short Video Clip
To begin, you'll need a video clip to work with. Choose a scene where the motion can be easily isolated. Stirring coffee or picking your nose are just a couple of examples. There are many more options. Just be sure not to get too close to the subject, as you'll want the rest of the frame to remain still.
Once you know your concept, record a brief video clip. Keep it simple at first, as longer clips mean more frames to work with. Twenty to thirty frames can be time-consuming, as you'll need to isolate the moving part in each one. The process can be slow, so try not to get too ambitious. The fewer frames, the better.
After shooting your clip, transfer it to your computer. Now the real work begins.
Step Two: Extract Your Frames Using Photoshop
Photoshop can open video files, so simply drag your clip into the application and it will display the first frame like a standard still image. (Note: Photoshop doesn’t support all file types, so if you’re having trouble, try converting the file to MP4.) There are several ways to transfer frames into a new Photoshop document, but I prefer copying them one by one. This way, I can skip unnecessary frames and control exactly where I want the clip to start and end. If you have a different method you like, feel free to use it. To start copying frames, open the Window menu and select the Animation panel. Find the first frame you want to use, select all (Command/Control+A), and copy. Then paste that frame into a new layer in a new Photoshop document. Repeat this process for all the frames you need. Once done, close the movie clip and focus on your new Photoshop file.
Step Three: Separate the Movement in Each Frame
This stage takes the most time. Essentially, you need to remove the parts of each frame that should remain still. I typically do this by selecting the moving part with the polygonal lasso, then inverting the selection (Command/Control+Shift+I), and refining the selection's edge (Command/Control+Option/Alt+R) to soften the edges with a feathered effect. You can also set a default feather using the polygonal lasso's settings if you prefer. Once you're happy with the selection, press the Delete key to remove the unwanted parts. Repeat this for each frame.
Step Four: Set the Animation Sequence in Photoshop
Creating the animation itself is pretty straightforward since you've essentially already done the hard work. Open the Animation panel from earlier, then click on the Frame Mode button, located in the bottom-right corner. You'll see only one frame now. Ensure this is your starting frame by making sure the first layer is the only one visible in the layers panel. Then, click the 'Duplicate Frame' button (the one that looks like a small page icon, just left of the middle in the panel). This action will create a duplicate of the previous frame, and you can then show the next frame in the animation. I did this by creating each frame on its own layer and making only the relevant one visible. Repeat this process for each frame, duplicating, showing the next one, and so on until all frames are added.
At this stage, the animation is mostly complete, but you’ll likely want to adjust the duration, as the default is usually set to 10 seconds, which is too slow. Typically, you’ll want to change it to 'No Delay,' though feel free to experiment with other options. To set a specific duration, select all the frames you want to change, then click on the duration field at the bottom of one of the frames. You can select your preferred time or enter a custom duration. You may also want to adjust the timing for individual frames to make some last longer than others. Tinker with these settings until you get the movement just right.
Step Five: Save Your Work for the Web
Now it's time to save your creation. Go to the File menu and select 'Save for Web & Devices.' Make sure to choose the 'GIF 128-bit Dithered' preset, and check the 'Animation' box in the bottom-right corner (if it's not already checked). You can adjust other settings if needed, but generally, just hit save. And that's it — you've successfully made your cinemagraph.
And that's the whole process! If you create your own cinemagraph, feel free to share it in the comments!
