How to make real moving pictures (cinegraphs)

If you’ve glanced at fashion Web sites lately you may have noticed a striking new image — what appears to be a still photo, but with a small portion moving, seemingly in a loop.

The images are called “cinegraphs,” a name copyrighted by photographers Jamie Beck and Kevin Berg, and they first started using them in 2011.

One of the first examples was during Fashion Week in New York City that year (click on New York Fashion Week): http://cinemagraphs.com/

They seem to be gaining mainstream acceptance. Here’s a recent example from People magazine.

http://www.people.com/people/static/h/package/mostbeautiful2013/gif/index.html

Here’s a good overview article with lots of good links:

http://columbianewsservice.com/2013/03/wait-did-the-picture-in-that-ad-just-move/

I decided to show my multimedia news production class how to produce them, which required learning the process myself. (One of their best is the one of the two flags at the top of this post). There are two approaches, one using Photoshop (I’m guessing you could also do it in GIMP or Photoshop Express, not sure about Pixelmator) and the other using an app for an iPad, iPhone or Android tablet or smartphone.

Here’s an Android app:
http://www.makeuseof.com/tag/make-animated-gifs-and-cinemagraphs-android/

Here’s the iPhone and iPad equivalents:

Echograph.com
Cinegram.com
https://itunes.apple.com/us/app/cinemagram/id487225881?mt=8

The app approach is much simpler, though it doesn’t offer all the capabilities of Photoshop.

My guess is that we will see a lot more cinegraphs because coming up with a good one takes some thought, the sort of process that both video and still photographers enjoy.

First, you need at least two elements of your image that are moving. The goal here is to freeze one of them and let the other continue to move. But you need to be careful that none of the elements in the frozen portion of the image move behind the image you want to move. When an element is moving, it swings from side to side or up and down, revealing part of the background and if anything moves through that background, it will spoil the effect. So your moving element should be in front of something that is stationary. That was a problem in the third-from-the-bottom image below, where the runners ran behind the young woman. We had to freeze the right side of her skirt, since when it blew to the left, it would reveal the runners when they passed behind her.

Your frozen image also takes some thought. You want the reader to recognize instantly that some of the elements in it were moving but now have been frozen. In the bottom image in this post, e.g., it is not immediately obvious that the young woman is not just sitting very still. In the one above it, on the other hand, it’s clear that the person walking has been frozen while his shadow precedes him.

With an app, such as Echograph, the real headache is in getting the video into and out of your smartphone or tablet. That requires loading the video into your computer, opening iTunes, selecting the Apps window, and scrolling down to where data can be transferred via iTunes from your computer to the app, and then loading the video (the folks at Echograph are also selling an SD card reader that attaches to the phone or tablet, allowing you to transfer the files directly from your camera).

But the process of creating the cinegraph is idiot-proof. Open the app, open the video and hit Play. Stop when you find the frame you want to freeze and then, using your finger, erase over the part you want to continue moving. Voila! Instant gratification and you can share your creation via e-mail or social media.

Photoshop is harder, but offers more options. I didn’t realize you could import a video into Photoshop, but you can. Under the File menu, select Import and you can select “Import Video to Layers.” That puts each frame into a separate layer and you can even trim the front and back of the clip to reduce the file size. You then need to stack the layers, add a mask over the part you want to reveal and after a few more steps, create your cinegraph.

It’s a complicated process, but it offers two advantages over the app version. First, in Photoshop you can select your frames and then paste them in, in reverse order, so your video moves forward and backward to the beginning in a smooth-flowing loop. The app versions also play the video as a loop, but at the end of the clip, there is a jump cut back to the beginning. By reversing the frames, the image seems to be in perpetual motion. Secondly, in the apps, you use your fingertip to reveal the underlying image. That’s normally sufficient, but it doesn’t offer the pixel-level control of Photoshop.

Here are the detailed instructions:

http://blog.spoongraphics.co.uk/tutorials/how-to-make-a-cool-cinemagraph-image-in-photoshop

One other point – you absolutely must use a tripod. If one part of your image is frozen, any camera shake at all in the moving portion will be accentuated.

Here are a few of my favorite images from our class: