Ann’s Glitter Pegasus Tutorial

This lesson explains how to create a glittering graphic, one that glitters when placed on a Web page. The line drawing used in the lesson consists of a gray horse (outlined in black) on a white background (transparent).

Save the Pegasus graphic on the left (Pegasus1.gif) to your computer (graphic size is 543 x 426).

Note: These directions were written for Paint Shop Pro version 8. If you have a newer version, you should still be able to follow the directions, as long as you know where the tools are. :-)

Part 1

  1. Bring up Pegasus1.gif in PSP. Notice that the horse’s mane and forelock are separated from the horse’s body. In order to make the forelock, mane and tail a different color from the body, you need to draw a line between the horse’s tail and the body.
  2. Paint a short line around the horse’s hump to separate the tail from the horse’s body.
    Save your changes.

  3. Click the Foreground Solid Color box to select a solid color from the Palette. Select a gold color (should be CCCC00 or CCCC33, or close, so that it matches gold). Click OK.
  4. Type M for the Magic Wand; in the Tools Options, set:
    Value = RGB,   Feather = 0,   Tolerance = 10
  5. Follow these steps to color the mane, tail and forelock with the new Foreground color:
    1. With the Magic Wand, click inside the horse’s mane to select all of the mane -- the marching ants should be surrounding the gray area inside the mane
    2. With the mane selected, hold down the shift key and click the inside of the tail
    3. With both mane and tail selected, continue to hold down the shift key and click inside the horse’s forelock. All three areas should be selected (you can release the Shift key now).
    4. Type F for the Flood Fill, click inside the tail, then inside the mane, and then the inside the forelock. All three should be gold-colored now.

  6. Type Ctrl+D to deselect these three areas.
  7. Save the file in the PSP format (save as Pegasus1.psp).
    Increase the color depth to 16 million.

Part 2

  1. Download these four gold tiles to the same folder with Pegasus1.psp:
    gold-1.jpg,     gold-2.jpg,     gold-3.jpg,     gold-4.jpg
  2. Open each of these gold tiles in Paint Shop Pro, then minimize all five of them. Minimizing the files makes them available as a Pattern selection.
  3. Click the black arrow in the Styles box (on the right-hand column) and select the third option (represented by a square of little dots).
  4. Now, click the middle of the Styles box (not on the black arrow) in order to launch the Styles/Pattern dialog box.
    1. Set the Angle at 0
    2. Set the Scale % at 175
    3. Click the drop-down arrow to show all the patterns you can choose
    4. Select gold-1.jpg
    5. Click OK

  5. Type M for the Magic Wand tool.
    1. With the Magic Wand, click in the middle of the horse’s body.
    2. This will select most of the horse´s body, but not the back two legs.
    3. Hold down the Shift key and click on the wings, which will select most of the wings, but not all.
    4. Continue to hold the Shift key and click on the rest of the wing feathers, the back wing, and the other two legs.
    5. Now all of the horse should be selected EXCEPT the three solid gold parts (the forelock, mane and tail).

  6. Type F for the Flood Fill tool.
    1. One by one, click the selected parts of the horse and wings to fill each one of them with the pattern.
    2. Check that the all 9 of the selected parts are filled with the pattern.
    3. Do NOT deselect the selected parts of the graphic.
  7. Save this graphic (it should still be named Pegasus1.psp).

Part 3

  1. Now, click the Styles/Patterns box again.
    1. Set the same Styles/Patterns parameters as before
    2. Select gold-2.jpg for the pattern
    3. Click OK
  2. Click Undo [Ctrl + Z] until all glittery parts of the graphic body and wings have become gray again, but take care that these parts are all still selected (marching ants).
  3. The Flood Fill tool should still be selected. Click all of the selected parts of the horse and wings to fill them with the gold-2.jpg pattern.
  4. Save the graphic as Pegasus2.psp.
  5. Repeat this process for Pegasus3.psp and Pegasus4.psp graphics, selecting the corresponding gold tile pattern for each version of the graphic. When you are through, you will have created four Pegasus graphics, each with a different pattern background.
  6. NOTE: It is not imperative that you perform the 9 levels of Undo after completing each graphic, but it is easier to see what sections have been filled with the new pattern and what sections have not been filled when the sections are gray.

Part 4

  1. From the Paint Shop Pro application, open the Animation Shop application (should be under the File menu).
  2. Under the File menu of the Animation Shop, click the Animation Wizard.
  3. At the prompts, make the following selections (clicking Next after each one):
    1. Same as first frame
    2. Transparent
    3. Centered in Frame and With the preceding frame´s contents
    4. Yes, repeat animation indefinitely and 10
    5. Click Add Image to add the images you have created, one at a time -- Pegasus1.psp, Pegasus2.psp, Pegasus3.psp, and Pegasus4.psp
    6. NOTE: Use the Up, Down or Remove buttons as necessary to get your graphics in order; when you are through adding graphics, click Next
    7. Click Finish

  4. Test your glittery Pegasus by clicking on View, then Animation.
  5. Save. The Animation Shop application automatically saves the animation as a .gif file.
  6. When you click Save, Animation Shop presents a few more prompts. You can accept the default name or type in your own file name.

Hurray! You´ve done it.

When you link the animated Pegasus to your HTML page, you should add the width and height parameters to help the file load faster. As it is, this Pegasus graphic is 543 pixels wide x 426 pixels high, which is a bit large, but I chose this one because it is a fun graphic to play with.

Glitter Pegasus

EXTRA: Since line drawings can be hard to find, I have included three line art drawings people can use for practice (an Angel, a Cupid, and another Pegasus - interesting that they all have wings!) If you would like to use these black/white drawings, open this page: LineGraphics.html

Have fun!      

Created by Ann Gordon © 2001