How to make a cinemagraph in Photoshop

How to make a cinemagraph in Photoshop

Morgan Smith's Layout avatar

Cinemagraphs have been one of my favorite design trends for a few years now. They’re a stunning mix between photo and video, resulting in an elegant piece of art for your site that adds just a hint of mystery.

There’s also a key practical reason cinemagraphs are great: their small file size. It’s much easier to add little moments of movement to your site, as opposed to an entire video file! But beyond the logistics, there’s one final reason cinemagraphs are so magical: they’re actually a lot easier to create than you’d think!

Note: This tutorial is part of our 2019 Design Trends course! When you sign up, you’ll get exclusive access to a custom Photoshop template and video file to experiment with, plus a specific tutorial about how to use the file! Click here to jump straight to the sign up (or get access to the tutorial if you’ve already joined!)

Ready to get started? Pull up your chair, open up Photoshop, and follow these seven easy steps to create your own cinemagraph!

1. Choose your video file

To make a cinemagraph, you’ll start with a basic video file. Ideally you would shoot the video yourself so it can be specific to your company and perfectly match your brand, but if you’re just experimenting, downloading a stock video will work just fine!

For this tutorial, I’m using a video we shot in-house of a Jenga tour against a plain blue background. (You’ll get the same file if you sign up for the Design Trends course!)

layout by flywheel cinemagraph photoshop how to tutorial man shaking jenga tower

When choosing the perfect video for your cinemagraph, there are a few things you’ll want to keep in mind:

  • The camera needs to stay still the entire time. If you’re shooting the video yourself, dig out the old tripod to keep things as stable as possible. If you’re browsing stock options, look for as little movement as possible!
  • The movement you want to keep should be easy to isolate. If objects are crossing in front of each other or moving all over the screen, it’ll be harder to isolate the movement you actually want while keeping the background still.
  • The video should loop. To keep the cinemagraph timeless, it’ll need to loop. While Photoshop can definitely help smooth things out, it’s easiest to use a video that can easily loop, or has a reversible beginning and end.

Once you’ve got your video file, you’re ready to load it into Photoshop.

2. Import the video file

With Photoshop pulled up, head to File > Open. Select your file, and then you’ll see the video appear as a Layer. If it doesn’t show up automatically, make sure you can also see the Timeline by going to Window > Timeline.

layout by flywheel cinemagraph how to tutorial edit timeline

You’ll notice that the video file automatically gets put into a group, “Video Group 1.” You can leave it there, but if only having one layer in a group bothers you, feel free to pull the video layer out and delete the group! It’s not necessary. 

3. Clean up the timeline

Play your video file a few times – do you need the whole thing? If there’s extra footage either before or after the section you’d like your cinemagraph to focus on, go ahead and trim the file so it’s out of your way. You can do this by clicking the edge of the file in the Timeline and dragging it to the desired timestamp.

If your video file is long and you’re having trouble viewing the whole thing or getting to the exact spot you want, you can use the scale at the bottom of the Timeline window to zoom in and out.

Note: The part of your file that you trim will still be saved, so don’t worry about losing data here! You can always click and drag the edge back out, if you decide you need a certain part later.

layout by flywheel cinemagraph how to tutorial clean up timeline

My original video file ended with the Jenga tower falling over, which wouldn’t be easy to loop. So I cut that part out and trimmed some from the beginning as well, just to simplify the time I was working with!

Once you’re done cleaning up the Timeline, it’s time to hide the movement you don’t want.

4. Create the masking layer

Now you’ll create the “photo” aspect of the cinemagraph. Pause the video on the “image” you want to create, and then select the entire area. Copy and Paste this into a new Layer.

layout by flywheel cinemagraph how to tutorial create masking layer

If you hit play, you’ll notice that now you can’t see any of the video, because the still later is on top. Now it’s time to add a mask, which will allow us to choose the exact movement we want to show!

Go ahead an add a Layer Mask, either from the option at the bottom of the Layers panel or by going to Layer > Layer Mask > Reveal All.

layout by flywheel cinemagraph how to tutorial masking layer

5. Isolate the movement

Make sure you have the Layer Mask selected (instead of the layer itself) and then grab the Brush Tool. Just like any mask, brushing with black will conceal the mask (revealing the content from the layer underneath) while brushing with white will reveal the mask (hiding the content from the layer underneath).

For this example, I wanted the movement of the Jenga tower to show while the hands stay static. To accomplish that, I painted the mask black over the top of the tower and left the rest white.

layout by flywheel cinemagraph how to tutorial isolate movement

This allows you to isolate the movement, revealing only the motion you want your cinemagraph to show while keeping the rest frozen still. 

6. Export as a gif

Once you’re happy with your cinemagraph, it’s time to export it! Simply go to File > Export > Save for Web (Legacy). There are lots of options you can experiment with here, but the two most important ones are:

  1. Save as a gif (located near the top of the dialog box)
  2. Set the looping options to Forever (located near the bottom of the dialog box)

There’s always a little bit of a balance between file size and quality, so I definitely recommend experimenting with the settings to make sure you’re getting exactly the export you need.

layout by flywheel cinemagraph how to tutorial jenga tower wobbling gif

And that’s it! You’ve just created your very own cinemagraph to share with the world. How’d it turn out? We’d love to know in the comments.

Bonus: Free Photoshop template and video!

When you sign up for our free 2019 Design Trends course, you’ll get access to the video file used in this tutorial and a custom Photoshop template that demonstrates a simplified method for creating cinemagraphs!

How to use the Photoshop file

When you open this file into Photoshop, you’ll see the finished cinemagraph. You’re welcome to use it if you like, or you can play around to see how we set everything up!

Start by unmasking all layers, except for the “Base Footage.” That’s the original movie file we started with. If you hit play, you’ll be able to see how much the hand moves to shake the Jenga board!

Then we added the masking layer to isolate the movement, and let me tell you – choosing a geometric shape like this on top of a solid background made the masking process super simple! Depending on your video file, you may need to be a little more exact, but we’ll leave that up to you.

Next, we decided to focus on just a segment of the video that looped well together, to create that timeless effect. We left the whole file in there, however, so you could see the whole thing!

Last, we altered the Curves to correct for some of the color in the file. You may or may not need to do that, depending on your video, but remember: You can always continue editing once the cinemagraph is made!

And that’s it! You’ve got a cinemagraph that’s ready to be displayed on your site. Tell us in the comments below: What are you going to create with this trend?


Sign up for our free email course!

An email course featuring Photoshop files, tutorials, and lots of inspiration!

We’re exploring the latest and greatest trends in website design with a free email course – and you’re invited! From glitchy graphic effects to CSS grid card layouts, we’re diving into the trends of 2019 to share why they work and how you can implement them on your own site.

Comments ( 26 )

  1. Sarvesh Arora

    May 28, 2018

    Hey Morgan,
    Nice tutorial.
    Keep sharing such tutorials.

  2. Uk Tv Now

    June 12, 2018

    photoshop related article is great to read this very nice

  3. driversin

    June 15, 2018

    You have a decent point here!I thoroughly concur with what you have said!!Thanks for sharing your views...hope more individuals will read this article!!!

  4. Bluestacks

    June 15, 2018

    this articles is mostly helped to Photoshop users like me thanks

  5. CouchTuner Alternative

    June 16, 2018

    Thanks Morgan for sharing this useful guide. Loved it.

  6. ayan arora

    July 4, 2018

    very greate tutorial.
    thank you for sharing.

  7. asphaltnitromodapk.com

    July 6, 2018

    Thanks for sharing such a great article.

  8. Dash Cam

    July 7, 2018

    Its an awesome guide, thanks for sharing with us.

  9. Michael Peterson

    July 19, 2018

    You deserve a bucket of thanks.

  10. Basit

    July 22, 2018

    Thanks for sharing this amazing article with this incredible knowledge.

  11. Compressedpcgames

    July 23, 2018

    Nice article thank for share

  12. Jacksonville Jaguars schedule

    August 9, 2018

    Thanks for wonderfull post morgan

  13. Lawrence

    August 18, 2018

    Hi Morgan,

    Good site you have got here.. It’s hard to
    find high quality writing like yours nowadays.

    I seriously appreciate people like you! Take care!!

  14. Anonymous

    August 30, 2018

    Thanks for sharing this amazing article with this incredible knowledge.

  15. Anonymous

    September 4, 2018

    Good site you have got here.. It’s hard to find high quality writing like yours nowadays.

  16. Stan Sam

    September 5, 2018

    this article is mostly helped to Photoshop users like me thanks

  17. Rohan

    September 15, 2018

    Wow. Such a nice tutorial. I like the featured image too. Would try this in my photoshop.

  18. Anonymous

    September 19, 2018

    find high quality writing like yours nowadays.

    I seriously appreciate people like you! Take care!!

  19. Edgar

    September 19, 2018

    This article is very good, it is useful for Photoshop users.

  20. Seth

    October 5, 2018

    Well written. Thanks for great info :)

  21. Petter

    October 15, 2018

    You have provided a great value, as I am using photoshop since 2009 no one has ever discussed in this much detail.

  22. urmod

    October 17, 2018

    you are providing grate stuffs. thanku this hlpfull for me ..

  23. MaxDroid

    November 10, 2018

    Awesome! This article is exactly what I want to know

  24. clash of phoenix coc

    January 9, 2019

    Awesome! This article is exactly what I want to know

  25. Mike John

    January 12, 2019

    A good blog always comes-up with new and exciting information and while reading I have felt that this blog really has all those quality that qualify a blog to be a good one.

  26. Valentinstag 2019

    January 21, 2019

    I'm really enjoying the theme/design of your site. Do you ever run into any internet browser compatibility problems? A couple of my blog visitors have complained about my website not working correctly in Explorer but looks great in Firefox. Do you have any suggestions to help fix this problem?

Join the discussion