[ Home ]   [ PSP Tutorials ]   [ LVS Online ]

Magic Sidebar Background


This is an intermediate level tutorial. It assumes you have a basic knowledge of whichever version of PSP you are using. In this tutorial you will use features native to PSP5 and PSP6. They include layers, the text tool, tubes, the fill tool, and the selection tool. We're going to make a sidebar background that will change colors depending on your web page background color...   :)

  1. New image 120x200 Background = White

  2. Create a new layer.

  3. Place tubes, text, or an image on your new layer.
    Magic border part 1 -> Choose items with no drop shadow and fairly solid colors since we'll be saving this in gif format.
    -> If you are placing more than one item on your border, it's easiest to put each on it's own layer so you can arrange their placement more easily that way.

  4. Once you've got your border ready to go, if you only have one layer and the background move on to step 5 now.

    If you used multiple layers do this first: hide the background by clicking on it's color bar in PSP5 or the glasses in PSP6. be sure that one of layers is active, and then right click on the layer palette. Choose Merge/Merge Visible.
    Hide the background layer

  5. Before moving on, you will need to choose what color the main body of your background graphic will be. This color will stay the same on every web page so I chose white since it will go with any color my magic border changes to.  :)   Ok, got a color in mind?

  6. Now, pick a light color and make it your foreground color.
    -> This can not be the same shade that you chose in step 5 to be the body color for your finished graphic.
    ->This is the color that we're going to use as our invisible color so also don't pick a color that is actually in the graphics or text of your sidebar.

  7. Make sure your background layer is visible and that it is the active layer.

  8. Flood fill the background layer with the light color you chose in step 6.

  9. Save a copy of your image in psp format now just in case you want to change your mind about colors later.

  10. Make foreground color swatch black or a very dark color chosen from your image/text in the border. Make background color swatch white or whatever color you've chosen for the main body color of your background image.

  11. Resize your canvas Go Images/Canvas Size and change the width to 140 pixels. UNcheck "Center Image Horizontally" and use these settings:

  12. With your background layer still active...
    Double click on selection tool. Set:
    Left = 120
    Right = 125
    Top = 0
    Bottom = 200
    Custom Size and Position
    OK

  13. Activate Fill tool:
    Fill Style = Linear Gradient
    Match Mode = None
    Opacity = 100
    Click Options Button:
    Blend Mode = Normal
    Degree = 90
    -> In PSP6 - Set the gradient to "Foreground to Background" and Paper Texture to None

    Click inside selected area. (Use the zoom tool to zoom in on the selection if you need to.)

  14. Double click on selection tool. Set:
    Left = 126
    Right = 131
    Top = 0
    Bottom = 200
    Custom Size and Position
    OK

  15. Repeat step 13.

  16. Selections/Select None

  17. Image/Canvas Size:
    New Width = 1600
    New Height = 200
    Center Image Horizontally = Unchecked
    Center Image Vertically = checked
    "Top" and "Bottom" should be grayed out
    Left = 0
    Click inside box "Right" and it should change to 1460
    OK

  18. Almost done now.   :)
    We just have to set our transparency color so that the magic will work on our web page.

    Go Colors/Set Palette Transparency

    Click yes if PSP asks if you want to set the image to a single paletted background layer.

    Use the following settings when the next screen pops up.
    Decrease Color Depth
    OK

    When the "Set Palette Transparency" screen appears, check the box "Set the palette transparency value to palette entry" and then go click on your sidebar to choose the color you want to seem transparent. The color number in your settings will likely not be the same as mine shows here. That's ok...
    OK
    Set Palette Transparency

  19. Save a copy of your image in .gif format. Click on the Options tab in the Save dialogue and ensure that you save it in version 89a.
To use your magic background image, just change the bgcolor of the body of your web page... This bgcolor is what will show through the section of the side border that we made transparent.
For example:
<body background="mybg.gif" bgcolor="#FFECFF">
<body background="mybg.gif" bgcolor="#66FFFF">

There will be some artifacts left around the edges of your tubes or text but as long as you choose body bgcolors that are close to what you used as a transparent color, you'll be ok. If you want to use dark colors on the side border, choose a dark color for the transparent color.

This technique allows you to have just a slightly different look on each of your pages while using the exact same image. It will keep the load time down since the background will already be in your visitors cache after they view the first page.

Finished bg
Finished bg
Finished bg
Finished bg


[ Home ]   [ PSP Tutorials ]   [ LVS Online ]


Copyrighted 1998-2008 © 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