Cinemagraphs: Animated GIFs Live Again!

Before there was Flash, the primary means of displaying movement on a web page was via animated GIFs, low resolution graphics with mostly clumsy transitions. Animated GIFs have mostly been relegated to retro-cult status, with very few serious uses for the format (although done properly, with the right graphics, they provide a quite passable substitute for a Flash banner ad). But that's changing, at least artistically, with the increasing popularity of a technique called "cinemagraphy" (not to be confused with the film-making term, cinematography). 

Cinemagraphs are animated GIFs in which only part of the scene moves. The effect can be quite subtle, and also quite striking and unexpected. Someone has referred to them as "Harry Potter style moving photos," and if you've seen any of those movies, you can probably relate to that description. Of course, a picture is worth a thousand words, and a semi-animated one is surely worth even more.

Cinemagraph by Jamie Beck
Photo by Jamie Beck; animation by Kevin Burg; posted on model Coco Rocha's blog

This is a great example of how a photo can be made even more striking with the addition of subtle movement, and the repurposing of the GIF format is brilliant: old and busted is made into new and hotness.

This example was created via a collaboration between photographer Jamie Beck and web designer Kevin Burg. This interview doesn't provide any insight into what techniques they used to create this specific image, but tutorials for making cinemagraphs are starting to pop up here and there

I'd love to try my hand at this, now that I have an HD camcorder. It appears that all you need is a suitable short bit of video and Photoshop (to be honest, while I think I knew that you could edit video in Photoshop, I've never tried it and had completely forgotten that fact). Sounds simple, right?

Actually, making an animated GIF in Photoshop is quite simple, almost point-and-click simple. The above example is a series of 35 layers, each displayed with an interval of .07 seconds, and set to loop endlessly. The key is to choose the right source image.

The downside to cinemagraphs is that they yield very large files. The one shown above is almost 400kb and I've seen some that are multi-megabyte in size. That makes them somewhat impractical for inclusion in the typical website design, although the size and composition of the image can be managed to yield smaller sizes.


Here’s my contribution to this new and fun technique!

Steve Marsel

Leave a comment. It makes us happy, and you can do it anonymously if you wish. We do review all comments before they're published, so it may take awhile before yours shows up. Don't take it personally, unless you're a spammer...then it really IS personal when we block you.

About this Entry

This page contains a single entry by Eric published on May 13, 2011 7:13 AM.

Some Actual Facts About Oil Industry Taxes was the previous entry in this blog.

Ant Band is the next entry in this blog.

Archives Index