Cinemagraph tutorial… the animated gif renaissance of 2012

Posted by

The birth of the animated gif

Gifs have been around since the 1980′s and have seen many evolutions. And with the surge of the social content, the animated gif is serving a very viral position. Animated gifs are the new youtube video… on Tumblr. Its the jazz of the internet, everyone is talking, sharing, posting… And with every faze comes a fashion, today it is the cinemagraph.


“something more than a photo but less than a video.”

These ‘cinemagraphs’ have been coined by Jamie Beck and Kevin Burg as the in between photography and cinema. It is yet another use of animated gifs, there are many more, but it is the one I will be explaining how to make here.

So how do I make my own ‘cinemagraph’?

Well, there are a number of steps to making a ‘cinemagraph’, in this cinemagraph tutorial I will walk through it in simple steps.

STEP 1 (camera, lights, action)

The best result comes from the best footage, you can use your favorite scene in a movie, or you can take your own. Use the highest quality camera you can get your hands on, many of the small compact cameras have HD video options. Use a tripod, or the nearest table, your aim is have to get everything still except the one detail that will be the focus of the image. Keeping it away from the edge, and just a very small area will help when making the gif. The file size only increases with pixels that change per frame.

STEP 2 – import the footage

You can use a number of ways to import your footage and prepare it for photoshop. Formats such as .mov you can actually import it straight into into photoshop, open the animation tab in windows>motion (or if you are trying out the Photoshop CS6 beta, it will automatically open it in timeline) and select the part you want. Then there is after effects or final cut pro, so wichever way you find is best, just make sure you select as few frames as possible with the least loss of quality. Edit to your hearts content and export or render your selection.

Take a look at Jamie Beck and Kevin Burg’s images, in each one there is mostly one small looping movement. Hair blowing in the wind, just eyes moving. The beauty is in the mood they create with something so simple.

STEP 3 – Import frames as layers in Photoshop

Use the import frames as layers option in file>import, in PS CS6 it automatically loads your footage as separate frames in the timeline. Now you can really fine tune your selection, delete all the unnecessary frames. You can duplicate your frames and then reverse the order to get an infinite loop, in the pop up menu in the right corner of the timeline tab.

You can set the pause between each frame, you may want to do this to create expectation in the images, to get people guessing what will move in the image.

STEP 4 – The still

The trick behind the success of the cinemagraphs is that most of the image is usually a still. The still image you can edit, adjust, basically do what you like with it, and then mask the parts that move away. So copy and paste the frame you want to use as the still at the top of your layers. Create an adjustment mask, use the brush to erase (in black) using the brush tool the parts of your footage that move (use white to un-erase). Play the animation often to see if there are parts you need to erase further, or less. Make sure that it blends well with the bits that don’t move.

STEP 5 – Optimisation

You can desaturate the whole, or parts, of the image to reduce the amount of colors. Basically a gif can have a max of 256 colors per frame of the animation, so reducing the saturation will create less color information and a better result.

I decided to desaturate the whole image, and mask back just the beam of light and the reflection in the window.

You can also crop and resize your image to reduce the file size. PS CS6 has a great feature that from Lightroom, pretty neat!

STEP 6 – Save for Web (the gif)

The final step is to save your sequence as an animated gif image. Select file>save for web and select gif as the format. I have circled some of the important parts you need to be aware of, I brought the file size below 1mb by reducing the size of my image to 360px wide. That is the limit file size that Tumblr will allow you upload, so it is a good allround standard depending on what the use of your masterpiece is… The final setting I set was to loop my gif indefinitely by selecting forever from the selection. You can set it to play once or set a custom number.

And there it is, your very own animated gif you can share with the world… :)

p.s. don’t forget to #tag it

Your comment