Simple Sidebar Background in PSP5

This is a simple sidebar background, but after you've done this one, you'll have the idea of how to make your own more complex images fit onto a web page background like this one.

You will use only native PSP5 features in this tutorial: Fill Tool, Canvas Size, Zoom Tool, Selector Tool, Status Bar, Layers.

1. Create a new image: 120x120
   Background = white
   
   
2. Change color swatches to:
   Foreground = white
   Background = bright color of your choice
   
   
3. Activate the Fill Tool.
   On the Control Palette set:
   Fill Style = rectangular gradient
   Match Mode = none
   Tolerance = 200
   Opacity = 100
   Sample Merged = UNchecked
   
   Click the Options button and set:
   Blend Mode = normal
   Vertical = 50%
   Horizontal = 50%
   Click once in your image.
   
   
4. Swap your foreground and background colors by clicking on the double headed arrow so that the background is now white or whatever color you want to use for the body part of your background image.
   
   
5. Image/Canvas Size:
   New Width = 140
   New Height = 120
   Center Image Horizontally = UNchecked
   Center Image Vertically = checked
   Change "left" to 0
   Change "right" to 20 (this number should automatically appear when you click in the box beside "right") OK
   
   
   You should have an image that is the same height as it was, with a white strip on the right side.
   
   
6. Activate the Zoom tool and click once in your image so you can see better.
   
   
7. Activate the selector tool, in the Control Palette set: Selection Type = Rectangle
   Feather = 0
   Antialias = UNchecked
   
   If you have a shaky hand, move on to step 7a now.
   
   Move your cursor to the top of your image (close to where the bright color meets the white) Watch your status bar in the bottom left corner of the PSP5 window. When the numbers (119/0) appear, click and drag until the third set of numbers is (5/120)
   
   7a. If you prefer, you can get this selection by double clicking on the Selector Tool. When the "Select Area" screen pops up enter the following:
   Left = 119
   Right = 124
   Top = 0
   Bottom = 120
   OK
   
   
   
8. Click on the foreground color swatch and change it to black.
   
   
9. Activate the fill tool: Style = Linear Gradient
   Click on Options: Set to 90 degrees.
   Click inside your selected area.
   Selections/Select none
   
   
10. Double click on the background bar in the layer palette and name it "bar" OK
    
    
11. Layers/New: Name it "background" OK
    
    
12. Click on "background" in the layer palette and drag it down so that it's below "bar"
    
    
13. Now we have to widen the image so that it will cover your web page.
    With background as your active layer, click Images/Canvas Size:
    New Width = 1200 (or wider)
    New Height = 120
    Center Image Horizontally = Unchecked
    Center Image Vertically = checked
    Change left to 0
    Change right to 1060 (or 120 pixels less than your new width)
    OK
    
    
    
14. Activate Fill Tool: Fill Style = Solid color.
    Make sure your background color swatch is still white or whatever color you want to use as a background for your web page. Right click on the newly enlarged background.
    
    
15. Save a copy in psp format if you think you will want to make changes to the background color in the future.
    
    
16. Save a copy in gif or jpg format for use on your web page.

Done! J