Summary
Whether your project is an animated feature or motion graphic for corporate marketing, making the right decisions about how you’ll construct your piece is key. I combined advice on how to choose an animation technique and style from Liz Blazer’s book Animated Storytelling: Simple Steps for Creating Animation and Motion Graphics with research on Disney’s 12 Basic Principles of Animation to create 2 logo stingers.
Reading & Writing
To tell a story with animation well, you must first choose the right animation technique for your story. Not every technique is going to work for every story. Making the right choice here can lift up your story, clarify its meaning to audiences, and help it stand out. In Animated Storytelling: Simple Steps for Creating Animation & Motion Graphics, Liz Blazer shares the 2 main things you must consider about your project in order to choose the correct animation technique for it:
- Format: How are most people going to view your piece? On a TV, a phone, a movie screen, a billboard? Certain techniques are better suited for certain formats. Making the wrong choice can mean your audience will miss information about your story or easily notice flaws. Either way, your story will not be received the way you intended
- Message/Theme/Tone: What’s the big picture of your story and how do you want your piece to make people feel? Review these intentions of your project before choosing because certain techniques excel at conveying certain messages and tones better than others. Your chosen technique should do well at supporting and translating your intentions to your audience
There are a number of animation techniques that you can use, and even combine, to find the right way to tell your story:
- Hand Drawn: can be made using many materials such as pen, pencil, ink, and charcoal and in many styles such as cel animation, fine art, and rotoscoping
- Stop Motion: made by moving objects and taking a photo after each movement, can be 2D or 3D, motion style is quirky and magical
- 2D CGI: made by animating in a flat or two-dimensional software environment, made with software using bitmap or vector images, clean and highly scalable which makes it good for type animation, feels warmer and more innocent than 3D
- 3D CGI: made by animating in a three-dimensional software environment, similar process to stop motion only with few physical limitations, can create extremely realistic characters and environments
In addition to choosing your animation technique, you also need to decide on what visual style you want your piece to have. In some cases, style and technique are closely related, but not always. Blazer points out that you can always push the limits of a technique to get the style you’re looking for, but you need to have a style goal in mind first in order to do that. Visual style options include:
- Fluid Transitions: flows from one scene to the other without cuts, common for narrative storytelling that unfolds from beginning to end
- 2D/Vector/Kinetic Type: flat design with scalable colors, uses vector art, common for broadcast graphics, infographics, and web design
- Handmade: uses real materials, often looks DIY, common when a vintage or innocent look is desired, stop motion and hand made techniques excel at this style
- Collage: uses handmade elements with photos and video footage, common for animated documentary and title sequences
- Film & Type: a combination of video footage and kinetic type, common for non-linear title sequences
- 3D: use of “Real” light, shadows, and laws of gravity make it feel like reality, stop motion and CGI techniques excel at this style
After you’ve decided on your style and technique, now comes the time, as Blazer says, to conform or adapt. If you’re already knowledgeable about the particular technique you’ve chosen, then great. Otherwise it time to get to work making a plan on how you’re going to execute a project using a technique you don’t know. The first option would be to, of course, learn the technique – research it, watch examples, and practice it.
However, if you don’t have time to learn a whole new way of animating you can always try to adapt what you already know to make it work. To do so, you still need to study your desired technique and understand the key characteristics of it. With this knowledge, you should look at the techniques and programs your comfortable with to see if there are plugins, features, or other workarounds, as Balzer calls them, that you could use to achieve the same characteristics and your desired outcome.
If this also doesn’t work for you then Blazer prescribes looking into other workarounds, including:
- Importing Still Images: import still images into your animation program and use tools to achieve a look of motion similar to animation with the still images
- Shooting Live-action Footage: shoot video footage, import it into your program, and process it in whatever way you want in order to seamlessly integrate it into your animated story
- Staffing Up: get others who know a technique to work on your project (by paying, bartering, favors, etc.) and direct them about what you’re looking for, but still allow them to be creatively independent
Research to Inform
Whatever technique and style you end up choosing, it’s also important to know how to create effective motion for your animation. A good guide to reference is the 12 Basic Principles of Animation created by Disney animators Ollie Johnstone and Frank Thomas in their book “The Illusion of Life: Disney Animation.” The 12 principles are squash and stretch, anticipation, staging, straight ahead action and pose to pose, follow through and overlapping action, slow in and slow out, arc, secondary action, timing, exaggeration, solid drawing, and appeal.
Even though these were created with more traditional animated storytelling in mind, they can be useful for any project. That’s why I went looking for examples of some of the principles in action before creating a logo animation. You’d be surprised how much you can learn from Looney Tunes, Pixar, and other animation studios that can work for a seemingly straight-laced project like a logo stinger.
1.Squash and Stretch
To make animations feel realistic they can’t change volume if they change shape. Here, as Daffy grins, his head vertically shortens, but then his beak in the middle of his head expands horizontally accounting for the change in shape in a similar way that our cheeks expand outward when we smile or grin.
2. Anticipation
This principle states that you need to prepare the viewer in some way for the coming action to make it more realistic. As Wile E. Coyote prepares to launch his rocket it pulls back in the launcher signaling to the viewer to expect it to shoot forward. However, the rocket instead shoots straight up. The anticipation motion here is actually what makes this joke possible. As usual, nothing goes as expected for Wile E. Coyote.
3. Staging
Like staging in theatre and film, animation needs the same attention to the placement of characters and objects in order to correctly direct the viewer’s eyes from moment to moment. In this scene from “Inside Out”, the animators use light and the direction of the character’s faces to direct the audience’s attention. It begins with Joy and Sadness viewing the world around Riley, but lighting clues followed by the turn of their heads to view something offscreen push the viewer to expect something more to happen. This anticipation leads into the well-staged movement of the memory ball as it makes its way through the shoot and down into the core memory bank. The camera continues to follow the light movement of the memory as we see the creation of the new core memory centered in the window.
4. Follow Through and Overlapping Action
In reality, when an object or person is moving and then stops not every part of them will stop moving at the same time. Some parts, like hair or clothing, will continue moving before settling down. This is what follow through is. Overlapping action mimics the fact that objects on a body don’t all move at the same pace. Here, Goofy’s ears swing back and forth at a different rate than his legs jump and after he finishes the jump, his ears continue to swing. This makes the jump feal more realistic as it appears to obey the laws of physics.
5. Slow In and Slow Out
In reality, things don’t move at a steady rate. They have to accelerate up to speed and then decelerate over a certain period of time before stopping. Here as Tweety swings in his cage, the swing moves quickly in the middle and slower as it reaches the reversal points. This helps create the illusion of real gravity because swings move very similarly in reality. The shape of Tweety’s swing path also gets into the next principle of using arcs.
6. Arc
Other than machines, things don’t move in straight lines in reality. Arced movements are much more common and natural to see. Therefore to make an animated world feel real you need to have character and object movement follow arcs. In this classic scene from “Toy Story,” Buzz jumps off the bedpost in an arced dive, bounces upward off the ball in an arc, and is caught by the plane in mid-arc after riding the car track. Even Woody and the other toys’ heads move in arced paths as they watch Buzz fly.
7. Exaggeration
Even though these principles are based on bringing realism to animations, complete imitation of reality can be boring. This principle says to stay true to reality but make its depiction extreme. Hence, instead of Wile E. Coyote just licking his lips to show his hunger, here he’s licking around his entire head with a ridiculously long tongue. The exaggeration is humourous to fit the tone of the story and there’s no mistaking that he’s starving.
8. Appeal
This principle basically means make characters visually interesting and, honestly, is there anything more interesting looking than a minion? They have these giant eyes like a baby, tiny legs but giant bodies in comparison like a bird, long and rubber-like arms, and are basically yellow tubes. Plus they speak a made-up language decipherable by the viewer only through intonation and body movement. They look and sound utterly ridiculous yet these lovable ne’er-do-wells were appealing enough to warrant their own origin story film.
Create
Newly armed with knowledge of the 12 Basic Principles of Animation, I began my logo stinger animation process by thinking about what kind of logo stingers appeal to me the most. I immediately thought of Pixar and Netflix. Pixar’s hopping desk lamp is fun, realistic-looking, and character-like, speaking to both the type of business they’re in and the tone of the animated movies they make.
Netflix, while also an entertainment producer like Pixar, has an additional identity as a tech company. Their logo stinger reflects this mixed brand identity with a cinematic tone, digital sound, and an embrace of a computer-generated feel, especially with their new wordmark stinger that almost looks like you’re going into the fiberoptic bands of light that deliver the platform’s content to your devices.
What these logos have in common, though, is that they’re both a miniature, enjoyable experience unto themselves, not just vehicles for branding. I enjoy watching the lamp bounce on Pixar’s I and Netflix’s iconic sound gives me a rush of excitement I don’t mind. Doing something similar with my logo animations was the goal.
I started with thinking about the Pixar style and what kind of brand would fit that. Scratch Baking, a local brand I’ve used in previous posts about social media strategy and web design came to mind because they have a quirky identity and logo. I’ve also wanted to do a polish and slight redesign of their logo icons, colors, and font so this seemed a good opportunity to play with that.
I started by building out my idea for their logo as a layered file in Illustrator then importing it into After Effects. The idea behind their logo is that to do scratch baking you need 3 basic, quality ingredients: butter, flour, and eggs. I thought it would be fun to animate combining the ingredient icons to symbolize this baking process and from that motion have the full logo be born. The ingredient icons, therefore, are a little like the characters in the story of this logo stinger the way the lamp is for Pixar.
Using position keyframes on both the butter and egg icons I was able to make them look like they are hopping into the flour jar. I employed the principle of squash and stretch and a little anticipation to show each of them preparing for their hop by squashing down then accelerating up. Their motions also follow arcs and, using the easy ease function in After Effects, are slow in and slow out. I also have motion blur turned on for all moving elements to create the illusion of a little drag like real objects would have.
After the ingredients hop the flour starts to spin as if its a mixer, mixing the ingredients together. To achieve this effect, I used the twirl preset and messed around with the speed and size of it until I got it the way I wanted. This motion also features the slow in and slow out principle using the easy ease function.
I used a short piece of stock music from bensound.com, appropriately titled “Fun Day,” to create a light, yet energetic and friendly tone. I also timed the main beats of the music to motions – the butter and egg hops, the brand name appearing, the logo completing, and the brand name pulsing for emphasis.
Matching up the timing of the music and these movements was probably one of the harder things to do. Just having something off a frame or two could make it feel less emotionally satisfying so I think it was worth it to pay special attention to this. To get it right I had to focus carefully on identifying whether I was experiencing the sound of the beat too early or the visual of the motion too early. Just lining up keyframes with the high points in the sound file’s waveform didn’t always work because we don’t naturally process sound and visuals at the same time. To get it to feel natural and land emotionally took some trial and error.
Overall, I’m pretty satisfied with this logo stinger. It’s quirky and approachable, yet still able to be taken seriously. I could imagine it being used on YouTube and other social media video content for the brand such as baking tips, recipe tutorials, or in the kitchen sneak peeks.
This second logo stinger is much more inspired by Netflix’s style. This logo is one I’m developing potentially to represent my personal brand on a new portfolio website. Since my work focuses on social media, web, and user experience, having something that feels a little more tech-driven rather than character-driven seemed appropriate. Plus, the aim of use on a portfolio site or other professional endeavors made a more presentational or cinematic tone feel right as well.
Since my logo design utilizes negative space to create my initials, I thought the idea of motion that drew or filled the shapes in somehow would be nice. Unlike with the previous logo, I didn’t really know where to start in After Effects to achieve this. But, the internet is a wonderful wealth of knowledge. After watching a couple of YouTube tutorials, I was able to successfully build this.
I started with an Illustrator file again with all elements on their own layer. However, all of the shape layers were grouped into a pre-composition once in After Effects because I needed to apply effects to them all simultaneously. I had to auto trace the shapes then apply the fill and stroke presets to achieve the motion of color traveling through the outline of the shapes. On the stroke, preset I created keyframes for both its brush size and start functions. All of the keyframes on this project also have easy ease applied to get the slow in and slow out effect. To help achieve this in the rate of speed of the stroke fill I adjusted the speed graph.
After this was complete, I copied the whole pre-composition 2 times and arranged the 3 pre-composition layers in stairsteps a few frames apart on the timeline. The colors of the 2 new pre-compositions were also changed which helped create the look of different pulses of color chasing each other through the stroke of the shapes.
To get the flash of gray flash fill of the shapes, I copied the third – or tallest stair step – of the pre-compositions, deleted the stroke preset, and applied the radial wipe preset. The transition completion function for this preset had keyframes with easy ease placed on it to decrease it to 0% at a certain time and then the speed graph was adjusted similarly to the previous stroke preset. This pre-comp was then copied, changed to white, and moved a few frames down the timeline to create the final white fill.
My name slides in below the shapes just by using keyframe changes in position and opacity and adjusting the speed graph to get exactly the rate change that I wanted for that motion. The bump back of the shapes uses similar functions for speed adjustment with scale keyframes. This was done on a null object layer to which all the other layers except the background color layer were parented to.
I paired the filling of the shapes with the sound of a cymbal crescendo to create a sense of anticipation and presentation. The bump back is accented by a quick whoosh sound that’s both diegetic but also innovative and fresh feeling. Overall, these sounds come together with the visuals to be the professional and energetic, yet relaxed tone I was striving for.
This logo was definitely more complicated to build than the other one, but I’m really happy with what I was able to achieve. Unlike the first one as well, I employed the principles of animation much more subtly in this logo stinger. I even chose to purposely ignore one and do some fast in movements to evoke more of a sense of a machine or piece of technology. The only decisions that I’m not really sold on are the color choices. However, that’s easily changeable for future uses.
Reflections
Even though the 2 logo stingers I created are for totally different brands and quite different in motion style, audio, and intended use, I like to think they have one important factor in common: appeal. They are both hopefully things that someone other than myself wouldn’t mind watching for a few seconds. That’s a big deal, but can be overlooked for this type of project.
We see logo stingers all the time, but this ordinariness combined with their usual briefness can make us think of them as simple to make, and maybe even as afterthoughts within bigger projects. When done right, though, they are far from simple in terms of decision-making and creation. Applying the same standards for choosing technique and style used in more extensive animation projects as well as rules like the 12 Basic Principles of Animation can turn a simple logo stinger into a work of art, a story, and a great ambassador for your brand all in one.
