The Power of the Cinemagraph: Turn your Images into Animated GIFs

GIFs – The good old animated image has come a long way! Now the once ugly duckling of animation has become a show stopper and art form in itself.

Described as the grown-up version of the animated gif, Cinemagraphs – a term coined by the US photographers Kevin Burg and Jamie Beck – are fast becoming the new black of animation in digital. With Flash gone, dead and buried we had to go somewhere!

So What is a Cinemagraph?

Cinemagraphs are more than just a fancy animated gif. I’ve heard them described as a number of things:

A living moment in an otherwise still photograph.

A moving photo. They exist between video and stills.

It’s somewhere between a photo and a video, a piece of artwork that seeks to perfectly capture a fleeting moment in time.

Still photographs in which a minor and repeated movement occurs, forming a video clip. They are published as an animated GIF or in other video formats, and can give the illusion that the viewer is watching an animation.

Cinemagraphs convey feeling and mood. If you look at any of the work from their creators, who are absolute legends, you’ll see each piece has a story.

Like this one:

Cinemagraph from Cinemagraphs.com

Everything is still except for the flames in the fire, and if you look closely, there is a tiny flickering reflection in the saucer of the teacup.

You truly must check out their cinemagraph website and to read a little more about them their company website.

How are GIFs made? (You can make them too!)

People like Kevin Burg and Jamie Beck put love, sweat and tears into the making of their cinemagraphs – this is evident in the quality of their work. Each frame of the animated gif is clearly thought out. And because cinemagraphs are, in fact, a loop – with the beginning matching the end – they’ve spent the time to ensure these are perfect.

There are quite a number of amazing apps out there to build them, but my favourite is a cheap little photoshop plugin.

It’s down and dirty, simple to use and will get you quite a nice result like in this example I’ve created below. I think we spent more time getting the props right than we did creating the cinemagraph.

Or if you really want to get into the nuts and bolts check out this great (and quite entertaining) tutorial from Phlearn.

Uses for cinemagraphs

I’ve seen cinemagraphs used in websites to create drama and advertising, from campaign banners to microsites. I think one of the best uses for the humble animated gif is in email campaigns. Email clients (the piece of software the end user uses to read their emails) are notorious for being archaic when it comes to them accepting anything but good old html (and basic html at that!).

After all these years, we still can’t reliably insert a video to play within an email and know that it will work 100 per cent of the time. But what all email clients can do is display a gif. So the cinemagraph has given some class to the animated gif and people like the folks at Twitter are using these to create impressive, eye-catching and I wanna click on what you’re selling me email campaigns.

GIFs Tips and tricks

1. File size
   Just because you can doesn’t mean you should! Even though you can output some crazy, crazy big files, when you are producing animated gifs it’s best if you still compress as much as possible. You can limit file size by making them dimensionally smaller, keeping the animation to a small area and optimising for output either via the photoshop save for web palette or a great little tool like ImageOptim.
2. Locked off camera view
   Get a tripod or have an incredibly steady hand. Cinemagraphs need to have a locked off view, so the movement is part of the subject matter rather than the whole frame of the image.
3. Loop-d-loop
   Remember cinemagraphs are a looping movement so make sure you pick a piece of video or create an effect that can be looped. The first frame and the end frame need to match otherwise you end up with the jitters. Take a look below at one of our attempts; my hand just couldn’t quite get back to the original spot.
   
4. Be subtle
   Subtlety is actually the key. Most cinemagraphs have movement that is subtle – pay attention to the smaller details like shadows that are cast, as in the example of the fireplace above.

Cinemagraphs are stunning, easy to produce with a few tips, tricks and know-how. Why not have a go?