Published on: 6th May 2015Cinemagraphs are still photographs in which a small portion of the photo shows repeated movement. Cinemagraphs give the illusion that the viewer is watching a video, but they are normally published as an animated gif.
Wikipedia states that "They are commonly produced by taking a series of photographs or a video recording, and, using image editing software, compositing the photographs or the video frames into a seamless loop of sequential frames. This is done in such a way that motion in part of the subject between exposures (for example, a person's dangling leg) is perceived as a repeating or continued motion, in contrast with the stillness of the rest of the image."
The term "cinemagraph" was created by Kevin Burg and Jamie Beck, who used the technique to animate their fashion and news photographs beginning in early 2011. Examples of this technique are, however, older with known examples dating back to 2008.
To create a cinemagraph from still images seems like a daunting task, but if you can manage to keep to a very small number of frames, it is not so difficult. I try to keep it to 5 or fewer frames, which makes it quite manageable. To help you master the technique, I've broken it down into a series of steps.
Although you will use the background layer as your still image,it is easier to add the animation if the layers are reasonably aligned. To align the layers, follow this process:
Hide all the layers except for the background layer and "Layer1" (the layer just above the background layer).
Set the blending mode of "Layer1" to Difference. This will show you how much they differ. Use the move tool to move them - or at least some of the background parts - "in register". Once they are aligned enough, change the blending mode back to "Normal", hide "Layer1" and repeat the process with the layer on top of "Layer1". Do this for all the layers above "Layer1".
You are now ready to create the movement. Add a layer mask to each layer (except the background layer) andfill it with black. For each layer above the background layer, "unhide" the areas in which you want to show the movement.
To do this, use a white brush tool on the layer mask to reveal the areas of movement on this layer. Test themovement by repetitively clicking the eye icon of the layer you are working on to change its visibility. This technique is similar to the technique used by the early animators who had to flip their paper sketches to test their animation. Once you are happy with the movement, start working on the next layer above it. Repeat this for all the layers. All the layers above the "Background layer" will now have a mask attached to it, with only a portion of the layer visible through the mask.
Before we can start working on the real frame animation, we need to merge the visible parts of the masked layers with the "Background layer". As this is quite an involved set of actions, I decided to create a Photoshop script to perform this task. You can download the script as well as the installation instructions from the Download menu (click here to go directly to the download page).
Once the script is installed, you will find it in the Photoshop "File" menu under the "Scripts" sub-menu. It is called "Apply Masks for Animated Gif". Click the menu option to convert all the layers to normal layers without the masks, but with the animation applied.
From the file menu, select "Save for web and devices". Because it is already an animation series, the dialog window will have default settings for an animated gif. Click on the preview to see how it will look.
Finally click on "Save" to create your animated gif.
(If you have read up to here and did not click on a photo yet, do so to see them in larger format and also to browse through the rest of this gallery)