• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 4. 2-D Animation > Ink and Paint

Ink and Paint

In a traditional animation environment, when animators complete their drawings, an inking artist draws over the animator's lines on a transparent sheet of celluloid (called a cel). The paint artist then flips the cel over and paints the color on the back side, using a standardized palette. The result is that the drawing lines are filled in with flat color, but the edges are hidden by the black inked lines. Cel animation rarely uses gradual shading on characters, because this procedure is very time-consuming and difficult to inbetween. Flat colors are much more efficient to work with, and this efficiency extends to the Web, where flat colors compress much better than shaded fills.

In traditional animation, after a pencil test is approved, drawings are cleaned up and inked onto clear cels, and then these cels are scanned or painted before being composited into the final film. When you are shooting a pencil test on the computer, the temptation is strong to skip the inking process and simply paint the scans used for the line test. The catch is that the scanned drawings will often be very rough, with varying line weights, and may not scan cleanly. Light lines may simply dis appear from a scan, especially if you're scanning in 1-bit black-and-white mode. To combat this problem, you'll have to either clean up your original drawings with very solid, even lines, or you'll have to utilize an inking stage to clean up lines in your animation or paint program.

Keep in mind that scanned drawings often have small gaps in areas that appear to be enclosed by black lines. These holes let paint spill out of a painted area and into the background region or some other part of the drawing. If such gaps do exist in your drawing, you'll need to go in and carefully close them off with a single-pixel brush (see Figure 4.16).

Figure 4.16. Gaps in the lines of a scanned image result in color spills into adjacent areas.

You can easily accomplish the painting step by filling in solid areas with color by using a paint bucket or equivalent tool that pours color into areas bounded by black lines. If you feel that you need to be able to edit colors in your cels, and if you have a program that supports layers (such as Photoshop), you may want to create a new layer for color fills.


In Photoshop, use the Magic Wand tool to select the interior of the region to paint; choose New Layer in the Layers palette; and then, with the new layer selected, use the Paint Bucket to fill the selected region. This process slows your work, but in some instances, you want to be able to edit color fills.

Most paint programs let you use a custom color palette so that you can use consistent colors throughout an animation.

For Web animation, you'll want to consider using the standard 216-color Web-safe palette when painting in your characters, to ensure that the animation will look right on all browsers and machines.


When you use Photoshop, Painter, or a similar program, you can create a model sheet of the character (a page showing the character drawn in many different poses that all animators working on the project can check for consistency) and paint this with the character's chosen standard color palette. You can then keep a small copy of this image open in a corner of your computer screen and use the paint program's eyedropper tool to grab colors from the image while coloring cels. This practice ensures that your color fills always match the model.

In vector drawing programs, such as Adobe Illustrator, Macromedia FreeHand, and Flash, bitmapped drawings (such as those that you get from a scanner) can be traced by using smooth lines and solid areas of flat color. These programs even have autotracing features, which can make fast work of tracing scanned images, although a lot of trial and error is usually needed to get the right look from frame to frame.

A problem with autotracing (see Figure 4.17) is that it usually captures drawn lines as filled areas of black and blank color spaces as empty background. This means that you can't simply go in and fill areas with color in an autotraced image. A related problem is if you scan hand-drawn images and import them as a tracing template, you'll end up with overlapping lines between color regions, because you'll have to trace over both areas to create enclosed regions for color fills.

Figure 4.17. Autotraced lines in vector programs are seldom perfect


With vector-based animation in general, you save a lot of time if you can find an acceptable way to create your artwork digitally from the outset.

Alpha Channels

When you finish coloring, you'll want to create a background mask, or alpha channel, for your art. Or, if your animation supports chromakey masking, rather than creating alpha channels you'll want to fill the background of the cel with the chosen chromakey color.

Alpha channels are to digital artwork what a frisket, mask, or stencil is to an airbrush artist. A frisket is a thin sheet of sticky transparent plastic that the airbrush artist cuts away to reveal only the part of the paper that she wants to paint on. If you imagine the artist painting on a sheet of glass, rather than paper, the artist peels away the frisket to reveal the clear glass underneath. Anything behind the glass shows through, while the paint obscures the background. This technique, in fact, is used to construct many matte paintings for film. The painter paints a scene on a pane of glass, and this scene is then composited optically or digitally with live-action footage.

An alpha channel is a mask for a digital image or animation. Where the alpha channel is white, the animation is visible in front of the background; where the alpha channel is black, the background is visible. Alpha channels, however, have a very significant advantage over friskets: The mask can be semitransparent and can preserve detail as fine as a single pixel. This means that the animation will be blended into the background wherever the alpha channel is gray, and it will be blended smoothly wherever the transition from black to white is smooth, because dark gray reveals more of the background than light gray. Animation programs that support alpha-channel compositing, therefore, offer very fine seamless blending of foreground and background objects.

The sphere in the 3-D rendering shown in Figure 4.18 is semitransparent, and its alpha channel is gray, not white. The cube, meanwhile, is opaque, and its alpha channel is all white. When you composite this image by using the alpha mask, the underlying image shows through the sphere but not the cube.

Figure 4.18. An image and its alpha channel.

Key Color

In some cases, such as with animated GIF files that you want to appear with transparent edges over a Web page background, alpha blending is not supported. In such an instance, you'll need to set a key color for the animation's background. Wherever pixels of this color appear in the frame, it will be transparent, and the background will show through. This means that you'll want to choose a key color that exists nowhere else in your drawing. If your artwork is all reds and greens, for example, you may want to choose blue for the key color.

Keep in mind that chromakey transparency, unlike alpha blending, won't blend the gray edges of black lines into the background, which can result in ugly white or colored borders around your characters. The way to prevent this problem is to use aliased lines, with jaggies, so that the key color fills right up to the edges of the lines. Alternatively, you can set your software's paint-bucket tolerance fairly high when filling the background with the key color, so that it bleeds into the line edges; this procedure allows you to preserve antialiasing in the "internal" lines of the artwork.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint