Cinemagraphs are still photographs in which a minor and repeated movement occurs. Cinemagraphs, which are published in either animated GIF format or as video, and are the latest form of content becoming widely used across websites and blogs. They are a great way to keep the user engaged whilst they are on the site. Below we will show you how to create one, give it a go and begin making engaging content…..
For our cinemagraph, we’ve downloaded some video clips from the Internet.
To start you will need:
Tripod
Video camera/Download an online video clip
Photoshop
1. First you will need to find a video clip or shoot a video clip.
2. Open the file in Photoshop. File > Open > Browse Video clip and open
3. You will see your video clip on your timeline within Photoshop (as shown below)
(image: https://www.superdream.co.uk/wp-content/uploads/2015/06/img_1-1024×539.png alt: Cinemagraphs)
1. From the timeline, select the part of the image you would like to remain still.
(image: https://www.superdream.co.uk/wp-content/uploads/2015/06/img_2.png alt: img_2)
2. Drag the jpg into Photoshop and drag this layer above the video layer. You will see this layer on the timeline.
(image: https://www.superdream.co.uk/wp-content/uploads/2015/06/img_3-1024×171.png alt: img_3)
1. Create a new layer above all of the layers you have created and select the paintbrush tool. Paint over the part of the video you would like to animate, make sure this part is covered through the video clip.
(image: https://www.superdream.co.uk/wp-content/uploads/2015/06/img_4-1024×531.png alt: cinemagraph)
1. Keep hold of the command key and click on the layer youve used the paintbrush on. This should select this area.
(image: https://www.superdream.co.uk/wp-content/uploads/2015/06/img_5-1024×576.png alt: cinemagraph)
1. Drag the layer with the video, underneath the painted layer. Click the video layer and the mask icon circled below.
(image: https://www.superdream.co.uk/wp-content/uploads/2015/06/img_6-1024×541.png alt: cinemagraph)
1. Drag the layer with the video, underneath the painted layer. Click the video layer and the mask icon circled below.
(image: https://www.superdream.co.uk/wp-content/uploads/2015/06/img_6-1024×541.png alt: cinemagraph)
1. Click on the vector mask and hold down command and press I. This will reverse the vector mask so it is the correct.
(image: https://www.superdream.co.uk/wp-content/uploads/2015/06/img_7-1024×576.png alt: cinemagraph)
1. Click File > Save for Web
(image: https://www.superdream.co.uk/wp-content/uploads/2015/06/img_8-1024×576.png alt: cinemagraph)
1. Save the image as a ‘GIF’ and change the looping options to ‘Forever’.
(image: https://www.superdream.co.uk/wp-content/uploads/2015/06/img_9-1024×523.png alt: cinemagraph)
(image: https://www.superdream.co.uk/wp-content/uploads/2015/06/img_10-1024×576.png alt: cinemagraph)
That is it – you have created your cinemagraph. To view the animation, open up your GIF image in a browser.
5 ways to use cinemagraphs:
1. Social Media
2. Email
3. Digital displays/projection
4. Website
5. Banner Ads
5 reasons to use cinemagraphs
1. Big brands use them
2. They tell a story, rather than just a still image
3. Drive engagement
4. They’re easy to create
(image: https://www.superdream.co.uk/wp-content/uploads/2015/06/bird31.gif alt: cinemagraph)
(image: https://www.superdream.co.uk/wp-content/uploads/2015/06/bubbles31.gif alt: cinemagraph)
(image: https://www.superdream.co.uk/wp-content/uploads/2015/06/city.gif alt: city)
(image: https://www.superdream.co.uk/wp-content/uploads/2015/06/fish.gif alt: fish)