Summary
Cinemagraphs are a recently invented and popularized form of a seamlessly looping GIF or video in which still photography and video are combined to make a dynamically interesting visual that tells the story of a moment in time. With tips on how to craft a good animated story from Liz Blazer’s book Animated Storytelling: Simple Steps for Creating Animation & Motion Graphics, I’ve created 4 brief motion stories from a day in my life in the form of cinemagraphs using Adobe Photoshop and After Effects.
Reading & Writing
In Animated Storytelling: Simple Steps for Creating Animation & Motion Graphics, Liz Blazer says that the blessing and the curse of animation is that it’s limitless. Pigs can fly, toasters can talk, or cars can fall in love. Anything your imagination can dream up you can show. But with all these options the process of crafting a good story can become difficult.
Audiences enjoy refined stories that feature logical, well-crafted creative choices that support a central theme well, not just a hodgepodge of cool, but disjointed ideas from your mind. Before you begin animating you must plan out the story you want to tell and how you want to tell it.
The first step is to apply limits to your animation project with story structure. Your story structure can be either linear or nonlinear, but no matter which route fits your idea better both offer helpful, specific guides for crafting an effective story.
Linear Story Structure
Linear storytelling is the more traditional of the 2. To create a linear story, you use the classic three-act structure to build the arc of your story. Blazer explains that this story structure plays out as follows:
- Act 1: Introduction of your main character, specifics about who they are and their life, and a problem they have
- Act 2: Your main characters makes attempts to overcome their problem, faces hurdles that make sense because of the specifics you’ve already shared about them, and reaches a point where the problem almost seems impossible to solve
- Act 3: Your main character resolves their problem in an unexpected way that communicates the overall theme or message of the story to the audience
Each act of your story should consist of beats – all the moments you think need to be included to logically and clearly move your narrative from one point to the next. Blazer suggests mapping these out using Post-Its with one beat written or drawn on each piece of paper. Arrange these in 3 rows, one for each act, reserving a 4th row for anything you don’t have a place for at first.
Then rearrange, add, and remove beats until you find the order that tells your story best and makes the most emotional impact for your audience. You don’t need to know yet how you plan to show a beat in order to include it at this stage. What’s important is to just map out all the ideas you have to create the beginning of an organized, linear story structure.
Nonlinear Story Structure
Nonlinear storytelling allows you to tell stories outside chronological form or without a traditional arc. Even though this form may seem like you have fewer rules to follow, it’s even more important to apply a structure to your story if its nonlinear, or risk chaos. There are many structures you can follow, but 4 good options to start with include:
- Book Ending: Ending your story back in the same place it began after doing whatever you would like in between
- The Countdown: Constantly building the drama of your story from beginning to end with each beat escalating things one step further
- The Puzzle: Hiding important information from your audience then revealing it in pieces as you progress through the story
- The Beaded Necklace: Holding the otherwise chaotic elements of your story together with sound, music, or a voiceover
Storyboarding
Once you have your story structure worked out, the next step for your animated story is to determine the details of how you’re going to visually tell it. Storyboarding consists of creating a series of individual frames of the action you plan to show in your animation. Blazer explains that storyboarding before jumping into full-on animation offers the benefits of saving time and money in a project’s process and helps you to communicate and excite others about your project.
Storyboarding is done in phases with each phase featuring frames with increasing detail. You begin with rough frames called thumbnails in order to make sure first and foremost that your story is in the right order and clear. These can be as simple as stick figures. You then revise your thumbnails with brutal honesty, adding anything vital that is missing or eliminating anything you think isn’t absolutely necessary for telling your story.
Once you can clearly and easily share your narrative using your thumbnails you can move on to creating storyboards. These frames feature more details like a character’s clothes, objects in the environment, etc. that you think need to be included to tell your story well. You should also write some dialogue or a short explanation of what’s happening below each frame.
In terms of fidelity, storyboards can be drawn at whatever level works best for your project. They don’t have to be exact replicas of your final product. You then go through another revision process with your storyboards just as you did with your thumbnails. You may even want to present your boards to others to get helpful feedback before finalizing them.
The hope of all this revision now is that it will eliminate opportunities for problems later during animation. By the end of this process, if a stranger can understand your story from just looking at your frames then you are in good shape.
In terms of actually drawing your storyboard frames, you should take into consideration a few best practices for creating the best shots possible:
- Shot composition: Use visuals to reveal or withhold information from your audience by strategically choosing when to use close-ups and when to use wide shots of your subject.
- Framing: Offer a dynamic and artistic shot to keep your audience interested. Divide you shot into six equal quadrants using the rule of thirds and place your subject in an off-center position such as the intersection point of the quadrants, to achieve this.
- Staging: Strategically choose the position of your subject and other objects in your shot to create a visual and conceptual hierarchy between them that supports your story. Do not clutter a shot with unnecessary visual information. Staging can add depth both to the physical environment you are creating and to your audience’s understanding of your story.
- Continuity: Make sure your story flows naturally from shot to shot. Check that you’re following spatial continuity (your world’s established rules are obeyed in every shot), temporal continuity (your story’s order is logical for what it is), and directional continuity (physical direction of characters and objects are maintained from shot to shot).
- Timing: Know how long your animation needs to be and make sure everything you present in your storyboards can be presented in full animation in that timeframe. Create an animatic by placing your storyboard frames on a video timeline to get a sense of the timing of your whole story.
Research to Inform
- Watching this cinemagraph I fully expect this car to take off flying out of the frame at any second, but it never happens. The feeling of suspended anticipation this creates really makes me feel transported to a specific micromoment that’s part of a larger story. Is this car at the starting line of a race? Is this someone getting ready to drive off in anger? Is someone trying to impress or intimidate someone with this action?
2. I find it pretty dynamic that both the still and moving elements of this cinemagraph portray motion. My eyes are initially drawn to the continuous movement of the train, but then noticing the frozen nature of the traffic motion blur below it is actually what tells me this isn’t just a video, but something in between a photo and a video. Watching it I start to feel like someone’s trying to tell a story of the brief moments of intersection between 2 isolated, bustling lives.
3. I love the detail put into this cinemagraph. Not only is the fan animated, but its shadow on the oven is as well. The tapping fingers on the glass of milk communicates an overall feeling of waiting. Having seen the movie “The Professional,” of which this footage is from, many times I can say this cinemagraph captures and suspends well a great example of the rather mundane, but artistic scenes that humanly punctuate serious and violent action in the film.
4. I appreciate how naturally the blowing of the jacket in this seems to loop. I’ve never seen the movie “Seven,” of which this is from, but the motion in this cinemagraph makes me feel like these 2 characters are in an open or empty feeling environment in this moment.
5. The subtle movement of this field of flowers swaying with the wind really makes me feel the peaceful, happy experience this woman is having in the moment captured here. It’s also a nice example of how a lot of subtle movement can be juxtaposed against a singular still element in a cinemagraph instead of just animating a single element in an otherwise still image.
6. This cinemagraph made from “V for Vendetta” footage reminds me of the idea of creepy paintings following you with their eyes. Even though we don’t move much besides our eyes when we read, isolating that movement here creates an almost unnatural, or unsettling focus to the nature of this action. It’s almost as if whatever she’s reading is so powerful it put her in a trance.
7. I enjoy the subtlety of this cinemagraph’s motion. It feels peaceful and natural to see the water move and the reflections within it shimmer until I realize the boats in the water aren’t moving as well. I think it was a smart decision to isolate the water from the boats. It would have felt much closer to the experience of just a video rather than the magic of a cinemagraph. The boats help serve as a guidepost for there being something unusual about how this moment in time is being shown.
8. I like this cinemagraph not just because its a good example of how to turn a finite action like pouring liquid into a magical infinite action, but the seamless loop of the lemon slice movement I find to be impressive. It’s moving around in what seems to be a rather random, chaotic way yet I can’t pinpoint where the starts or ends.
9. The fire in the background creates a cozy feel for this cinemagraph, but it’s the eternal dripping of the milk that I think helps communicate this moment best. I know I’ve been here when dunking cookies, waiting for the liquid drops to slow enough to rush the cookie to my mouth without making a mess. Sometimes the wait for that delicious bite feels so long. Here that cruel delay has been suspended in time forever bringing with it all the memories of this common experience.
Create
Photography team Jamie Beck and Kevin Burg pioneered the concept of cinemagraphs as well as coined the term. Burg thinks of a cinemagraph as, “a photograph that has a living moment inside of it.” With this in mind, I started thinking about the moments in my normal life that might have motion I could capture in a cinemagraph.
Beck says learning to make cinemagraphs means retraining yourself to notice all the motion around you, and I’d have to agree with that. There is a learning curve to this process. At first, I struggled a bit for ideas, but eventually, I was able to start seeing all the moments of motion in my life that make up my lived experience. The following 4 cinemagraphs represent a few micro-stories in the overall story of one ordinary day in my life.
1. Using iPhone XR Footage and Photoshop
Starting in the late morning, I captured the sweat rolling off my glass of ice water while I sat working on my deck in the sun. I was inspired by the cookie dunking cinemagraph from my research to isolate just the movement of a single bead of condensation running down the side of the jar. I wanted to capture that quiet, meandering feeling of the hot summer sun bearing down – just one beat in the story of my day
I used an iPhone XR to capture this footage then used the timeline option in Photoshop to create my cinemagraph. After choosing the still from my video that I wanted to use, I cut out just the path of the single condensation bead using the quick selection tool to create a layer mask. I then chose just the 5-second section of video with the bead falling, cut it in half, reversed the order of the 2 halves, and added a crossfade transition between them to create a seamless loop.
I worked specifically on getting just the right amount of timing between bead drops in order to make the looping motion feel relaxed and natural. I didn’t want the motion to loop too quickly and feel more manufactured like a regular GIF. I also added a warming photo filter to the image to bring out more of that feeling of a hot summer day.
I know this is a moment from my day, but my marketing brain also says it could really be a moment from many people’s days, a moment relatable enough to set the mood in an email, on a social media post, or on a webpage for a brand. Maybe for the Ball Jar brand or a drink brand? It could be a nice subtle way to set the mood and inspire aspirational thinking in customers.
2. Using Mirrorless Camera Footage and Photoshop
In the early afternoon I shot footage of my boyfriend working out using his road bike and trainer on our deck. He used to only use this for winter workouts in our basement, but since the start of the pandemic and remote work he’s been using it on our deck off and on during lunch or other breaks to keep in shape. Inspired by the car cinemagraph from my research I thought it would be fun to isolate the movement of the back wheel of his bike.
Since I was shooting in the same place and similar lighting as I did for the previous cinemagraph, I decided to capture this footage using an Olympus mirrorless camera to see how it compared to the iPhone XR’s camera. I was able to get a little higher quality with the camera versus the phone, but the file size was bigger for the camera footage so I think it’s really just a tradeoff. Which is better really depends on your project’s purpose and the shot you’re looking for.
I used the same process in Photoshop as I did for the water jar to create a cinemagrpah. Because I was creating an infinitely continuous motion with no beginning or end I was able to choose just 2 seconds of footage to loop, helping keep the file size for my exported GIF smaller and better optimized for web. I chose a still where the feet are somewhat motion blurred because I was inspired by the train cinemagraph from my research to create a visual depicting both still and video motion.
Once again I couldn’t help but wonder if this would be good for promotional use for the trainer brand. I could see this as an interesting hero image on a webpage about ways to use it.
3. Using Mirrorless Camera Footage and After Effects
In the early evening, I went for a walk at a local pond and waterfall. I captured footage of my boyfriend – my ever-willing model – playing with a leaf in the water with the mirrorless camera. I wanted to see if I could achieve the eternal pouring effect of the lemon water GIF from my research using the waterfalls in the background.
This time I made my cinemagraph using After Effects. I’d never used After Effects before so right away this process was harder for me than the process in Photoshop was. Once I oriented to the program it was pretty simple to choose the still I wanted and create a new layer with it. I used the pen tool to cut out a section of the still and create a layer mask showing the waterfall motion from the video layer. Compared to Photoshop’s quick selection tool I didn’t feel like I had as much detailed control over the shape of the mask I created, but that may have just been because I’m new to the software.
To create the seamless looping for my cinemagraph I first tried the popular technique of copying and pasting my chosen video clip and time reversing it. However, it was very noticeable that my waterfalls were flowing up for half the time.
I decided instead to use a technique closer to that which I used in Photoshop. I split the first third of my video clip off and created a new layer with it above my older video layer. I then moved that clip to line up with the end of my original video clip. Finally, I added a keyframe at the beginning of my the newer video clip set to 0% opacity and another keyframe at the end of the clip set to 100% opacity. This way a crossfade effect happens that makes the end of the video clips line up more seamlessly with the beginning.
The biggest problem I had using After Effects was exporting a movie file small enough in size to create a good quality, decently web-optimized GIF in Photoshop. Exporting a file directly from the render queue in the program produced a giant file over 1 GB. Using After Effects Media Encoder I was able to export with the h.264 codec and a medium bitrate which helped a lot. However, I still had to go back and limit my overall video length to just a second and a half to produce a 400 KB movie file which in Photoshop I was able to use to create a 1 MB GIF that maintained the quality I wanted.
If I was able to upload automatically looping videos directly to my blog the way I am GIFs then I probably wouldn’t have had such a problem using After Effects to create a cinemagraph. But for my circumstances, After Effects made the process a lot longer and more frustrating than Photoshop did.
In terms of how this cinemagraph concept could be used, this waterfall is a pretty popular spot in my town so I could see something like this being used on the city’s tourism site or on other tourism-related promotions.
4. Using iPhone XR Footage and Photoshop
In the late evening, I captured one more piece of footage of my boyfriend playing his Switch, as he often does at night. Inspired by 2 cinemagraphs from my research – the one from The Professional with his fingers tapping the glass and the one from “V for Vendetta” with her eyes moving – I was curious if I could create a cinemagraph featuring human movement rather than object movement.
I actually shot this footage with both the phone and the mirrorless camera to see which could get the better shot in low lighting. The phone footage actually won out. I then used the Photoshop process to create my cinemagraph because it was my preference at this point.
It was a little trickier to pick the video clip I wanted to use for this one in comparison to my other cinemagraphs because I had to look for movement of the thumb that was naturally repetitive rather than asymmetrically jerky so it would be easier to loop. I also had to avoid any movement that slightly jolted the whole video game console or else my layer mask wouldn’t work.
I’m actually really happy I was able to achieve a pretty subtle, natural loop of the thumb motion with this. There’s something kind of creepy that I love about only seeing motion in one small part of a human body while the rest is frozen in an image. This could be quite a different way to advertise a gaming console like the Switch or a particular video game.
Reflections
Thinking back on my experience creating my first cinemagraphs, I think the biggest thing that helped me was coming up with more ideas than I needed and continuously being open to new inspiration from the world around me throughout the process. I probably thought up at least 10 ideas before I started capturing footage of anything. And a good thing too.
The first footage I actually tried to create a cinemagraph from was of dishes being washed. It turned out the water from the faucet was just too opaque when it flowed out to offer interesting movement and it was impossible to isolate the movement of individual soap bubbles in the sink.
Not all motion is going to be suited for a cinemagraph. That’s what makes finding the right subject for this form like solving a puzzle. When the pieces start coming together it can be really exciting because you’ve discovered a whole new way to share the experience of a brief moment, suspending it in time to make it a story unto itself.
