Animated Self-Portrait

By following this tutorial you will create a small, animated portrait of yourself sitting at the computer. The animation will be similar to the one shown above...but personalized with your own look, your own PC and your own decorations. The animation part of the tutorial is fairly easy, only 3 frames, however, drawing of the self-portrait may be a little challenging!! ;-)

I'd like to see you be creative when following this tutorial and make it your own SELF-portrait rather than making it exactly like the example. After all, the purpose of these tutorials is to teach you techniques so you may create your own original art....not to teach you to copy!

This tutorial was written for Paint Shop Pro v.7 and Animation Shop v.3 and was written for an intermediate skill level. You should be familiar with the most commonly used tools in Paint Shop Pro and Animation Shop.

Open new image in Paint Shop Pro

For fast loading, we'll be making a small image with only 3 animation frames. We'll start with an image that is 150x150. Do not fill the entire canvas with your drawing...leave a little 'elbow' room......we'll crop it smaller later!

OK, lets get started! Open a new image: Width and height 150 pixels, transparent background, 16 million colors.

Note: I have used a gray-blue for the background color in these screenshots instead of the checkerboard pattern for transparency. I thought it might help you see some things a little better.

I like to work with multiple layers and I will suggest a new layer for nearly every step in this tutorial. This animation can be created with only 1 or 2 layers, but I find it much easier to rearrange things and change my mind or make corrections if all objects are on they're own layer.

Draw Monitor and Keyboard

Create a new layer and call it MONITOR. Set your foreground/stroke color to black and your background/fill color to a beige or dark gray or whatever color your own monitor is!

Select your Preset Shapes tool with these settings: Rounded Rectangle, Stroked & Filled, Line Width 1, Anti-alias & Vector UNchecked.

Draw a Rounded Rectangle about 70x50 in the upper center portion of your canvas...this is the monitor. Switch to a Circle with the same settings and draw a tiny knob or 2 in the lower corner of the rectangle.

Switch your background/fill color to whatever color you want for your computer screen...I chose a pale blue (the stroke color will stay black). Draw another Rounded Rectangle centered inside the first rectangle. This will be your monitor screen. Zoom in and turn on your grid guide to help position the screen in the center of the monitor. Now add a couple of white lines for glare. Use the Line Tool set at 2 pixels to draw a white line along the left and top left of your monitor screen.

Add a new layer named KEYBOARD. Stroke color black, fill color the same as used for monitor. Using the preset shape Rectangle (same settings as above) draw a rectangle for your keyboard below the monitor. This should be slightly wider than the monitor, about 80x15.

Next, let's add some perspective to the keyboard...select the Deformation Tool. Hold down your Control Key while you grab one of the upper corners of the bounding box with your mouse and move it a little bit towards the center until you're satisfied with the keyboard's shape.

Now we'll add some details to the keyboard. Draw a narrow Rectangle (same colors, same settings) at the bottom of the first rectangle to add some 'thickness'. Next, add some random black lines (1 pixel) to represent your keys.

Add Mouse and Text on Monitor

Add a new layer named MOUSE. You may have to move the monitor and keyboard off to one side a little to make space for mouse and mousepad. Just use the Mover Tool and move them over. No need to select first when object is on layer of its own!!

With your MOUSE layer the active layer (stroke color black, any color for fill), draw a mousepad with the rounded rectangle shape.

Switch your fill color back to the monitor color and use your Shapes Tool to draw an elongated ellipse for your mouse. Start the ellipse just below the top of the mousepad. Use your Brush Tool and/or Line Tool to add some details to the mouse. See close-up for example. You can also erase and flatten one end of the mouse and add a center wheel. Don't forget to add a cord to connect the mouse to the PC (unless you are wireless)!

Add a new layer called TEXT. Make some random marks (broken lines) on the computer screen to represent text. The computer screen will be animated later, so make sure 'text' is on layer of its own. I made my text by drawing a series of one pixel black lines across the screen; then used the Eraser Tool set at 1 pixel to scribble across, up and down, erasing portions of the lines.

Add Yourself and Chair

Next we'll make the chair...add a new layer called CHAIR. I will make a black chair...you make the color and style of your own chair!! Center the chair just below the keyboard. Use black as your stroke color and any other color for fill. Draw a Rounded Rectangle for the back and a Rectangle for the seat. Connect the back and seat with more rectangles to represent the chair frame.

Now...let's put YOU in the chair! Create a new layer below the chair layer (so you'll be behind the chair back). With black and a 1 pixel brush, draw a freehand outline of shoulders, arms and hips. Don't worry about hands yet, just make arms hovering over the keyboard. It may help at this point to turn off visibility for the KEYBOARD layer, so you can tell your new lines from the keyboard lines.

Next, fill the body shape with your choice of color. Use a lighter shade of the color to make a few highlights on the arms. You may want to put some highlights on your chair too.

Add New Layers for Details

Because there may be a lot of corrections/changes to make during the next step, make another new layer...call it SELF. Draw your hair. Using the Brush Tool set at 1 pixel, make a black squiggly outline. Fill with your hair color. Using a lighter shade of the same color, add some highlights. Don't forget to add ears if your hair is short or you have it pulled back!! *G*

Before we do the hands, let's add some personality to the image. Add another layer called STUFF and put some of your favorite things on the top of your monitor....a plant or flower in a vase, a clock or some other doodad. In keeping with my cowgirl theme, I'm going to add a cowboy hat and a cactus plant. You can use some tubes if you want...but I'd rather see you create your own simple line drawings.

Hands and Fingers

OK, now back to the hard part...the hands and fingers! Activate your SELF layer or make a new layer for the hands. Use the Brush Tool set at 1 pixel and the color black, draw an outline for oversized hands connected to the arms. For my own self-portrait, I'm wearing gloves. You do your own personalized version of hands. Make each finger in a slightly different position over the keyboard.

btw...Most cartoon characters only have 3 fingers and a thumb....so let's keep it simple and do that! Draw simplified hands and fingers and don't worry about details. Use the Eraser Tool to erase a pixel here and there to make ends of fingers appear rounded. Because we're working very small and not using anti-alias, so your rounded ends won't be 'perfect'. Just create the illusion of fingers!

Refer to the next page for a detailed explanation of drawing hands (opens in new window). Remember, you don't have to match my drawings exactly, just make the hands in each frame look a little different than the others!

Now it's time to add your signature. Use the Text Tool and put your initials or name on your image. Use the Crop Tool to crop your image to it's smallest possible dimensions. Now SAVE the file in .psp format.

Prepare the 3 Frames for Animation

Make THREE duplicates of your PSP file (Window>Duplicate). These will be Frame 1, 2, and 3 of the animation. We won't be making any more changes to the original PSP file. You can close the original image. (Always save a PSP copy in case you have to re-do something!)

Frame 1: Merge all layers on just one of the 3 duplicated images. Layers>Merge>Merge Visible Save this image as frame1.psp or a similar filename. (It will be the first frame of the animation...so include the number 1 in the filename.)

Frame 2: Select another one of the duplicated images for Frame 2 of the animation. On the Layers Palette, turn OFF visibility for the layer on which you've drawn the hands and also the TEXT layer (the monitor screen text). Select Layers>Merge>Merge Visible.
(Note: This option will be grayed out unless the active layer on the Layer Palette is one of the visible layers.)

On the Layer Palette, move the MERGED layer to the bottom, if it's not already. Save this image as frame2.psp.

Turn visibility for the TEXT layer back on. Use Mover Tool to move the monitor screen lines on the TEXT layer UP...very carefully....only 1 or 2 pixels.

Now turn visibility for the HANDS layer back on. Edit the fingers on the hand layer to place them in a slightly different position than they were originally.

Click here if you need to refer back to the detailed hand and finger instructions.

Select Layers>Merge>Merge Visible and save frame2.psp again.

Frame 3: Select the last of the 3 duplicated images and save this copy as frame3.psp. Repeat the steps used for Frame #2 to re-position the monitor text and to re-draw the hands. First, turn off visibility for TEXT and HANDS layers and Merge Visible. Turn visibility back on to edit the fingers for this frame of the animation and move the text lines on the monitor up 1 or 2 more pixels more.

Select Layers>Merge>Merge Visible and save frame3.psp again.

Close all images and open Animation Shop.

Export to Animation Shop

Save Animation and Optimize

Now SAVE the animated GIF. A dialog box will appear to select directory and give the file a name. Next, another dialog box will appear asking for 'Animation Quality Versus Output Size'. Because we've made this animation small, with only 3 frames, we can select 'best image quality' when saving and still have a small enough file size for a fast loading animation. So keep the slider at the top for 'best image quality'. Also, underneath this slider is a 'customize' button. Select this button and set your colors for 256 (255) and optimized octree. Select OK and then NEXT. The dialog box will then show you a preview of the animation and you have the option of going back and changing the previous settings. If you select NEXT, Animation Shop will show you the approximate download time for your animation. When done, select FINISH.

You have now created your own animated self-portrait that looks like no other!!

Use it in eMail and on webpages. Maybe as an 'Under Construction' sign!!

Refer to my Animation Troubleshooting Tips if your run into a problem.

MORE TUTORIALS     

Content and images* are the exclusive property of ArizonaKate.com. This tutorial may not be copied, sold or distributed in any format, including sending by email or posting in forums, without first obtaining permission from Arizona Kate.

Graphics Groups may link to tutorials, but may not copy. Please take the time to read Terms of Use and FAQ. A limited license is herein granted for personal use only. If you are interested in a license to reproduce tutorials or images, please contact Arizona Kate.

*Copyright Exclusions: Fonts and dingbats will sometimes be used to create tutorial images and I do not claim copyright for these. Banners and logos linking to other sites are property of the respective website. Scripts have been used with permission as noted in source. Many 'Arizona Kate' character images created from commercial clip art or photos and from dingbats.