The Mustache Chronicles, Part 3


It's not getting any more normal, that's for sure.

Kinetic Typography Tutorial


Kinetic typography is a form of animation that centers mostly on moving text. Simple enough in concept, but it can lend itself to some truly amazing and complex animations if done properly. There are some people that are trying to make it an automated process, but until then us animators are just going to have to do it by hand. I'm happy to offer both video and text versions of this tutorial.If you're going to watch the videos, make sure you use the full-screen mode.

This is the video tutorial for using 3-D mode.

Project Files

As promised, the After Effects, Illustrator and audio files are now available for download. It's all CS3, so I hope you've upgraded.

Step 1: Create the layout

Your animation should always start on a blank piece of paper. Plan out your super-cool movements and any complex shapes that will be in your animation. Since you’re going to want the ability to scale your animations up and down without pixellation, your elements need to be vector based. I recommend Adobe Illustrator. Open Illustrator. Create a new document. 1024 x 768 pixels with RGB Color is a good starting point. Obviously, you can change the size of your document if need be, but I like this size as a default. Using your Type tool, insert the text of your source material. Don’t worry about using the type tools to do any paragraph formatting. That step comes next. Just make sure that there’s plenty of space between the lines. It’ll be easier to separating the text onto different layers.

Advanced Tip If your source audio has more than one person speaking in it, it's a good idea to use two different typefaces for their voices. This gives your viewer a clue as to who is speaking at any given time and adds character to their voices.

Step 2: Moving the words to their own layers

Since we’re going to be animating all of the words individually, they each need to be on a different layer. It’s not as scary as it sounds.

  1. Select your text with the Selection Tool.
  2. Outline your text (Type –> Create Outlines).
  3. With your text still selected, ungroup them (Object –> Ungroup).
  4. Click anywhere that’s empty in the pasteboard. Then click and drag to select the first word of your script. Group it (Object –> Group). Select and group the next word. Repeat this for the entire script.
  5. Once all of your words are in their own groups, Select All (Select -> Select All).
  6. Open the Layers Palette.
  7. From the Options menu, select Release to Layers (Sequence).
  8. Move the newly created layers from being nested to above their nesting layer.

That’s it. All of your words are on individual layers. Now it’s time to start laying them out, according to your plan. You have a plan, right? Resize, rotate and color your words. This is when your document will start looking cool. Follow your original plan and create a 2-D layout of your text. Don’t try and add any effects or filters to your words. You can do that in After Effects.

What your text should look like in Illustrator

What your text should look like in Illustrator

What your Layers pallette should look like

What your Layers palette should look like

Step 3: Getting Animated

Open After Effects. Create a new composition that is 720 x 480. This is a good size for scaling down to YouTube sizes, but it’s also broadcast size so you can burn your work onto DVD at full resolution. Make sure its duration is a little bit longer than your source material. This is important to set now so that all of your compositions will be the appropriate length. It makes it easier to sync up the animations with the audio. Import your Illustrator file. Double-click in the Project pane and navigate to your file. Make sure that you select the Composition - With Cropped Layers import option.

After Effects will create a New Composition that looks exactly like your Illustrator layout, with all of the elements on separate layers and in the proper positions. Do not just drag the layers from the new folder into a composition. AE will just stack them all, one on top of the other, like this:

This is NOT the composition that AE created when you imported your AI file.

This is NOT the composition that AE created when you imported your AI file.

Zoom vs. Scale After Effects has a Zoom Tool that will allow you to get a closer look at your composition. However, it does not actually make the layers any bigger. If you zoom in on a vector image, it will look pixelated. To actually make your layers bigger, select a layer and press S to bring up the Scale attribute.

Double click the new composition in the project palette to open it. If you’ve properly split up your layers in Illustrator, then all of your elements will be on separate layers. If your text is predominately black, then you’ll want to change the background color (Composition –> Background Color). Your animation must be split into manageable sections. The number of layers that will be in a section are entirely up to you. I find that about 4 or 5 sections per animation are adequate. Select the layers that will make up your first section, then pre-compose them (Layer –> Pre-Compose).

Advanced Tip Pre-composing (or nesting compositions) is extremely useful. It's kind of like Grouping layers together, while retaining the individual animations of the individual layers. It allows you to easily scale and rotate entire sections of your animation around a single anchor point. It's tough to describe. Best you get in there yourself and find out what it can do.

Go back to the Illustrator composition and hide the newly created composition. Select the layers that make up the next section. Pre-compose them. Repeat this until your entire animation is divided up into sections.

You want to split up your layout in separate compositions for two reasons:
  • Performance: Unless you’re on a NASA SuperComputer (and if you are, get back to work) then your computer is going to take a painfully long time to redraw each screen.
  • Movement: Because we will be rotating and scaling them, animating your sections in the final comp will be easier if your comps are smaller in dimension.

Now you’re going to animate the sections individually before bringing them together as a whole. Hopefully, you’ve already got some specific ideas planned out.

Step 4: Syncing the Audio

The most identifiable characteristic of a kinetic typography animation is that the type on the screen is synced up with the audio source. Something happens (the word pops up, becomes centered, zooms in, etc.)  with a specific word at the same time it is heard. So you’ve got to sync up your source audio with some kind of event that happens to each word. The simplest of these events is the word appearing on screen, so that’s the one we’re going to focus on. Obviously, the word could bounce in, fade in, move in, grow in, drop in, whatever you want. But it’s easiest to start with the word just appearing. After you’ve mastered that, you can figure out how to do the rest. Here’s how to sync up your words with your audio source:

  1. Open your first section composition.
  2. Import your source audio into the project.
  3. Drag and drop the source into your composition. Go ahead and lock the audio layer so that you don’t accidentally move it in the timeline.
  4. Reposition the work area sliders until you’re focused on the section of the source audio that corresponds with the layers in the composition.
  5. Select all of your layers (except the audio source). Move them to the right of the work area in the timeline (not in the composition window.)
  6. Press 0 on your keypad. This creates a RAM Preview with Audio.

Listen to the source and watch your time scrubber. One by one, drag your “words” back into the work area. Move them so that their In Point is exactly in sync with when the word is said in the source audio. Check the sync by pressing 0 on the keypad again. Repeat steps 8 and 9 until the entire section is synced up. Delete the audio source layer (don’t forget to unlock it, first).

Advanced Tip Once you’ve got your layers synced up, you can select them all and drag the In Point of any one of them backwards a few frames. This will create some lead time with some helpful tick marks on the layers timeline that visually identify when the word is said in the audio. You can use this lead time to animate your text to its appropriate place.

So, now your first section is synced up with your source audio. If you’ve done it right, it will seem to be sitting by itself in a large, mostly empty composition. Also, it’s likely that not all of your words will be right-side up. Don’t worry about any of that. We’ll get to it when we create the final composition. Repeat this process for each of your sections. Remember to delete the source audio from each composition, otherwise you’ll get a horrible echo when you create your final comp.

Step 5: All together now

It's time to assemble the multiple section animations into your final composition. Think of each section as an actor in a play. When the first one is done with their monologue, it's time for them to leave the stage and for the next one to come on. As the director, it's your job to make sure they enter and exit on cue. How you make the individual sections appear on-screen, and how you make them exit, is entirely up to you. Some cool ways to transition are:

  • Blurring the text with fast movement.
  • Invert the background and the text colors, marking a sharp change.
  • Growing the previous section until one of its letters takes up the entire screen, and then having the next section appear inside of it.

Syncing along the way

You need to be sure and sync each section with the source audio as you bring it into your final composition. Define your work area boundaries, press the 0 (zero) key on your keypad (not the same as the numbers across the top of your keyboard) for a RAM Preview with Audio. If you get a weird echo, then you forgot to delete the source audio in one of your section compositions. Go back into the composition and delete the audio layer there.

Pause for a moment

Stop and start the animations by duplicating keyframes. By creating “dead space” between animations, you allow the viewer time to read and absorb the information on screen. Following your plan, animate your section compositions. Since your words are already animated, it will be easy to animate the composition layer since you can see what words are being said at what time.

Advanced Tip Easy Ease is a great tool for use in these kinds of animations. After you’ve animated your sections, convert the end keyframes of each move into Easy Ease keyframes. Select the keyframe markers, right-click and choose Keyframe Assistant –> Easy Ease.

Make sure to turn on Motion Blur and Continuously Rasterize for all of your compositions.

Continuously Rasterize and Motion Blur switches

Continuously Rasterize and Motion Blur switches

Advanced Tip Motion Blur won't show up during a preview unless you turn it on for the whole composition. That switch is different than the one that turns it on for individual layers. Look directly beneath the composition tabs.

Lightbox Background

You’re almost finished. After all of your sections are animated, it’s a good idea to create a visually compelling background. You can be as complex as you like, but remember that a visually compelling background will pull attention away from your text, which is kind of against the nature of kinetic typography. I like to use subtle gradients for my backgrounds. To create a gradient, first create a new Solid by selecting Layer –> New –> Solid. The color you pick here is irrelevant. You’ll define the color with the Ramp filter.

Click to enlarge

Move your new solid layer below all of your other layers. Select it and choose Filter –> Generate –> Ramp. Change the start color to a deep red and the end color to black, and change the Ramp Shape to Radial.

Move your start point to the center of the layer and your end point off the edge. This will create a soft-lit background that will make light-colored text stand out.

You can also add effects to your section compositions. Be as creative as you like, but remember that people came for the typography, so don’t get too wild with distracting filters like drop shadows and reflections.

Step 6: Out the door

When you export your final composition, make sure you export the audio along with it. In the Projects Pane, select your final composition. Start the process by selecting (Composition –> Make Movie). In the Render Queue, look for the Output Module. Click the word “Lossless.” In the dialogue box that comes up, there should be an Audio Export section near the bottom. Click on the checkbox marked “Audio Output.” Click the “OK” button.

Press Render to start rendering your animation. When it's done, so are you. If you liked this tutorial, please Digg or Stumble it. Also, leave comments regarding what other kinds of tutorials you’d like to see.

The End Result

Here are our YouTube videos. Subscribe to our channel so you can know when the next big video hits. And if you really like us, read our comic. It's, well, it's worthwhile.

Obamania - We've caught it


Since we're obviously a leftist organization, I thought it prudent that the Ministry of Technology create a political animation for the hearing-impaired: Kinetic Typography of Barack Obama's "Yes We Can" Speech.

As has been pointed out to us by our hard-of-hearing friends, closed captioning is extraordinarily boring, and it doesn't always convey that feeling that you get when you hear something that strikes to the core of your being.

So, we've tried to reproduce those feelings visually. I think we succeeded.

But, don't take my word for it. Enjoy.