Animated Logos

Summary:

If you have ever been to the movies, you may have noticed that several logos appear on screen before the movie actually starts. Often times, these are logos of production companies that helped produce the movie.

Could you imagine if all of these logos just appeared a flat, unanimated images on the screen? It would be awkward and disappointing. For me, I would wonder about the skills these companies brought to the table if that was all they could produce to represent their company.

Instead, companies should flex their muscles and show something on the screen they are proud of. Using animation, the sky is the limit for these companies.

Reading & Writing:

There are several techniques an animator can choose when creating a piece but selecting the right tool from the toolbox is critical.

In her book, “Animated Storytelling,” Liz Blazer does all put place an exclamation point on the importance of choosing the right technique.

“Selecting the right animation technique can be the key to expressing your big idea, can amplify the very soul of your story, and if used inventively can set your project apart from the rest,” she said. “The key here is that they choose to tell the kinds of stories that are best suited for that specific technique.”

One of the most important steps in considering the technique you want to use when creating the animation is format. How will it be viewed? On the big screen? On a cellphone? A computer screen? Or on the side of a building in New York City?

The other thing to consider is what animation or motion techniques and styles will translate the story the best.

Blazer gives tips on each of the techniques:

Hand Drawn: Materials used, when drawing by hand, can be as simple as pencil, paint, ink, or charcoal. The method used, though, can vary. For example, Disney uses cel animation, Blazer said, to create a finer art approach, where independent films use a more loosely hand drawn method to be more expressive or emotionally driven.

Stop Motion: This is a method that each image is shot every time something on the canvas moves. Broken down, this can consist of 2D stop motion and 3D stop motion. 2D stop motion “gives a flat, handmade quality to films that is emotionally expressive and very adaptable,” Blazer said. She added that the technique used for 2D animation has a lot of personality and works well if you want to show a handmade quality. The 3D method of stop motion animation can involve things like models, clay, LEGOs or anything found in the house. But broken down even more, 2D and 3D animations can be made using software.

As for styles, Blazer said the following:

Fluid transitions are when the animation flows without any cuts. Blazer added that it can look like something is morphing and is used for narrative storytelling.

2D/Vector/Kinetic Type is when they are is derived from vector programs. This can be used in broadcasts.

Handmade looks like someone did it themselves…DIY

Collages combine handmade elements with photos. SouthPark used to collage real pictures of celebrities into the animations when the show was first starting out.

Additional styles include film and 3D

If all else fails, Blazer suggests going out and looking for inspiration in other artists’ works and trying to integrate their methods into your own. She also said it is ok to find workarounds to get your creation to come to life.

Principles of Animation

There are 12 principles of animation. These are methods used to give animation a sense of realism. For example, a ball dropping from the sky will bounce in real life, go back up a bit at a slower speed, come back down, bounce again, etc.

If gravity exists in an animated world, it is a good idea to show that gravity is there, even if you exaggerate the effects of gravity.

Here is a rundown of the 12 principles of animation:

Squash and stretch is a method of animation that gives viewers a sense that objects have weight and flexibility.

Anticipation is a method used to prepare the audience for something, even if it is as subtle as a dancer’s legs bending down before leaping into the air.

Staging is a method of animation that allows the animator to direct the audience’s attention to the most important aspect of the story. This can be done easily by keeping the important pieces in focus.

Straight Ahead Action and Pose to Pose are methods regarding how the animation is drawn, whether animating the pieces frame by frame or by drawing in the key frames and filling them in later.

Follow through and overlapping are methods used to show more realistic movement being affected by the laws of physics.

Slow in and Slow out methods used to slow down and speed up animation.

Arc is basically showing something’s trajectory.

Secondary Action is a method of animation that can be applied to a character walking. Instead of just having the character walk, have it swing its arms as well.

Timingis how many frames per second the animation will appear.

Exaggeration is a way to show rather than tell. For example, if a man is poor, he can be shown entering his home with boarded up windows, a ripped up couch, and an open pizza box that he grabs a slice of pizza from before sitting down on the couch.

Solid drawingis something that is obviously needed in animation.

Appeal means creating characters that are likable.

Research to Inform

To illustrate the principles of animation, I have found a few examples.

Sponge Bob

Just watch the beginning of this clip to see how the animator uses squash and stretch. Even though Bikini Bottom is under water and the physics never make sense in this show, viewers know this from the beginning and are under the impression that anything can happen on the show. There is also a great deal of exaggeration used in this scene.

Jiminy Cricket

Many people remember Jiminy Cricket from Pinocchio, but my favorite cartoons with him were educational in nature. This cartoon is about electricity, and in it, there is a scene at the 3:12 mark where Benjamin Franklin is flying a kite to discover electricity. When he is electrocuted, his body lights up, skeleton is shown, and he floats in the air – this is the method of exaggeration.

Along with exaggeration, though, there are several other methods used in Disney animation. Solid drawing, the characters are appealing, and the anticipation seen at the 3:57 mark of the lighthouse

.

Humphrey the Bear

Another Disney animation with great drawing, anticipation, and squash and stretch.

The scene I am starting this clip at has the character waving both arms and jumping up and down to alert the other bears about a project. This method is secondary action

Into the Spider-Verse: Post Malone

I jumped to this scene because, again, here is a character doing several things at once and not just moving one part of his body at a time. This adds realism. Even when you jump to the 38-second mark, you will see the character push away from his desk with his legs. His legs bend, giving you the anticipation that he is about to do something.

One Crazy Summer Animation

In this animation from the moving, “One Crazy Summer,” the rhinoceros signs and shows several portions of its body move, so the viewer experiences secondary animation. Another example of this is when the dog appears in the frame at the 21-second mark. It is scratching its head and the rhino is moving in the background.

When the baby walks into the screen, anticipation is created when the stick is moving up and down and you hear the tap. There also appears to be a little bit of squash and stretch throughout the animation, particularly with the bodies of the characters.

Create

This week I created an animated logo stinger using a logo I created in a previous class for a fictional company called Web Thread.

To prepare the logo for animation, I opened it in Adobe Illustrator and separated elements such as the words “Web” and “Thread.” I also separated a spiderweb in the back, and every element of the spider I drew – so each leg and the two parts of the body.

Once each element was in its own layer, I saved the logo and imported it into Adobe After Effects. From there, I determined the type of animations I wanted to appear from my logo.

The first thing I did was have the word “Thread” come from the top of the screen and bounce up. The word “Web” also has this effect. When I introduce the spider, I have it drop down like it is on a thread, and then bounce. At the same time all of that is happening, the spiderweb in the right-hand corner comes in from a larger size, spinning like a record into place.

The final animation piece I did was have the spider go around the words “Web Thread.”

While I was happy with the product, I needed to add some sound, so I recorded myself playing an “A” chord on my guitar. I imported the sound and determined more could be done, so I went back to the guitar and played a very high note repeatedly to represent the movement of the spider.

Overall, I was happy with the process. I would like to learn more about making the logo more three-dimensional at some point, and possibly have the spider move in and out of the wording.