by Bob Self
Special to Digital Media Designer
myself@bobself.com

In the summer of 2000 I was hired by David E. Kelley Productions to produce character animations for the Fox series Boston Public. The animations would be photographed practically while playing back on a computer screen as part of a fictitious Web site.

To achieve this effect many Web designers would turn to Flash, but the Flash format restricts Animators in their use of certain types of graphics and effects. Flash features are limited in controlling and manipulating motion over time and achieving certain looks and textures due to bitmap versus vector issues, and simplified keyframe and time controls restrict subtle or last minute changes. Instead, I used several products to achieve the visual results and flexible workflow I wanted. I created the art in Adobe Photoshop, animated in Adobe After Effects and delivered the final product using Apple Quicktime. Unfortunately, I didn't prepare for Fox.com asking me to post the animations as low bandwidth files on the show's real Web site.

How it was
At the beginning of the 2000/2001 television season there were limited tools for creating character animation for both television and the Web. In the 2001/2002 season, things are looking a lot better. Following is the process used to make the original animations for the show and repurpose those animations for the Web. I have also outlined how I would go about this differently today given the advances in current software.

I created five human characters, a horse and a gorilla based on the script for the first episode. The clothing on the human bodies was to look like simple line art. The character heads, horse and gorilla would be photographic.

Bob Self: The man and his gorilla.

Each body part was created on its own layer in Photoshop making the character setup in After Effects a breeze. A typical forward-facing character would consist of one layer each for torso, upper right arm, lower right arm, right hand, upper right leg, lower right leg, right sock, right shoe, with the same parts on the left side. The head would be several head layers with different expressions such as a smile or a frown and opened and closed eyes.

The horse's beginnings in Adobe Photoshop

go to page 1, 2, 3, complete, home