How To Make Your Own Cinemagraphs: A New Take on GIFs

We hate to break it to you, but it doesn't look as if GIFs are disappearing anytime soon. Those ancient animated images — once limited to gaudy "under construction" signs and chain-mail fodder — are receiving a new lease on life as of late, thanks to a little something called cinemagraphs.

This is actually just a fancy name for an animated GIF, but specially
designed with a purposeful artistic goal. One photographer, Fernando J
Baez, describes the technique
as "more than a photo, but not quite a video." The intent is to
augment, or draw attention to, certain aspects of an image through
localized animation — for example, a breeze blowing through a subject's
hair — and masking the remainder of the animation to appear static. It's
by no means a new phenomena, but the technique is a little more
involved than creating your average meme-worthy GIF, and can produce
some incredibly cool results.

One of Jamie Beck's animated photographs, otherwise called a cinemagraph.

Photoshop. That's because Adobe's powerful image manipulation software actually allows us to edit more than just images — there's support for certain video formats too, which is what we'll be using to create our final image. Sound good? Let's get started.

Vimeo is the best place to go looking for beautifully shot, high-quality videos, so we're going to start there, though you can also shoot your own! For this example, we've used a short video of people on an escalator, which should be easy to mask and loop.

Motion workspace is active (found under Window > Workspace). This will give us a simple timeline. Using the blue guides to the left and right of the timeline, select a 1-2 second segment that will form the basis of your cinemagraph. You don't need to be exact, since we can trim some of those extra frames in the next step.

FIle > Export > Render Video, and accept the default settings. Now, close your document, and choose File > Import > Video Frames to Layers, selecting the video file you just exported. This will import each frame as a new layer, which is crucial for the masking process.

In our sample video, there's lots of motion, with people moving up and down the various escalators —except for one. This escalator is empty, and thus, perfect for animating, while freezing the rest of the busy people pictured in this scene. In the Layers palette, the first layer is going to serve as our animation's anchor frame. With the first layer selected, ensure that "Unify Layer Visibility" is activated. This ensures our static anchor frame will repeat itself in each successive frame.

Depending on the framerate of your source material, the animation might not be as smooth as you'd like. This can be fixed by selecting every frame in the timeline, right-clicking, and and choosing a new delay value. Try experimenting with different settings to see what works best. Also, you might find that your chosen subject or animation doesn't loop all that smoothly. In some cases, it's a simple matter of copy/pasting all your frames to the end of the timeline, and choosing Reverse Frames from the timeline bar's options menu. This won't work in all instances, however, and could actually produce a robotic/mechanical repetition effect — not exactly the artistic effect we're looking for here.

When that's done, click File > Save for Web & Devices. Make sure that GIF is your selected export format. You an even preview the final image if you'd like. Fernando J Baez recommends running your image through a cross-processing or duo-tone filter, which limits the number of colors in your image to take advantage of the GIF format's shortcomings. Jamie Beck also has a few tips on optimizing the size and color you can get from your final image too. You can try both and see what looks best, though it's not exactly mandatory.

final product, but we hope you can produce something much more impressive! Just be sure to share your results and tips below.

Edit: Tested forum moderator Rallier has a few good tips in the comments on downloading and importing videos that can't be downloaded freely, including those from YouTube and other video sites. He's also produced a much smoother version of the final escalator image, which you can check out here!