Supercharge Your Images With Cinemagraphs


I’ve been playing around with Cinemagraphs quite a lot recently. For anyone that doesn’t know what a Cinemagraph is, it’s basically an image that is a kind of a hybrid between a photo and a video. If that still doesn’t mean much to you, have a look at the seagull image below.

Seagull Cinemagraph

You can see looking around the image that it’s clearly a static image but the seagull’s head is still moving. It’s a weird effect and it really draws you in, I can only put this down to the fact that your brain can’t quite process it – it’s not something that you would ever see in real life.

Get Filming

To start with, you’re going to need some video footage. After a lot of trial and error I’ve found that it really helps if you use a tripod or some other method to keep the camera very still (even minor camera motion can cause problems). The better examples of Cinemagraphs tend to have scenes that would typically have quite a lot of motion in different areas so that you can isolate one element.

Cinemagraph Pro

I’ve been using Cinemagraph Pro to create mine so far and it’s a really well put together app. You simply import your video and paint a mask over the area where you want to keep the video rolling. It’s really intuitive and I didn’t need to look at any tutorials or help files to get started. You can set a point where you want to take the surrounding still image from and it also has loop options that either blend the final frames to the first ones or plays the file back and forward.

Cinemagraph Pro

Alternative Apps

Realistically, you could quite easily achieve the same effect with a video app like After Effects or Apple’s Motion by simply layering two copies of the same video on top of each other, pausing the bottom one and then using a mask on the top one. In fact, it’s possible to do the process all directly in Photoshop itself but it’s not quite as slick as Cinemagraph Pro.

Exporting

You can export to either a video file, animated gif or an image sequence. Despite the fact that I want my final file to be an animated gif, I tend to opt for the video format. The video format gives me the ability to import into Photoshop and play with the size and any post processing that I may want to do. If you are using Photoshop to output large animated gifs you’ll quickly realise that it can grind to a halt if your file is high definition and has a lot of frames. I’d recommend tweaking the size before you choose save for web to avoid any crashes.

EDIT: I’ve been chatting with the guys at Flixel (creators of Cinemagraph Pro) about their upload option. This allows you to publish your file directly to their servers and provides you with the embed code to distribute as you see fit. It’s a nice option and saves you getting too bogged down with worrying about file size.

What Can I Do With Them?

That’s all well and good, but what can you actually do with a Cinemagraph? Ultimately they are just glorified images but they do have a lot of impact. They don’t require anyone to set them playing and they can add depth to static images. The file sizes tend to be quite heavy which has a bearing upon how long they can actually run for in terms of time but it’s a restriction that can be worked around. I’m yet to see many alive and kicking in the commercial world yet but I think that’s more to do with the fact that they’re still relatively new.


If you liked this post why not sign up to my (very infrequent) newsletter?