[ Home ]   [ PSP Tutorials ]   [ LVS Online ]

Magic Sidebar Background


This is an intermediate level tutorial. It assumes you have a basic knowledge of PSP7. You will use features native to PSP7. 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. Create a 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 as 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. Be sure that one of the other layers is the active layer, 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.  :)   This main body will be where your page content goes. 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. Change the 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". Set "Left" to 0 and click in the "Right" box. It will change to 20.

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

  13. Activate Fill tool Fill Tool:
    Blend Mode = Normal
    Match Mode = None
    Opacity = 100
    Degree = 90
    set linear gradient ->Set the gradient to "Foreground to Background"

  14. Set Foreground and Background colors 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.

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

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

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

  17. Go Selections/Select None

  18. 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
    Make it wide enough to cover any monitor

  19. 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

  20. 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.

bg1
bg2
bg3
bg4


[ 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