Mobile Video Shorts for Still Image Artists (Part 2)

In this tutorial we take things a step further, using a vector program (in this case Illustrator) to create a character face, then importing it as a Smart Object in Photoshop. The advantage of Smart Objects is that the character face remains resolution independent, and you can go back and forth between Illustrator and Photoshop. You can re-size the Photoshop file larger or smaller and retain crisp edges. You can size up the character for a poster, or size him down for a mobile video. You can distribute the character in videos made for a variety of different devices, from HD television to iPod videos. On top of that you can easily combine the character with bitmap graphics, using Photoshop's extensive manipulation and processing capabilities. We begin by reviewing how Photoshop layers are used in animation.

Using Photoshop Layers for Traditional "Cel" Animation
In cel animation each frame of the animation is created and photographed and then played back at 24 fps (frames per second) for the illusion of motion. To save time, the animator creates a background scene (like a highway) and then overlays moving objects on the scene, using transparent cellulose acetate (cels) painted with one frame of the moving object. The various parts of the scene are lined up with each other (registered) by punching holes in the acetate (like a paper punch) and mounting them on "registration" pegs.

Photoshop layers act as the digital equivalent to this system, stacking images on top of each other. You can vary the transparency between layers and blend them in different ways.
In the case of our red-faced character animation the starting point is a bitmap image, a drawing of the face. The original was 300 dpi in size, suitable for a poster, but too big for the web. We were able to reduce the size of the face in Photoshop without noticeable loss of quality.

By default, a Photoshop layer completely obscures the layer below it. Since we are going to export each layer of the image as a discrete frame of animation, we used this default behavior. The first step was to duplicate the face on a new layer in the Layers Palette.

On the new layer, the eye lids were painted partially shut. By clicking on the visibility icon beside the new layer, you can preview the effect of the partially closed eyelid.

Hiding or Unhiding the Layer

The new layer was then duplicated again, creating a copy on the layer above. The eyes were then painted three-quarters shut. Finally this layer was duplicated again and the eyelids painted shut. The layers were then exported as images, using the technique outlined in this Photoshop tutorial. (Scripts > Export Layers to Files) Then the original head was opened in a new Photoshop file, the head was cut out using a selection tool and moved down slightly. That frame was exported. The "head bob" frame and the other four eye animation frames were imported into Flash, animated and exported as a compressed Flash SWF file.

The advantage of using Photoshop layers to produce frames for animation is that the frames are perfectly lined up with each other. The animation can be "previewed" by turning the visibility of the layer on and off. And you can quickly do a test animation by exporting the layers as files and loading them into Photoshop's companion program, Image Ready, for a quick animation test.
The disadvantage of this approach is that the images are of a fixed size. Well the red face image scaled down to an acceptable image, it cannot be scaled up again without the image becoming blocky. Not being able to scale up limits the usefulness of the animation in a video where you will need views of the character that range from close-up to distant.

Shape Layers

Photoshop originated as a bitmap (pixel-based) program for manipulating digitized photographs. As it evolved it began to integrate features of the other type of image processing program, vector illustration, of which Adobe Illustrator is a prime example.
Illustrator defines shapes mathematically, allowing you to downscale or upscale an illustration without loss of detail or edge definition. While you can convert a vector illustration to a bitmap Photoshop image, the ideal work flow is to merely embed the vector image inside a Photoshop image, on its own layer, and then have the option to export it back to Illustrator later for touch up if necessary. Although vector layers (called shape layers in Photoshop) have been part of Photoshop since Version 6, the ability to go back and forth between Photoshop and Illustrator easily and seamlessly only became possible with CS2. Photoshop calls this technology Smart Objects.

Shape layers are similar to other types of layers, in that they allow you to work on an image layer without affecting other layers, and you combine them with other layers using blending modes, opacity and layer styles. Because they embed vector shapes, you can scale them losslessly, and experiment with colors and effects by saving layer styles.

You do not need to use Illustrator to create your illustration. Photoshop has a pen tool with much of the same functionality as the pen tool in Illustrator. However Illustrator pen tools are much easier to use and more capable, making it the preferred application when you create complex illustrations. The way you use the pen tool and shape layers in Photoshop will become clear as we progress through the tutorial.

Creating the Animated Cartoon Face

The tutorial assets for this segment of the article are found here.
The base cartoon face (called "sue.ai") found in the zip was created in Illustrator. What you see is the face without the eyes and mouth. That's what we are going to add in Photoshop. The zip also contains the finished PSD file.

1. To begin, create a Photoshop document that is 576 pixels wide by 704 pixels high. This the screen ratio of mobile video.
The next step is to bring the base face (sue.ai) into the document. There are two ways of doing this. The recommended way is to open sue.ai in Illustrator and drag her into the Photoshop document. The second way is to "Place" the .ai file in a Photoshop layer. Since we will not be using the editing feature of Smart Objects, we'll do it the second way.

2. Use the file menu's "Place" command to open and insert sue in the background layer of the open Photoshop document. Position her and press Enter.

Now we'll create an eye pupil using the shape tools.




3. Select the Oval shape tool to make the eye's black pupil. The Oval Tool is one of the basic vector shapes that you can use as a building block to create more complex shapes. Make the foreground color black by clicking on the "Set foreground color" box at the bottom of the tool panel.

When the Shape Layers tool option is selected, Photoshop automatically creates a shape layer when you draw on the screen with a shape tool.




4. If it is not already selected, choose the "Shape Layers" option at the top left of the screen.


5. When you draw the oval for the pupil, a new shape layer is created. Double click on the layer's default name and rename it "Pupil."



6. Add another white oval inside the black pupil for the eye hi-lite. The new oval uses the current foreground color, black. You can change the color of the shape by clicking on the shape's thumbnail in the layers palette and choosing another color, in this case white.



Now group the pupil and its highlight so that they can be manipulated as one.

7. Shift-select the highlight and pupil layers, go to the Layers menu at the top, choose Layer > New > Group from layers... A dialog box comes up. Enter the name "Eye Left" for the new group. The new group is formed from the two layers.

Now make a copy of the pupil for the right eye.

8. Select the Move tool (v) and press down on the Alt key. Select the left eye pupil and drag a copy over to the right. A new group is automatically created in the layers palette. Double-click on the default name and rename the pupil to "Eye Right."



Now we are going to link the eyes so that they move in unison.


9. Select the two eye groups, and right click on them. In the context menu, select "Link Layers." A link symbol appears beside the names of the two eye group layers.
Now when you click on one of the pupils with the Move Tool and drag it, the other pupil follows it.



You can now generate a series of frames where the eyes look from one side to another, by saving the image each time you move the eye.

You can also build the mouth in illustrator or in Photoshop and animate it using the same techniques as the eyes.

If you were building a scene, you could place in the background a Photoshop-enhanced bitmap image. The resulting image or animation frame combines the flexibility of a vector graphic (illustration) with the density and complexity of a photograph or other bitmap image.