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. Fill tool
    On the Control Palette set:
    Fill Style = rectangular gradient
    Match Mode = none
    Tolerance = 200
    Opacity = 100
    Sample Merged = UNchecked
    Fill tool control palette
    Click the Options button and set:
    Blend Mode = normal
    Vertical = 50%
    Horizontal = 50%
    Click once in your image.

  4. swap your color swatches 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
    Make your canvas larger

    Resized image You should have an image that is the same height as it was, with a white strip on the right side.

  6. Zoom tool 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) status bar co-ordinates

    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
    Double click the selector tool

  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)
    resizing to web page width

  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.

The finished product

Done! J

[ Home ]   [ PSP Tutorials ]   [ Free Web Graphics ]   [ Pictures ]   [ Pop's Memorial Pages ]
[ Homework Pages ]   [ LVS Online ]

Copyrighted 1998-2003 © Vikki Brooks
Tutorials, files and content of this site cannot
be reproduced and/or published
without the express written consent of the author.

Brovik Web Productions