In our easy-to-follow cinemagraph tutorial we show you how to use creative Photoshop effects to make animated photos for the web using Photoshop’s video tools.
With the latest DSLRs and compact cameras offering the ability to shoot both still and video footage, photographers and artists can find themselves caught between the two formats. Most of us are used to printing out the final piece, or uploading it to a website.
However, when it comes to video there’s a size issue, and apart from uploading it to YouTube or burning to a disc, there’s really not a great deal of options.
With the latest technology, however, we now have a perfect avenue for these clips, in the form known as a cinemagraph, which blends a still image with moving video to create a picture that is predominately still, with some animated aspects.
The technique is simple. Take a short video sequence, export the footage as stills, then use Photoshop’s video masking tools to isolate the part of the image you’d like to have animated, and then export the resulting frames in a web-based format.
Part of the beauty of this technique is the surprise factor of having a moving still, but also the ability to apply all the usual enhancements and effects you want to the image to stylise and get the look you’re after.
Cinemagraph tutorial: step-by-step how to make animated photos
01 Trim the video
Go to File>Open and select ‘Cinemagraph_Before.mov’ to open the video in Photoshop. Next, in the Timeline Panel, use the Trim tool to select a section of footage of about two seconds in length. Move the Playhead to the point in the video that you want to use as the still.
02 Apply a filmic effect
Now apply a Curves Adjustment Layer with a subtle S-curve to improve tone and colour, then a Color Balance Adjustment Layer to increase the green and blue to give the image a filmic look. Press Cmd/Ctrl+Alt+Shift+E to merge a copy of the layers.
03 Apply a mask
Add a Layer Mask, select a black brush, and paint over the balloon to mask the area. Make sure that each of the layers is clipped to the next (see Clipping Layers). Go to File>Export>Render to video and save it as an MP4. Now go to File>Import>Video frames to Layers.
04 Import video layers
Select From Beginning to End, tick Make frame animation, and click OK. In the Timeline at the bottom of the screen click frame 1, hold down Shift and click the last frame. Then, in the top left of the timeline, select Copy frames from the drop-down menu.
05 Reverse the sequence
Select Paste frames from the same menu to paste them after the selection. With the new frames selected, choose Reverse Frames. Select the first and last frames from the reversed selection and delete them. This will help to create a smooth animation.
06 Save for the web
Go to File>Save for Web, choose Adaptive from the Selective drop-down menu, tick the Transparency box and select Diffusion Transparency Dither in the menu below it. Leave the rest of the settings as they are. Click Save to finish. Once exported, the animation is ready to add to your web page.
Photoshop Tip: using Clipping Layers
The basic principles of video enhancement are the same as with images, but you’ll need to make sure that each layer is clipped to the next. You can check this by looking at the Layers Panel to see if there’s a small arrow indicating the clipping on each layer. To clip two layers together, hold down Alt, position the cursor between the two layers, and click.
Fake a tilt-shift effect in Photoshop
Photoshop Effects: recreate the look of a medium format portrait
How to mimic studio lighting for stylish portraits
Time lapse photography: how to shoot stunning sequences without any hassle