The Singing Snowmen : graphics tutorials : footprints in the snow

This tutorial uses Paint Shop Pro : a free download is available here, but the full version is even better! If you are planning on doing your own graphics I would consider it a worthwhile investment.

Before you can make a footprints divider, first you need to make a footprint tube : open a new image around 150 x 100 in white. Using the paintbrush tool, select a pale grey and draw a freehand "sole and heel" outline shape (see figure 1) Next select the "magic wand" tool and click inside the heel shape - it will be selected and show a moving dotted outline. Hold down the shift key and click the magic wand in the sole part too - both heel and sole should now be selected. In the top toolbar, select Image - Effects - cutout, set the shadow colour to black and make sure the "fill interior with colour" box is NOT selected, and use the following settings : opacity 60, blur 20, vertical -10, horizontal 10. Click "OK" and then right-click on your image to deselect. Your image should now look like figure 2.

Fig. 1

Fig. 2

Fig 3

Use the magic wand tool again and click on the area OUTSIDE the footprint shape to select it, then Ctrl-Shift-I to invert the selection (the dotted line will appear around the outside of the footprint) Ctrl-C to copy and Ctrl-V to create a new image. (The checker effect indicated a transparent background.)

If your version of PSP allows you to do so, you should now turn this image into a tube as this will allow a neater reduction in size : File - export - picture tube; give the tube a name such as "footprint" and click OK. You can then shut down all open images.

If you HAVEN'T got the facility to create your own tubes, then resize the image to the size you want the footprint to be : use the percentage option in Image - Resize or specify the number of pixels : this image is 25 pixels wide : about the same size as the footprints used in this demo (although I have used my own tube.) Save this image to use later.

To make a "footprints-in-the-snow" divider, open a new image the size you want your finished image to be - around 500 x 75 is about right (click on "file" then "new" and set the background to roughly the same colour as your background.) Now hit the L key on your keyboard - this will open the Layers Palette : if you click on the arrowhead in the top right corner of the layer palette it will stay open and be easier to use (you can drag/resize it like any other window.) Click on the icon (in the layer palette) which looks like two sheets of paper - this will give you another layer. Double-click on its name in the layer palette and rename it "white." Select the colour palette at the extreme right of your main window : click on the top one of the pair of boxes and select white. Using the flood-fill tool (the one which looks like a bucket pouring out) and fill the layer with white.

Open a third layer and name it "line." Use the paintbrush tool and grey, and draw a line roughly across the centre of the image - it needn't be exactly straight.

Non-tube method : Open your footprint image now and hit Ctrl-C.

Ctrl-L will create a new layer with the first footprint on it : use the move tool (four-way-arrow) to position it just above the centre line. On the Layers palette, double-click on the name of the layer and rename it "1" in the layer properties palette.

Repeat this process with footprints on alternating sides of the line, renaming the layers, in numerical order, as before .

Tube method : Create a new layer and rename it "1" : open the tube tool (it looks like a paintbrush with a blue inkpot above it) and hit O to open the Options palette - lock it open by clicking on the downward-pointing arrowhead in it stop right corner. Find your tube (did you call it footprint?) and resize it - this may take a bit of trial-and-error to get the size you want, I have used 10%. Click the tool cursor where you want the footprint to go.

Open a new layer, rename it 2, click with the tool for footprint number 2 and carry on as before, opening and renaming a new layer for each footprint, until your image looks like the one below. (You can fiddle around with the final positions of the footprints with the "move" cross-arrow tool.)

On the layer palette, click on the spectacles next to the name "line" - the grey line should disappear. Now click on the word "white" in the layer palette to highlight it. Click on the "Selection" tool in the tool palette (the one that looks like a dotted rectangle.) On the Options palette select "rounded rectangle," Feather 10 and check the antialias box. Placing the cursor cross-hairs about a third way down the image and an equal distance from the left-hand side, hold the left mouse button down and drag a rounded rectangle (actually a sort of "lolly-stick" shape) across to the same distances inside the bottom right corner, then release the mouse button. The dotted rectangle will expand - don't worry, it's supposed to. Now hit Ctrl + Shift + I and the dotted lines will alter again as the selection is "inverted." Hit Delete and the image should now look like the one below.....

On the Layers palette, "switch off" (click on the spectacles icons so that a red cross appears through them) ALL the layers except Background and White.

**Shift+Ctrl-C then Ctrl-V will give you a copy of the image. Make the background transparent by selecting Colors (top toolbar) and Set Palette Transparency, click Yes then OK, click the dropper tool on the image's background with BOTH buttons (one at a time) then OK; Shift-V then save this image and name it*** footprints_01.gif.

Return to your multi-layered image : "switch on" the layer you named 1 : a single footprint should appear. Repeat from ** to ***, and this time name your image footprints_02.

Continue adding one footprint at a time, and don't forget to save each layer and name it in sequence until you have opened all the footprint layers and saved them in order.

To make the footprints "walk" - open PSP's Animation Shop (File - Run Animation Shop) and select File - Animation wizard. On the following menus / palettes as they open select the following settings :

Same size (then click Next), Transparent (click Next), Centered and Canvas Color (Next) Yes, repeat... and 50 (100ths of a second) and next again. The next menu is the add image menu. Open all the footprints images you have made and make sure they are in the correct order - use the "up" and "down" options if necessary. Then click on Next and Finish. Your images will now appear like a film-strip : to see them move, click on "View - animation." If you want to alter the timing of any of the frames (e.g. the first and last ones) highlight them (one at a time) by clicking on them, then select "Animation - Frame properties - and reset the display time for that frame to however long you want (remember, it's in hundredths of a second.) Any changes you make will be visible in the animation display.

When you're satisfied with the final appearance, it's time to save the animation : File - Save As and name the animation (it MUST be saved as a Gif image in order to preserve the transparency and the animation) For this image I have used all the default settings and simply clicked through all the "Next" buttons; the final animation is less than 5KB.

You can use this animated divider on your web page just like any other Gif image : simply install with the <img src="footprints_bar.gif"> tag (please note, if you are using a pagebuilder or similar program it will not appear animated until you actually view it in your web browser.)

The animated header on this page was made in exactly the same way, although the images and timing settings are a little more complex - this is reflected in the file size - a whopping 187KB!!