Motion Graphics / Production Pipeline

 Original post by Melinda Rainsberger

More and more, designers, illustrators and coders are being asked to animate. Animation adds energy to a brand and heightens a customer’s emotional response. The software to do it is reasonably priced, and Internet connections can now deliver high-quality video. For these two reasons, animation-based advertising is booming on the Web. The makers of a small phone application might even devote a great deal of their budget to a Web animation that explains how the application works. However, animation adds a level of complexity that not everyone is equipped to immediately take on.
Animation is a time-based medium. It has the elements of not only height, width and depth, but also time. In this way, it is more like a website or catalog: it can change from moment to moment. But the difference with animation is that the time element is entirely under the designer’s control, and the viewer is just along for the ride.
Of course, organization is important. But audience profile, screen size and delivery method can greatly influence the visuals and your workflow. In this article, we’ll go over a few guidelines on how to start organizing your animation projects, as well as some tips and tricks to create a leaner and cleaner workflow.

1. Storyboards

Storyboards provide the best means of planning an animated project. They allow you to plan your composition and timing quickly before jumping into the final animation. They let you quickly determine all of the key elements before creating the final renders. This is also the best stage to trim down and make edits. Animation is a time-consuming medium, and you don’t want to give yourself any extra work. Try to define the 10 most important images of you piece, and then add and subtract boards to find the right level of detail to convey the scope of your project.

The first 10 boards are highlighted. The other boards are there to clarify or smooth the transition from one moment to the next.
Sound is another element to consider at this stage. It can give your project a backbone for timing. If you are able to purchase commercially-produced music, do this before you start animating, and then make your images follow the beat of the music. You could also use a song with the right mood and timing as a temp track and then have a musician create the final sound based on your animation.

2. Folders, Naming, Sequencing

Folders

Everything for the project should be kept in one folder. Most animation programs do not paste files into the animation, but simply point to the media. If a file is moved, the program will have a hard time locating the original file and might not display it. Different production houses have different systems, but generally they will sort their files into these folder and sub-folder categories:

• AEP or Flash project files
• Graphics/illustrations
  • Hi-res (screen size or larger)
  • Lo-res (screen size or smaller)
  • Storyboards
• Photos
  • Hi-res (screen size or larger)
  • Lo-res (screen size or smaller)
• Sound
• Text docs

• (Scripts and documents that you may have received from or given to the client.)

Video

• Edits
• Pre-renders
• Animatics (video renders of the storyboard)

This folder structure is very detailed. But not only will you be able to find something easily, but anyone else who comes into the project will also be able to navigate the file structure easily. At ad firms and commercial animation studios, other people may enter the project in process. They have to be able to help you, not fight to learn an unconventional organizational system.

Names

If you can, use some sort of coding system to indicate which project a file belongs to. This way, if it does get separated, you can locate it easily. You might use similar graphics for several projects. For instance, a globe is a common image that I use a lot because I do animations for GPS Web apps. They all look different, so the generic label “globe” would not tell me what the globe in a particular file looks like. Here is an example of a coded naming system:

• ADV_globe_all.ai

or

• Goloco_globe_NE.psd

The code will depend on whether your client’s name is long or short. Short names can be used in their entirety, but abbreviating long names into an easy-to-remember code helps.

Sequencing

If you plan to display one image after another, numbered file names can speed up your workflow. Most animation programs recognize numbers and will line them up one after another if you number them properly. Examples are:
Traditional frame-by-frame animation:

Carousel of images:

Photo slideshow:

Mouths for lip syncing:

Title sequences:

Because of the high volume of frames in animation, use a three- or even four-digit naming system. Spacing, underscores and dashes do affect how programs understand the files. Below are examples of correct and incorrect numbering:
Correct:

• face_001.jpg
• face_002.jpg
• face_003.jpg

Incorrect:

• image1.jpg
• Image_02.jpg
• image__003.jpg

Lower numbers should have zeros placed before them (so that number 1, for example, appears before number 10). Programs like Photoshop and Adobe Bridge can help with the batch renaming process.

3. Vector And Bitmap Graphics

Vectors have an infinite resolution, which is great for animation. Whether you use bitmap or vector, the images should be 72 DPI and RGB.
Computer and television screens both use these specifications. 72 DPI is the only DPI for video, and higher and lower quality videos will differ only in aspect ratio. Adobe programs have been constructed for a cooperative workflow; the names you give layers in Illustrator and Photoshop will carry over to AfterEffects and Flash.
In Illustrator, put elements that you want to animate separately onto separate layers and not paths.

4. Photos

For best results, resize your photos and bitmap images. If you will be zooming into your pictures, make them bigger than your overall frame size. If you will zoom in by 50%, then the dimensions need to be only 150% bigger than your overall frame.

If we want to zoom in on this character, we will need to make him bigger than the overall screen size, otherwise he will look pixelated.
If the images will be smaller than your screen, shrink them. Because all of the images are dynamically loaded, this will reduce the rendering time. Small images load faster than large images, so re-scaling before animation is a best practice.

Our thumbnails here will never be more than 50% of the screen size. Scaling elements to the appropriate size in Photoshop saves time later when rendering.
This may be a little confusing, but it is important; because rendering can take hours, and a bit of resizing can save an hour or two of rendering time and make a lot of media more manageable. Digital cameras all take pictures at 3000 pixels wide or more, but the largest video frame is only 1920 pixels wide.

5. Composition And Color

This is where knowing your delivery method and audience comes in handy. Images intended for a theatrical release won’t necessarily work on a smaller screen, and vice versa.

Screen-Size Comparison

Small objects can be too tiny in a Web video and become unreadable. Most Web videos use a smaller range of sizes so that the audience can properly view the elements. Elements that are too small on the Web can cease to be recognizable. A hairline turns into a line of pixels and a pupil becomes a black hole.

Web Scale

In any medium, color is important, but especially on the Web, where it is essential for creating contrast and guiding the viewer’s eye. Think of your composition as a set of shapes rather than characters and scenes, and you’ll be able to more easily produce effective graphic compositions that can be read at a variety of scales.

Using Color to Emphasize Elements

The area of greatest contrast is between the light-yellow shirt and dark-green bushes. The eye is naturally drawn there. However, consider those with color-blindness. Colors that “pop” for most people might not someone with impaired color perception. Throwing a quick desaturation filter over the project will highlight the weak areas of your color scheme.

Incorrect Use of Color Contrast

Though the orange and blue are complements and do attract the eye, they are the same value on the grayscale. By desaturating the image, we see the grayscale value of the colors. Someone with color-vision issues would not see this area as being the most distinctive.

6. Aspect Ratio And The Web

Most Web videos have a 16:9 aspect ratio (i.e. widescreen). Services like YouTube or Vimeo encourage this format. There are many “standard” sizes, but the most useful two are HDV/HDTV 720 and HDV 1080.
Both formats are widescreen, and both have square pixels. Computer monitors have square pixels, which means viewers will see a true representation of your final image. Programs like AfterEffects can simulate other screen types, but if your project is for the Web, make it work with square pixels.
If you are doing a project for broadcasting, consult your client, the venue or the broadcaster that will be presenting it. They all have different sizes and specifications to adhere to.

7. Where To Type

Animation programs have their own typography tools, or you can create your own in a program such as Illustrator or Photoshop. With Illustrator, you don’t have to worry about your text being too small or large because it will be a vector image. You can infinitely scale the type without losing quality or increasing rendering time.

For ornate titles or long scrolling credits, laying these out in a program designed for text is best. AfterEffects and Flash can do pretty much anything Illustrator can do, but in them you will not be able to see when text runs off the canvas, which makes it difficult to plan scrolling or zooming credits without constantly moving the text or rescaling to get a better view. Illustrator and Photoshop allow have more sophisticated tools for outlining and customizing the style of your type.

In addition, designing in Illustrator or Photoshop lets you focus on the design of the type. You can more fully concentrate on making your typographic design cohesive and interesting.


For small bits of text, though, you can type directly in the animation program.

8. Pre-Rendering

Creating “Proxies” is a great way to reuse elements and cut down on rendering time. They allow you to render a single layer or many layers. If the elements are finalized and you don’t need to change them, you can render them as a single video file with an alpha channel. You can even render animation with an alpha channel.

A field of twinkling stars becomes much simpler with pre-rendering. The field of stars can then be combined and pre-rendered again, thus making one video file of a starry sky that is easy to use again and again.

Most animation programs can handle video, as well as Photoshop and Illustrator files.

Programs such as AfterEffects easily handle alpha channels without any rasterization or dithering. This is especially useful if the elements have a lot of rendering-intensive filters. Effects such as layers are dynamically loaded into each frame. Video is usually 30 frames per second, so a simple blur filter will render hundreds of times in just 10 seconds. If you think about how long it takes to put a filter on a layer in Photoshop, you have some idea of how long it takes for the same filter to be applied to many frames in Photoshop.

1 second to render an effect x 30 frames / second x 10 second = 5 minutes of rendering.
You can also duplicate any animation or layer and use it over and over again. This makes kaleidoscopic animation much easier, and pre-rendering cuts down on rendering time. Programs such as Flash are good at nesting and handling “instances” of the same animation, but the equivalent in AfterEffects is pre-rendering and using a new video layer.

Flash and AfterEffects both have features that allow you to take complex animations and reduce them to a single layer.

Complexity can be built from a few simple elements with spectacular results.

9. Organize For Your Future Self

First, create a group in your project with the “Timelines,” “Scenes” or “Compositions” that are the final renders. This way you, or anyone, will be able to easily locate and render them again. Most video and animation programs have a bin or library and allow for easy internal folder creation.

Second, have a good incremental naming system for renders. Very often, the “final” render is not really final. Using numbers or letters, the computer will automatically order the files for you; and again, anyone will be able to figure out what was the last render. Your_project_final_Final_FINAL_v4.mov won’t clarify anything for anyone. In AfterEffects, movie files are named after their Compositions. I put a “v” at the end of each one so that I can easily insert the right number just before I render. When making Web versions, I change the “v” to a “w” to indicate that this is the Web version. A list of renders would look something like this:

• CI_TCfIH_edit_v1.mov
• CI_TCfIH_edit_w1.mov
• CI_TCfIH_edit_v2.mov
• CI_TCfIH_edit_w2.mov

Computers like numbers, letters and order. Exploiting this proclivity frees you up for more creative endeavors. Because animation can take up thousands of files, organization is critical.

10. Incorporating Live Action

If you need to incorporate a green screen or other live action footage, shoot in an HD format if possible. These tend to have larger aspect ratios than standard television sets, which leaves room for some cinematic tricks later when you’re working in the animation program.
We won’t get into lighting, editing or shooting in this article. But once you’ve mastered this considerable set of skills, you can bring those elements into your animation and make your live action elements interact with the animated ones.
Web videos, like the ones on YouTube, are 640×360: well below standard video HD sizes. This means you will have “extra” video. By filming your live-action with a locked-down (i.e. non-moving) camera, you will get the best of both a steady shot and a perfect pan. Simply insert your footage into a slightly smaller composition and animate its position. Motion also guides the viewer’s eye and highlights certain parts of the screen. But panning the camera can make it hard to line up live-action and animated elements.

These images are shown to the correct scale. We could shrink the large video even more for better framing.

11. Have Fun And Experiment

Animation programs are a combination of two to three smaller graphic design programs plus a video editor. They have a wide range of effects, tools and capabilities. Only by playing around with it will you really learn what the program can do. However, only by trying something you’ve never done before will you find out what you’re truly capable of (i.e. turn it up to 11).