Motion Design

Motion Across Media Module II: Mixing Motion

Have you ever seen those cool images on social media in which most of the frame is a still photo except one part that is moving, like the water or clouds? That’s called a cinemagraph and this week I discovered that they are deceptively difficult to do well.

Reading

This week’s chapters in Animated Storytelling by Liz Blazer covered an overview of the art of storytelling, storyboarding, and how to properly use color in animation projects.

Chapter Two: Storytelling

Blazer begins the chapter by discussing how the limitless worlds that can be created through animation are one of the medium’s greatest advantages but tempers that statement by reminding the reader that a truly talented storyteller knows how to reel in their imagination and be intentional about their choices.

The chapter then goes on to break down the structure of the story, which includes:

  • Beats, or the active steps that move the story forward
  • The three-act structure – the most common form of story structure which includes the character having a problem, the character working toward a solution, and the (often surprising) solution.
  • The non-linear structure, which begins with inspiration instead of a storyline, and then structured in one of the following ways
    • book ending – ending a story where it began
    • the countdown – creating an upward build in drama without any de-escalation
    • the puzzle – which fills in bits of information along the way until the story becomes clear
    • the beaded necklace – which uses sound, music or voiceover to hold to storyline.

Chapter Three: Storyboarding

Blazer describes storyboarding as “building your visual script.” Created by Walt Disney in the 1930s, storyboarding is the act of using rough sketches to help visualize your story before you set down to the nitty gritty of animating every cell. At a time when animation was an (even more) time consuming and expensive process, storyboarding allowed Disney to ensure all of his animators were on the same page and understood the vision for the entire project.

Storyboarding allows the animator to map out the action of the project and make revisions if there are holes in the storyline. It also allows others to more clearly understand the animator’s vision, which can be very helpful in pitching an idea to others.

Chapter Four: Color Sense

In this chapter, Blazer discusses how choosing the correct color palette can enhance the story. She suggests that the animator create a color script to ensure that the color choices fit with the story being told. Choosing a single color that represents the story and then building a palette that supports that main color will ensure that the feeling the artist is trying to convey don’t get lost.

Blazer also offers specific tips on using color that include:

  • Limit your palette – since animation tends to be fast-moving, too much color can be overwhelming or confuse the eye of the viewer.
  • Support your subject – ensure that background colors don’t upstage the subject of each frame.
  • Select one thematic and one accent color – one dominant thematic color can unify the story
  • Use saturation mindfully – since highly saturated colors draw the eye, it’s important not to use too many in one frame or the viewer won’t know where to look. It’s best to use saturated colors in moments that are supposed to pop or have significance.
  • Use surprise color for punctuation – similar to using saturated colors, using a color that differs from the palette of the rest of the piece will surprise the viewer and should be used in significant moments.
  • Design for movement – ensure that background colors don’t compete or blend in with the colors in moving parts of the animation.
  • Make your own rules – color is a dynamic topic that can affect your piece in different ways so go with your gut.

Research

While researching cinemagraphs, I found some that inspired me, as well as some that I thought fell flat. I’ll share a bit of each below.

The cinemagraphs that I enjoyed viewing the most were those that made the contrast between still and motion very apparent. I love how there is a lot of organic movement in the grass, while the setting sun and clouds – two objects that would also be moving in a traditional video – are stationary.

Using light against dark makes a really beautiful contrast in cinemagraphs, and I found many of my favorites utilized it. Again – I like the contrast between the gently swinging lights and the stationary people.

Cinemagraphs can also be used to create more dynamic landscape images. While this one rides the line of not having a stark enough contrast between static and motion, I enjoy that it shows a certain quiet stillness of this lakeside Austrian town.

This is an example of a cinemagraph that I don’t find successful. Because everything else in the photo is static, and out of focus, it makes the animated portion feel less magical or important. Other than the fact that I suppose the lights would be twinkling, there is nothing else in the static part of the image that shows me this is not simply a video of some champagne bubbling in glasses.

The other thing I find to be unpleasant is a janky loop. When the loop isn’t blended properly, it is very jarring. The way this cinemagraph seems to just start over, instead of looking as if the pour goes on forever, is very distracting.

Create

So as I suggested at the beginning of this post – actually creating a cinemagraph is deceptively difficult. Taking perfectly still, perfectly timed video so that the animated portion of your piece doesn’t look all wobbly and terrible is NOT first day stuff.

Unfortunately, my tripod broke and I haven’t gotten the replacement yet. This made capturing video extremely difficult. I tried creating a makeshift tripod and worked hard to clean everything up during the creation of the cinemagraph with the few editing tricks I know, but as they say… garbage in, garbage out. So without further ado, below are my three first attempts at cinemagraphs.

Bees and Catmint

I created this gif of bumblebees buzzing around my catmint using Adobe After Effects. I found the pen tool in this program to be easier to use than the quick grab tool in Photoshop, although I did have to start over several times because something would go awry and I couldn’t figure out where or what. That was relatively frustrating, but I’m sure will get easier with practice. I also didn’t like the fact that I couldn’t make a gif file right out of this program.

Bathing Beauties

I created this cinemagraph using Adobe Photoshop. I liked this program more than After Effects, even though the quick grab tool was annoying at times grabbing some, then deleting it, then grabbing, then deleting. I’m sure on an image with more color variation, it would have been easier. I think the quality of this cinemagraph came out much better – I had a lot of trouble getting the color and the quality right in After Effects.

Patience is a Virtue

Again, this is a cinemagraph that would have benefitted GREATLY from having a tripod. I really struggled getting Leroy’s tail to transition well, breaking one of my own rules about the importance of a clean transition! I created this one in Photoshop as well.


Blazer, L. (2019). Animated Storytelling. Peachpit Press.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s