The GIF’s Sexy Sister: How to Create a Cinemagraph

Chances are if you’ve been on any sharing-based websites, you’ve come across an image with a graphics interchange format. Whether it was a hilarious clip of Homer Simpson being hit with the salmon cannon or Amy Poehler asking the most important of questions, you know what a GIF is, even if you didn’t know what those letters stood for.
Cinemagraph_HowTo_HomerSimpson Cinemagraph_HowTo_AmyPoehler

After their creation in the 80s, GIFs became the perfect format for condensing video clips into smaller, shareable files. The popularity of the GIF soon exploded and resulted in GIF madness across platforms like Tumblr, Reddit and 4Chan. They have become so common in our day-to-day Internet lives, that it isn’t unusual to use one in response to an email, Tweet, Facebook post—you name it. Reddit even has an entire page devoted to these! Just check out /r/reactiongifs for a slew of hilarious examples.

Jump forward a decade or two and enter animator Kevin Burg and photographer Jamie Beck, who saw something more to the humble GIF—something elegant and beautiful. Back in 2011, Burg used his knowledge of animation to begin creating striking works of art using frames from Saturday Night Live skits. He took an animated loop and laid it over a still background. The results were subtler and more mysterious than the typical GIF, but more interactive and eye-catching than a photograph.Cinemagraph_HowTo_LesTendrils

When the duo began publishing these snapshots, clients were no longer interested in Beck’s photography, but rather “that moving thing” unique to her and Burg. Realizing their work was far more than an animated GIF, the pair coined the term “cinemagraph” explaining, “there’s a cinematic quality to it … like a living photograph. It’s always a photograph first and foremost.”

So what’s the difference between a GIF and a cinemagraph? Aesthetics mostly. While Webster doesn’t have a specific definition for the term, many others have given their two cents as to what a cinemagraph is. The ever-trusted Wikipedia says cinemagraphs are “still photographs in which a minor and repeated movement occurs.” A GIF, however, is more like a video clip with a distinct beginning and end. Cinemagraphs should be able to double as a photograph when there is no movement, meaning, “The things that define a good photograph also define a good cinemagraph.” Lastly, a good cinemagraph can trick the eye into believing it’s looking at a live, moving image instead of just a looped video clip.

Cinemagraph_HowTo_Dogevia /u/the92jays
Cinemagraph_HowTo_SnowOwl

via everythingyoulovetohate.us

Cinemagraph_HowTo_GetLucky

via /u/akaast

Cinemagraph_HowTo_TarantinoTrunk

via Reddit

Need inspiration for your website or upcoming project? Check out these 10 great resources for designers!

The beauty of the cinemagraph is hard to deny. Luckily, with just a tripod, camera, computer and some basic Photoshop knowledge, nearly anyone can create an alluring cinemagraph. Here’s how:

How to Make a Cinemagraph

Before you start

  • I’m using Photoshop CC 2015 and a video clip downloaded from X Stock Video.
  • Have a good tripod ready: your camera needs to remain as still as possible while filming your subject
  • Think in terms of repetition: subjects that repeat naturally work best for cinemagraphs. For example, steam rising out of a cup of coffee will look more natural on a loop than something with a distinct beginning and end like two people high-fiving.
  • Don’t let subjects interact while filming: if you choose to have multiple items moving in your cinemagraph, make sure they do not overlap at any time. There must be enough room around the object in order to isolate a single motion later in Photoshop.

Step 1: Shoot your video

After choosing a subject to film and setting up your camera and tripod, it’s time to shoot the footage. For best results, your moving subject should not leave the frame. This ensures that you will be able to create a smooth loop later in Photoshop. The camera must remain completely still during filming, and you’ll only need about 10-20 seconds of footage. Remember, the best cinemagraphs can stand alone as a photograph, so make sure to frame your subject in an appealing way.

Step 2: Open in Photoshop

Again, for this example I used Photoshop CC 2015. When you open your footage, the animation timeline should automatically pop up. If for some reason this doesn’t happen, go to window > timeline. The timeline should now be at the bottom of your workspace.

From here, make sure to trim your video down to a length that works for your cinemagraph. The shorter the clip, the easier it is to work with.

Copy your trimmed footage into a new layer.

Cinemagraph_HowTo

Step 3: Making the loop

Pull the Layer copy 1 out of the Video Group 1 and make it your bottom layer. Cinemagraph_HowTo

Move the copy all the way left so the video clips begin and end at the same time.Cinemagraph_HowTo

Press play. Did your video automatically play on a loop? No? That’s okay. Go to the gear icon in the animation timeline and select loop.

Press play again. This time your video will continuously repeat. The problem now, however, is the end of the video. The transition between the end and beginning will look choppy and unnatural. To fix this, move the blue scrubber to the middle of your footage as if you’re cutting it directly in half.

Trim the bottom layer from the left until it meets the scrubber in the middle. Cinemagraph_HowTo

 

Drag the newly trimmed clip all the way left to the beginning of the timeline.

Cinemagraph_HowTo

Now trim the top layer in the same way, but starting from the right until it meets the scrubber in the middle. This time, bring the layer to the right until it meets the scrubber and the end of Layer 1 copy. Cinemagraph_HowTo

Press play. You should notice that the transition from the end of the clip to the beginning is smooth, but where the two clips meet there is a choppy discontinuation. To fix this, combine the two layers by dragging Layer 1 to the left of Layer 1 copy. Go to the transition icon in the animation timeline and add a crossfade by dragging and dropping the transition between the two clips. Photoshop automatically sets the transition time for one second, but you should play around with the length to create a smooth transition and avoid seeing a ghost image in the final product.

Cinemagraph_HowToCinemagraph_HowTo

Step 4: Isolate the movement

Now that you have a looping video, it’s time to quiet the rest of the image and give it the true cinemagraph feel. Do so by moving your scrubber to a single frame. This frame will become everything in the cinemagraph that’s not moving, so make sure the image is clear.

Hold down command + option + shift + E to create a still layer from the video. Bring the still layer to the top of all other layers.Cinemagraph_HowTo

Create a clipping mask on the still frame and use the brush tool to paint black over the area of your video where the movement occurs.

Cinemagraph_HowToCinemagraph_HowToCinemagraph_HowToCinemagraph_HowTo

Press play and voila! You should have a finished cinemagraph.

CinemagraphCandle

Step 5: Save

Go to file and select save for web. In the very top dialogue box, select GIF 218 Dithered. At the bottom, select forever as your looping option. Click done and upload to your website to add a little flair!

Cinemagraph_How-To

Congratulations! You’ve finished your first cinemagraph. Keep in mind that this process does not work for all video types or all cinemagraphs. The steps you take to get a finished product may vary depending on the effect you are trying to create.

Not looking to spend so much time in Photoshop? Check out these apps for creating cinemagraphs right from your phone! Good luck and happy looping!

Here for the eye candy? Here are some more sweet cinemagraphs:

c3576f7716dcde85ee7a4714d17bd4bf

by Julien Douvier

ef9b4fa965acc37f283c9c71af848f32

by Daria Khoroshavina

8ffd258dbc5440a1c3ef88f079575672 (1)

by Andrés Gomez Ortega

a8650c973cf500e35d8cdac1ce4ddf6a

by Julien Douvier

3 thoughts on “The GIF’s Sexy Sister: How to Create a Cinemagraph

  1. robertlendvai

    Hi Callie. Photoshop is a great tool but using it to create cinemagraphs instead of Flixel Cinemagraph Pro is like shooting film in a world gone digital. While both apps start with a video, Flixel allows you to simply paint the screen to reveal motion. It’s pure magic. You can also shared your cinemagraphs in HD quality and embed on web pages as video instead of a poor quality GIF file. Both Cinemagraph Pro for Mac and iOS are free to try. Apple awarded Cinemagraph Pro for Mac an Apple Design Award for it’s breakthrough design and easy of use. You’ll find 100s of HD quality cinemagraphs created by our community at http://www.flixel.com

    Robert | Flixel CMO

    1. Callie Budrick Post author

      Thanks for the information Robert! I will definitely check out Flixel and share it with those I know who are looking for a quicker way to make cinemagraphs.

  2. clintwilliams24

    Callie – great article! Thank you so much for posting. We were just searching for solutions outside of Flixel the other day. While it’s OK in some uses, it’s quite pricey and unless you want to drop $200, it’s a subscription that most likely won’t get used that often.What I love about your tutorial is that it shows how to do it in Photoshop, and in doing so, gives you infinitely more options than using Flixel’s app. Really looking forward to trying these steps out for myself and our team.

    -Clint

COMMENT