Week Three

Kathryn Fletcher, kfletche.geo@yahoo.com 

Part One: Banner

Site Map banner

  1. I started with a piece of Microsoft clipart that I copied and pasted as a new image into Paint Shop.
  2. I cropped it to the area of interest to make it easier to work with.
  3. I used the selection tool and magic wand to tighten the selection to choose just the sign-post portion of the image. I had to use the magic wand several times as the background varied around the image.
  4. I copied the selection to a new image with a white background.
  5. I used the eyedropper tool to select foreground colors as needed and the paintbrush tool to tidy up the image.
  6. I used Image > Resize to reduce the image to be small enough to fit on my banner. I selected 56 pixels high and let Paint Shop set the width to keep the aspect ratio correct.
  7. I used the flood fill tool to color the inside of the sign-post with brown.
  8. I set the palette transparency to make the white background transparent.
  9. I created a new image 400 pixels wide x 60 pixels high.
  10. I filled the banner background with a solid pale yellow color (#ffffcc) using the flood fill tool.
  11. Text Tool: I selected navy (#000080) for foreground and background colors. I chose Bauhaus 93 in 44 points as the font. I set it to be a floating selection and anti-aliased to get smooth edges for the curved letters. I clicked on the standard text button. I entered the text and placed it on the banner.
  12. I pasted the copied image as a transparent selection.
  13. I added a symmetric border, 10 pixels all round, #F8BF24 and then added a buttonize effect: height and width = 10, opacity = 100 and transparent edge.

Part Two: Button

Back button

  1. I started with a different piece of Microsoft clipart. Even though we haven't covered these tools yet, I needed to use the Image > Mirror and Image > Flip commands to get the arrow to go in the desired direction. 
  2. I used the color replacer tool to change the colors of the arrow and its shadow. 
  3. I used Image > Resize to reduce the image to be small enough to fit on my button. I selected 48 pixels high and let Paint Shop set the width to keep the aspect ratio correct. 
  4. I set the white background color of the arrow image to be transparent. 
  5. I created a new image 125 x 50 pixels to be my button and filled it with a soft yellow (#FFFF8C). 
  6. I copied the arrow image as a transparent selection. I used the Text Tool to add dark gray Arial Bold 36 point text and anti-aliasing turned on. 
  7. I added a Buttonize 3-D effect with height and width set to 5 and opacity set to 40 with a transparent edge. 
  8. I tweaked the image after saving it as a GIF:
    1. I wanted to remove the dithering that resulted from reducing the number of colors. Saving the image as JPEG was not a viable alternative as there would have been posterization effects due to the large blocks of same color.
    2. I used the Magic Wand to select the arrow's shadow then used the Color Replacer tool to remove shadow entirely which was running into the buttonizing edges. I should have made the arrow image smaller than the 48 pixels high so it would have fit completely on the solid area. I also decided the arrow was bold enough without a shadow.
    3. I decided to change the color of the text to coordinate with the arrow better. Since I had used an anti-aliasing effect, I could not use the color replacer tool. Instead, I covered the text with a solid rectangle, used the eye dropper to select the dark color from the arrow, increased the number of colors so I could use the anti-aliasing effect, then re-created the text portion of the button.

Additional Comments 

Return to Kathryn's Paint Shop Pro eClass page

 

1