Animate your Stills - Digital Photo Pro

Cinemagraphs are in. If you haven’t heard the term, a cinemagraph is a still photo that has some part of it animated. These images are meant for web display, and they’re a great example of how digital means for displaying images are bringing new aesthetics and possibilities. A cinemagraph is different from a video clip in that only a portion of the frame is in motion, and often that motion is subtle. Think of a photo of a model wearing a long gown that’s flowing in the wind. The windswept look in her hair and dress might convey the sense of motion, but by animating the dress itself, you’ve created something very different.

*2) The Get Info screen. Click on Open in 32-bit mode.*

Cinemagraphs aren’t difficult to make, but you should plan it out to make the best use of your valuable time. The cinemagraph starts with a video clip. Plan the clip such that you’re able to isolate a moving element easily.

What’s easily? That depends on your Photoshop skills and the amount of time you want to spend making layer masks. You want to shoot the clip with the camera locked down on a tripod. Anti-shake fixes in video-editing software like Adobe Premiere Pro and Apple Final Cut Pro can allow you to shoot the clip handheld, but if you work from a tripod, you’ll save that editing step and you’ll be assured of good results.

3) With Photoshop in 32-bit mode, go ahead and open your clip. If you’re having trouble, make sure the clip is in a format that Photoshop can read like .mov. This is where you’ll make your initial edit to get your clip to a manageable size for the cinemagraph.

*4) To see the frames of the clip, you need to open the Animation Pane. Go to Window > Animation.*

*5) The Animation Pane opens below the image. Here, it’s in the timeline view. Be aggressive with your cut at this stage. A long clip will really bog down your machine.*

*5a) Choose a segment that shows the animation you want (in this case, the fluttering dive flag) and keep the clip short. Here, a five-second clip has been isolated from the larger clip.*

Versions of Adobe Photoshop from CS5 onward allow you to import video frames as layers. This is a huge timesaver because you don’t have to manually create a layer for every frame, but it also means that as you import the frames, you have the potential of making a huge file. As you plan your clip and go about making the cinemagraph, be a harsh editor. You’re probably going to want to stick with just a few seconds, at most. You’ll recall that 24 fps is the typical frame rate for movies so even a 3-second clip will be 72 frames (with 72 layers!).

Here are the steps to making your cinemagraph. This isn’t the only way to do it, of course. There’s always more than one way to do just about anything in digital imaging. This step-by-step will get you up to speed quickly and easily, though. And if you’re a Photoshop expert and you consider yourself a layering machine, by all means, get trickier with the layers.

*6) With your clip ready, go to File > Export > Render Video to prepare for the next phase.*

*7) In the Render Video dialog box, be sure to have Currently Selected Frames selected in the Range area, in this case, 90-239.*

8) Open your newly trimmed and rendered video. Go to File > Import > Video Frames To Layers. This is available in Photoshop CS5 and above, and it’s a huge timesaver. All of the individual frames have a corresponding layer.

*8a) In the Import dialog box, you can refine your clip even more, but if you kept it pretty short in the last phase, you can just go ahead and open From Beginning To End.*

*9) Once imported and opened, you’ll see the individual frames in the Animation Pane and each layer in the Layers palette.*

*10) Our trimmed clip still left us with a lot of frames and layers. Depending on your cinemagraph, now might be a good time to get even more aggressive with the trimming for length.*

*11) At this point, you’ll need to designate one frame as your static frame. This is the frame that will stand still with the animation happening within it. We’ve selected Layer 1.*

*12) Choose the frame and duplicate the layer.*

*13), 13a) We’ve named the layer, Static Frame.*

*13b) Move it to the top of the layer stack.*

14) Time to mask. Depending on your skills with layer masks and the actual portion of the frame you want to animate, you can mask in different ways. We’ve kept it simple here. The fluttering flag moves around quite a bit, even in this short clip. Because each frame in the clip is perfectly registered (see earlier note about using a tripod to lock down your camera), we can just use the elliptical selection tool to set the area where the flag will flutter.

14a) Fe
ather the selection to keep any oddities between frames from being obvious.

*15) Make the Layer Mask. Go to Layer > Layer Mask > Hide All.*

15a) Our layer mask on the Static Frame Layer. When we hit the play button (bottom left on the Animation Pane), the underlying layers will run under this Static Frame and the animation will show in the masked area. Select Forever in the Animation Panes playback controls to see the whole effect. The biggest problem most people have with a cinemagraph is having the animation show smoothly when it loops around. Choose your static frame and your last frame in the sequence carefully to avoid a skip. In this case, we selected a particularly challenging subject and it won’t be perfect.

16), 16a) Once you’ve tested and you’re satisfied, it’s time to export your cinemagraph as a GIF. Go to Save for Web & Devices and under presets, choose GIF 128 Dithered. And that’s it. Your finished cinemagraph is ready for posting.

Leave a Reply Cancel reply

LOGIN