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.
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.
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.
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.
Step 3: Making the loop
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.
Drag the newly trimmed clip all the way left to the beginning of the timeline.
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.
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.
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.
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.
Press play and voila! You should have a finished cinemagraph.
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!
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: