Cinemagraphs are a cross between a still image and video. They are created from a video containing some form of repeated movement. Normally, you are aiming for a subtle effect, where at first glance the image seems completely natural. Cinemagraphs are saved in an animated GIF format. This means that the user does not need to press play and the GIF plays on a continuous never-ending loop.
Contents
What tools do I need?
There are two main ways that I create cinemagraphs. In this example, you will need a minimum for Adobe Photoshop CS5 Extended and it must be the extended version.
If you don’t have Photoshop CS5 Extended, you can import the video to frames and then create layer masks. This method works well, but I prefer the following.
How To Guide: How do I make a cinemagraphs?
Creating a cinemagraph can be a little tricky but once you practice a few times it’s very quick and easy.
Let’s start from the end and introduce the star of this post. In this guide, we will be making a cinemagraph of Coco, one of my kittens. As you can see, three blades of grass are moving in the foreground, while the rest of the scene is completely still.
Create a video
An effective cinemagraph hinges on the creation of a decent video. I would recommend using a tripod. I use a small cheap one, roughly 20 cenitimetres.
Any small movement in the video can cause a whole load of problems later at the editing stage, and may even render your video useless.
Import your video
Once you have shot a video that you feel would be perfect for a cinemagraph, it needs to be imported into Photoshop.
File -> Open -> Select The Video File.
You will then be presented with the following screen. Below the main area is the video timeline. To the left-hand side, there are the video control buttons and a red progress marker at the top of the timeline. It is all pretty simple and straightforward.
Find your still image
The next stage is to find your still image. Spend some time and work on the video to find the perfect still image.
Scroll though the video until you find a frame that you like. In this piece, I am aiming for 3 pieces of grass moving with my kitten looking at them.
To do this, you could watch the entire video, or use the red progress bar to scroll through.
Find your start point
You then need to shorten the video length to start at the desired point. To do this, simply hover the mouse next to the start point and click and drag to the desired length. The red progress bar will stay in the same place, so don’t worry if the screenshot changes. Just move it back to the start.
Find your endpoint
Now we have the start point and a still image we need to shorten the video to find our looping movement. Click and drag the end of the video until you have a small amount of movement. You don’t need much movement, just the slightest amount will have a great deal of impact.
Create your layers
Once you are happy with the still image and movement that will bring your cinemagraph to life, it is time to integrate the two.
Create a new blank layer and create brush strokes where you want the movement to be.
You then need to duplicate the video layer and flatten the layer into a still image.
What we are trying to achieve is a still image with transparent gaps, and the video playing underneath.
You should now have three layers.
- A transparent layer with brush strokes where the movement will be
- A still image
- A video
Select the first layer and cut use the outline to create a clipping mask over the still image layer. You can then remove the first layer.
The clipping mask will cut a hole in the still image layer allowing the video underneath to be visible.
Now all you need to do is shorten the video down to keep all the frames the same length. To do this, just click and drag the layers in the video time frame below.
SAVE
Now for your moment of glory. Everything is ready. It is time to save your file.
File Save for Web
Choose GIF from the top drop-down
Change the bottom down-down from ‘Once’ to ‘Forever’
Quality Settings: I’ve found that GIFs are slightly unpredictable and have had them behave in different ways. The best advice I can give you is to test the different settings and see which one works best for you.
As this is a GIF file you will need to open it in a web browser to view it in all its glory.
…..and viola, your finished cinemagraph.
Here are some other examples…
Follow my Tumblr Cinemagraphs Blog for all my latest experiments.
My other little kitten: Cleo.
Never ending vodka being poured into a glass.
Go forth and create!
Adam Vowles
Latest posts by Adam Vowles (see all)
- A Guide to Content Marketing for eCommerce Websites - June 13, 2018
- Crawl Rate Getting You Down? Have You Audited Your XML Sitemap - February 28, 2018
- How To Build Links With Link Roundups - November 26, 2016
Saved as a favorite, І like your web site!
Hi Tom, Thanks appreciate it.
Say, you got a nice blog post.Thanks Again. Really Great.