Mobile Video Shorts for Still Image Artists
February 17, 2007 9:37 pm
Mobile Video Shorts for Still Image Artists
Philip Shaddock, Pocketcine.com
It may come as a surprise to some people who use such tools as Adobe Illustrator or Photoshop to create illustrations, retouch photos, create montages or develop single images from scratch that these programs can also be used to create animations for mobile media. I have written this tutorial specifically for still image artists who want to enter the Pocketcine contest on Renderosity.com, but do not use animation programs like Macromedia Flash. I will show you how to create simple and even complex animations without leaving Photoshop and its companion animation program, Image Ready.
Part One: Animating a Walk Cycle in Photoshop
If you do not regularly create graphics for the web, or graphics for video, and you use Adobe Photoshop, then you might not have explored a program that comes bundled with Photoshop, called Image Ready.
Image Ready can create gif animations, those small animated images you see on many web sites that preceded Flash animation. Gif animations can be imported into video editing programs like Adobe Premiere where they retain their step-by-step motion. You can also convert gifs to a common video interchange format, avi, and then import it into a program for adding music and sound effects. Just do a search on Google for “gif to avi convert”. You can also import gifs into Flash, a subject we will cover in the next tutorial.
Animations like a waving flag or a flying bird are simply a series of images with small incremental changes, like the flapping of a bird's wing broken down to 15 different stages. When individual frames are played back fast enough in a gif animation, they fool the eye into seeing continuous motion.
The advantage of using Photoshop for simple frame-by-frame animation is the wealth of tools found in the Photoshop application. And Photoshop image layers have special advantages for frame-by-frame animation, as we will see.
In this tutorial we are going to use a series of images of a man walking up stairs. The images come from studies of motion made by the Victorian photographer Eadweard Muybridge, who used stop-motion photography to freeze movement into discrete frames. Our source is a study of a man walking up stairs, from a photographic plate he published in the late 19th century:
Muybridge Stop Motion Plate
Here is the finished animation we will be creating. We created him so he is walking on one spot...as if the camera is following him at right angles.
Animated Man Walking
So you can follow along with this tutorial, we have uploaded the full size Muybridge asset here:
Save this image to your hard drive.
We assume a working knowledge of Photoshop in this tutorial and that you have a recent version.
Refer back to the Muybridge plate above. Muybridge has shot a complete walk cycle that begins with the man's right leg propelling him up the stairs, then the other. The first and last frame match, so we are going to use only eleven of the twelve frames to create the stair climbing animation cycle. If we left in the last (twelfth) frame the man would appear to hesitate on the last frame of the cycle before continuing on.
We could simply cut up the individual frames in Photoshop, save them as a numbered sequence and then load them into Image Ready. But this would create an animation where the man would appear to bob around in the frame because the body would be framed differently in each image of the animation cycle. In some frames he would weave back, then forward, jumping erratically up and down. To correct this, we will use semi-transparent Photoshop layers to line up the body to the same reference point.
We cleaned up the background and adjusted the colors in each frame of the original reproduction because each frame is exposed slightly differently. We'll also use Photoshop's filters to give the sequence a more graphic and colorful look.
Preparing the Image
1. Load the image into Photoshop.
2. Use the Image > Adjustments > Warming Filter to give the image a slight greenish tone. (You can change the selected color by clicking on the color swatch and choosing a different color.)
The Warming Filter
Now we are going to cut the image up into individual frames and save them as individual files on the hard drive.
3. Using the
Rectangular Marquee Tool, drag around the first frame of the
man walking up the stairs, use Image > Crop to trim and
save the resulting single frame as an uncompressed
windows bitmap (bmp) with the file name 01.bmp. After
saving, undo the last action (Ctrl-Alt-Z) to return the image
to full size again. Use the marquee tool to select the second
frame, crop that and save it as 02.bmp. Repeat until you have
created all 11 frames as individual bmp files. The twelfth frame is
Now we are going to load these individual items back into a single image file with layers, using as our new image size the pixel dimensions of the QCIF cell phone screen.
4. Open a new file, select RGB color and size it as 176x144 pixels. This will create a portrait-oriented file.
5. Create eleven new layers by clicking on the New Layer button at the bottom of the Layers Palette.
New Layer Button
6. Select Layer 11, use the File > Place command, and select the 01.bmp image, press Enter to confirm.
7. Select Layer 10 and place 02.bmp. Do the same for the other layers and images.
8. The images will have white borders on each side. Using the paint bucket and a black foreground color, click on the 01 layer, answer "yes" to the question about rasterization, and fill in the white sides. Then turn off the visibility of layer 01 by clicking on the "eye" icon beside the layer name.
9. Click on Layer 2 to select it and fill in its white sides. Click on the eye icon to hide the layer. Repeat for all the layers. Delete the empty ground layer.
10. The visibility of all the layers should now be turned off. Turn on layer 11 and remove the staircase. (We used the marquee tool to select the area to delete and then press the Delete key. We then fill in the deleted area with the black of the background. Then we centered the walking man horizontally and moved him down in the frame to match what you see here:
The man is not actually going to walk up the stairs...he is going to march on the spot. We are going to use the position of the man in Layer 11 as a reference for all other layers. Lock the layer by clicking on the Lock Icon at the top right of the Layer Palette.
11. Select Layer 10 and turn its visibility on. Delete the staircase. Using the Opacity slider at the top right of the Layers Palette, make the layer semi-transparent by moving the slider to about the 50% mark. You should see the man on Layer 11 showing through. (Make sure Layer 11 is visible.) Now select the man and move him so that his head and shoulders overlap reasonably well with the man in Layer 11. Move the opacity slider back over to 100% and hide Layer 10.
12. Do the
same for each successive layer, deleting the staircase and moving
the man so that he lines up with the man in Layer 11.
Creating the GIF Animation in Image Ready
The next step is to export the layers of the image as images. Then the images can be loaded into Image Ready. Make sure all the layers of the image are at 100% opacity before you start.
1. Create a folder on your hard drive.
2. Under the Photoshop files menu, select Scripts > Export Layers to Files. Save the layers to BMP type files in the folder you just created.
3. Now open up Image Ready.
4. Under the
File menu, select Import > Folder as Frames. Navigate to the
folder where you just saved the Photoshop layers as files and
5. Click on
the play animation button just below the third frame of the
animation in the animation palette.
The completed animation
At this point you can save the animation as a GIF (using the file menu's "Save Optimized As...") and then load it into a program like Adobe Flash for further animation, such as a walk up stairs. Or you can use the actual BMP files in the Photoshop export folder you created earlier.
Part Two: Face Animation Using Photoshop Layers
In this first part of this article, we showed how Photoshop can be used to generate fixed sized frames for an animation.
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.
Creating a New Layer
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.
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 is 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.
Choose from a variety of 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.
Select the shape layers option.
4. If it is not already selected, choose the "Shape Layers" option at the top left of the screen.
Oval for the pupil
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."
A shape layer is automatically created...
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.
Changing the shape color
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."
The duplicated eye.
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.
Here are the links to my previous tutorials:
For more information, please visit Pocketcine.com
February 19, 2007