If you’ve been following my blog, you know it’s no secret that I love my pets and focus a lot of my projects on them.
A few months ago, I designed a logo for a brand that I developed, along with its web presence. This week, I had the chance to animate a logo – and what a great way to utilize a project I’ve already done, and to make it better.
The logo is for a brand called Stitched & Sable Living – a home and living product store for those looking for practical items that style their home. With an added benefit of having access to items for their pets! Pets are, of course, part of the family.
Readings:
Chapter nine: Technique in Animated Storytelling by Liz Blazer describes the different techniques and styles that accompany your animation.
She goes into detail about experimenting with techniques whether they’re your typical go-to or not. This isn’t to simply expand your skills, but to have the best technique for what your project is.
Different techniques include:
- Hand drawn
- 2D Stop motion
- 3D stop motion
- 2D CGI
- 3D CGI
And different styles include:
- Fluid transitions
- 2D/vector
- Hand made
- Collage
- Film & type
- 3D
Overall, the point is to find the technique and style that works best for your animation, then to try and find a hybrid of it with your comfort technique.
And if you can’t find a hybrid, there are workarounds:
- Import still images – you may find what you need by simply searching for it.
- Shoot live-action footage – to get the image you need.
- Staff up – it may be more efficient to hire the talent than to spend the time on it yourself.
Research:
Ollie Johnston and Frank Thomas developed the 12 principles of animation for creating a better, more realistic animation. These are a great base to start from when animating, or preparing to animate. One of the best ways to fully understand the principles is to see them in action – so, I’ve found a few videos that show great examples of some of the principles.
Tom & Jerry is a fun, exaggerated cartoon about a cat and mouse rivalry, and shows tons of these principles within each episode. In this clip, between 0:29 & 0:41 shows principle 9. Timing, principle 5. Follow through & overlapping action, and principle 1. Squash and stretch. Timing represents the number of frames between each action – right at 0:29, Jerry’s legs move very quickly from being down to moving up. This depicts the feeling of surprise and severity of Jerry’s movements. After the mouse is back up, he turns into a ball and shoots around to different areas of the frame which shows follow through & overlapping action, specifically for the drag that happens between his fast movements. Finally, when his body is rolled into a ball, he hits the ground and bounces back up, showing squash and stretch.
This clip of The Road Runner shows an easier-to-follow representation of principle 5. Follow through & overlapping action than the previous research example. At 0:13 the road running stops running and shows the follow through action by moving back and forth from the fast movement to now being stopped.
This episode of the Pink Panther uses principle 10. Arc. From 0:42 to 0:47 the Pink Panther and a caveman move a rectangular stone on the long ends. The way that the stone moves when falling or being pulled up is in the shape of an arc to more realistically look as if it’s being moved – where if it were to follow a straight line down to the ground, the rock would look like it shrinks during movement.
Who doesn’t love the squirrel from Ice Age? He’s well known for the quirky and exaggerated adventures that always seem to end badly for him. This animation of the squirrel uses principle 10. Exaggeration, and principle 12. Appeal. All of his actions result in some exaggerated outcome and facial expression – for example, from 0:14 to 0:18 he has several reactions that perfectly depict what’s happening – really satisfied to really confused, to really scared. Also, the character himself is appealing to look at – he has interesting features and was created with dynamic design in mind.
Finally, this clip from How to Train Your Dragon uses principle 8. Secondary action starting just after Toothless eats the fish, at 0:48 where he licks his lips. This gesture supports the main action of eating by being satisfied with what he ate afterward.
Create:
The idea behind the brand’s logo and presence includes “mascots.” These are different drawn characters or features that are recognizable towards the brand because of their similar style and colors associated with the brand as a whole.
Because of the hand-drawn look, I thought it would make sense for the animation to feel as if it’s being drawn directly onto the screen. So, I started with this for the dog in the main logo. As the dog becomes more prevalent, the word “Living” begins to animate in, along with the arched border and ending with the text features.
I originally created this logo in Adobe Illustrator, then brought the layers into Adobe After Effects to begin the animation. I’m still new to After Effects, so I had to watch a few tutorials on how to get the lines to draw in. Instead of using some of the original AI elements of the logo, I re-drew the lines with the pen tool in AE to get the animated effects that I wanted.
Finally, I added a sound effect of a pencil drawing on paper to begin the animation, with a fade-in of some music that accompanies the mood well.
See my finished logo below!
I had a ton of fun working on this animated logo! The result has the look and feel that I was going for, and I’m happy with the outcome. With a little bit more time and practice in the program and animation as a whole, I think I’d like to add a little ear twitch or tail wag to the dog for a little bit more character. Overall, I’m looking forward to working on more digital animation projects in the future!
Julie Anderson 