How To Make A Cinemagraph

It's a still image...but it moves!

Cinemagraphy is a recently-developed technique that selectively causes some parts of a photograph moving. It's not quite video, it's not quite still photography, and it's uniquely oriented towards web use.

by Pontus Edenberg

The technique used to create a cinemagraph relies on combining multiple images of moving subjects with a static background and/or foreground, creating a dynamic image where part is moving while the rest remains static. The creative possibilities are endless!

Cinemagraphs were developed and launched by Jamie Beck and Kevin Burg. Cinemagraphs have the potential to spice up web images with moving photographs for advertisements, e-commerce, etc.

How do you create a cinemagraph? Here is a tutorial that shows, step-by-step, how you can easily can make your own cinemagraph from a movie file like an .AVI or .MOV with the help of Photoshop CS5.

The output will be an animated .GIF file. Here is an example of a final result, shot with a Canon Rebel T3i:



To make a cinemagraph, you need a video that's a couple of seconds long It should be shot in a way so that it is possible to make a loop of an isolated part of the image that is intended to move.

1. Open the video and open the animation palette from Window > Animation. You can now easily play through your video with the controls going down the left side of the palette. Then, choose a part of the video where you can find a suitable loop for the moving part. Move the left and right handles to focus on the part of the movie will be used to make the cinemagraph.



2.In the animation palette menu choose Trim Document Duration to Work Area to cut away the part of the movie that you won't be using. You now have the movie for the cinemagraph.


3. Look through the frames in the timeline in the animation palette and choose the frame you want to use as the static part of the cinemagraph. Copy that frame to a new layer.  Make sure that you have that frame active on the screen and go to Select > All, then Edit > Copy Merged, and finally Edit > Paste. You have now created a new layer with a still photo on top of the movie layer.


4. Now you need need to indicate the portion of the picture that should be moving. This is done by basically making a hole in the new still layer. An easy way to do this is by creating a Layer Mask with the help of a Quick Mask. To make a Quick Mask, go to Select > Edit in Quick Mask Mode. Then use the brush tool in the tool palette and paint the part of the picture that should move. The moving section will appear in red.


5. When you are done, make a selection of the marked areas by once again go to Select > Edit in Quick Mask Mode. You now have a selection from which we can create a layer mask. You do this with Layer > Layer Mask > Reveal Selection.  A Layer Mask is now added to the layer of the still photo. Play your sequence again to make sure that the cinemagraph turns out the way you want it. If something is wrong with the movement in the picture, just back up two steps and fine-tune your mask. Learn more about Layers and Layer Masks.


6. The next step is to turn your cinemagraph into a .GIF. Use the menu in the animation palette and choose Flatten Frames Into Layers. This flattens your still layer and mask with your movie layer, and creates one layer for each frame.



7. Then, delete the layers of the still picture and the movie, since you don’t need them anymore.


8. In the menu in the animation palette, choose Convert to Frame Animation, and then from the same menu Make Frames From Layers.



9. You should now have each frame visible in the animation palette. Setting the delay of the frames to get the right speed for your cinemagraph can be a bit tricky. By default, Photoshop adds a delay to the first frame, which you need to change. Different browsers can also display a delay of 0.00 in different ways, which means that you can’t control the speed. You therefore need to change the delay for the frames. Select all frames in the animation palette, and click on the time under one frame and the option Other and enter a delay. For this cinemagraph, I found it worked best with a delay of 0.06 seconds.



10. Under the first frame you also need to set the loop count. Click where it says Once and change it to Forever.



11. To save your cinemagraph, go to File > Save for Web & Devices. This is where you can also change your image size so it is suitable for the publishing you are looking for. When you are done just click Save and name your .GIF and you have made a cinemagraph!

Here are some more cinemagraphs. Good luck in making your own cinemagraphs.



Looking for more inspiring examples? Click here for more cinemagraphs.

Share this: 

Facebook Comments Box

Subscribe to our email updates is top rated for customer serviceHACKER SAFE certified sites prevent over 99.9% of hacker crime.