A lot of blogs have been talking lately about the amazing Jamie Beck’s animated photographs, which she started to post on her tumblr page.

There’s nothing new in animated .gif images, not even the ones using this concept of “static areas + moving areas”. The big deal about Beck’s work is using the concept artistically, and not humouristically as it’s usual.

But that ended up growing the interest of other artists, specially photography lovers, like my friend Fabiana, on the subject of how to do those animated photographs, that are being called, by Jamie, cinemagraphs.

First of all, a program that works with animated .gif images is needed. There is a lot of them, like Photoshop, Fireworks and even some free ones. And almost every image editing program nowadays supports editing images in that format. All you have to do is search for “how to make animated gif” together with your program’s name, and there will likely be a lot of tutorials showing up.

This tutorial is going to be very generic on that aspect, not specializing in any specific program, it can even be applied in contexts other than an animated GIF image…

1. Obtaining the images that will be used: For the “artistic” use of the concept, subject of this post, record the scene from which you wish to make the GIF keeping the camera and other elements of the scene you wish in the most still position you can.

2. Transforming the video in animated gif: There are several ways of doing this. There are programs and websites that do that automatically and for free, like GIFSoup, but not always with the desired quality. One of the ideal ways for high resolution GIFs like Jamie Beck’s is explained on this link, using Photoshop.

3. Getting the animation to repeat “smoothly”: This part can be more or less complicated depending on the situation. The main tips are:

– Compare the first frame (a frame is every image that composes an animation and shows up for a determined amount of time) with the last one, and delete this one if it’s not similar enough to the first one. Repeat the procedure until you find a frame similar enough.

– If the above hint didn’t solve the problem, a trick that may work in some occasions is to make the “reverse” animation right after the regular animation. That is, start copying frames prior to the last one and add them to the end of the animation, till you get to the first one, creating a “back and forth” feeling that sometimes can’t even be noticed and makes the transition between repetitions completely seamless.

– If the transition between one repetition and another still isn’t seamless enough, try to reduce the duration time of the last frames, so the transition will be faster.

– If nothing works, it might be necessary to really edit the images of some frames the most different ways, from the easiest to the hardest…

4. Keeping specific areas of the animation “still”: Pick a frame that contains the still parts the way you want, copy its image and erase on it the areas that will move. Make this image repeat for all the other frames, overlapped to their original images. That will “cover” with a static image all that you do not want to move. The way of getting this done may differ depending on the software used.

Save the animated .gif according to the instructions for your program, and voilá, you’ve made a cinemagraph =D.

If someone has any doubts about the creation and edition of animated .gifs on a specific program, just ask on the comments and I’ll try my best to help =).