• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Online Marketing Blog

Home > Marketing > How To Bring Your Images to Life with Cinemagraphs

How To Bring Your Images to Life with Cinemagraphs

May 24, 2015 by Adam Vowles 3 Comments

Reading Time: 5 minutes

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

  • 1 What tools do I need?
    • 1.1 How To Guide: How do I make a cinemagraphs?
      • 1.1.1 Create a video
      • 1.1.2 Import your video
      • 1.1.3 Find your still image
      • 1.1.4 Find your start point
      • 1.1.5 Find your endpoint
      • 1.1.6 Create your layers
      • 1.1.7 SAVE
      • 1.1.8 Here are some other examples…

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.

 

 

COCO1

 

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.

 

1

 

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.

 

 

3

 

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.

 

4

 

 

5

 

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.

 

6

 

 

7

 

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.

 

8

 

 

 

10

 

 

 

11

 

You should now have three layers.

  1. A transparent layer with brush strokes where the movement will be
  2. A still image
  3. 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.

 

 

12

The clipping mask will cut a hole in the still image layer allowing the video underneath to be visible.

 

13

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.

 

14

 

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.

 

15

 

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.

cloe

 

 

Never ending vodka being poured into a glass.

cine

 

Go forth and create!

 

Facebook Google+ Twitter Reddit LinkedIn Pinterest

Filed Under: Marketing

Reader Interactions

Comments

  1. Tom says

    September 23, 2015 at 2:36 am

    Saved as a favorite, І like your web site!

    Reply
    • Adam Vowles says

      October 11, 2015 at 1:12 pm

      Hi Tom, Thanks appreciate it.

      Reply
  2. Sade Calvo says

    November 2, 2015 at 2:54 am

    Say, you got a nice blog post.Thanks Again. Really Great.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

  • Home
  • SEO
  • Technical SEO
  • Link Building
  • Analytics
  • About Me

About Me.


Online Marketeer / Technical SEO / Blogger / Lecturer

Search.

Recent Posts

  • WordPress Speed Optimsiation: Step By Step
  • How to Find if Your Staging Site is Indexed
  • Index Management: A How-To Guide
  • How To Build Big Links With Infographics
  • How To Check If Google is Caching Your Website Correctly
  • A Guide to Content Marketing for eCommerce Websites
  • Crawl Rate Getting You Down? Have You Audited Your XML Sitemap
  • How To Build Links With Link Roundups
  • How to easily leverage JSON-LD for local SEO
  • How To Find Keyword Search Volumes Now Keyword Planner Is Hiding Them

Follow Me On Twitter

Girl in a jacket

Follow Me On LinkedIn

Girl in a jacket

Footer

Categories

  • Analytics
  • Link Building
  • Marketing
  • SEO
  • Technical SEO
  • Uncategorized

Easy Sign Up






Copyright © 2021 · Genesis Sample on Genesis Framework · WordPress · Log in

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish.Accept Read More
Privacy & Cookies Policy
Necessary Always Enabled