Select other psp 5 tutorials from the menu below
Creating Bordered Backgrounds
Bordered backgrounds are a nice professional touch on a web page. The important thing to remember is not to make the graphic too large, otherwise it will take too long to download. Try to limit your borders to a height of 100 pixels. Make the width at least 1200 pixels, this way it will cover the window and not repeat on the right side.
Also use a table so that your text does not overlap the border. Tables will ensure that all browsers should view your page the way it was intended. The code for this can be found at the end of this tutorial.
First thing that you need to do is download some filters.
This page from the Paint Shop Pro Users Group will tell you how to download them. I will be using Filter Factory Gallery A and C to demonstrate what you can do with filters in backgrounds.
Please note: If you are having difficulties getting your filters to appear in PSP 5 you will need to get the Plug in Commander to convert the filters to the correct format.
Create the image for the left side of the border: -
Create a new image 100 x 100 background white, 16 million colors.
- Select the fill tool and fill the image with a solid color. For this border I used a rose color (red=246/green=120/blue=120).
- Select Image/plug in filters/Filter factory gallery A/weave.
- Adjust the slide bars to read: size=113/red=56/green=80/blue=171/transparency=165/ Click OK
- Select the eyedropper tool and right click on the background in the weave pattern to select a matching color for the background of your new image.
- Select edit=copy
Now we will transfer this image onto a new image to create the bordered background: -
Open a new image: 1200 x 100 white/16 million colors
- Switch the foreground color to the blue you selected with the eyedropper tool by clicking on the arrow by the colors boxes.
- Select the fill tool/fill style=solid color and click on the new image to fill.
- Select edit/paste/as new selection and align the border until it reads (0,0) on the bottom left on the PSP screen.
- Click on selections/none to deselect the border image.
- Click on the magic wand /tolerance=75/feather=2 and click on the blue background
- Click selections/invert
- Select images/effects/add drop shadow
- Adjust the drop shadow to read background color=black/opacity=155/blur=36 vertical=0/horizontal=10
- NOTE: Always set the vertical to 0 when making bordered backgrounds otherwise when the background tiles it will not look correct. you may adjust the other settings to you liking.
Now, in your html code you will need to place the table code.
Your code should read as follows (you may copy and paste this if you would like):
<html>
<body background="your bg image name here" text="your color choice here" link="your color choice here">
<table>
<tr>
<td>
<img src="clear.gif" width=100 height=1>
Please note that the clear gif is just a transparent gif 5 x 5
This will hold the space in the bordered area so that nothing will overlap.
Now you may type in your html code just as you would with a regular page.
Close with the following tags:
</td>
</tr>
<table>
<body>
<html>
For a better detailed explanation of tables go to
HTML Goodies This guy really knows how to teach html!
The following a few more samples of what you can do with borders.
Click on the image to see a larger version
Click Here for more bordered backgrounds you can download.
| 
