Creating a Bordered Background
Using PaintShop Pro X

Now that I've shown you how to use bordered backgrounds, I'm going to show you how to make your own. It's really quite simple. The instructions here use PaintShop Pro X, the latest version as of July, 2006. If you don't have this fantastic program, you can download a demo version from Corel. (NOTE: If you click on that link, it will open in a new web browser page. Just close the page when you're done downloading to get back to this tutoria.)

I'll wait...

All ready? Good. Now, the first background we're going to make will be quite simple. Future tutorials will show you how to make fancier borders, but let's start with a simple example.

Create a new image 100 x 100 pixels, 72 dpi, with a raster background, RGB - 8 bits/channel color depth, and a transparent background.

  1. Pick foreground and background colors you like (I've selected a soft blue, R: 83, G: 133, B: 177 and a very light green R: 206, G: 231, B: 173)
  2. Select the fill tool and fill the entire image with your foreground color.
  3. To give the edges of your border a bit of a bevel, select Effects/3D Effects/Inner Bevel... and use the following settings:
     
    Bevel: #2 (it looks like a slice of pie)
    Width: 5
    Smoothness: 25
    Depth: 10
    Ambience: 10
    Shininess: 10
    Color: White (R: 255, G: 255, B: 255)
    Angle: 315
    Intensity: 50
    Elevation: 30
     
    Your image should look like this: Sample 1
  4. Since this is a solid colored border, we only need a strip about 10 pixels high, so click on the selection tool and select a strip starting at about 0, 30 and make it the width of your image by 10 pixels high. That's 100 x 10.
  5. Crop the image to the selection. (Click on Image/Crop to Selection or press Ctrl-R)
  6. The last step in this case is to add the portion of the background that will be under the content portion of the page. Select Image/Canvas Size. Use the following settings:

    Width: 1600 pixels
    Height: 10 pixels

    In the set of buttons that define the placement of the current contents of the image, select the first button in the second row to place your nice bevel in the middle left of the image. Click OK to change the size.
  7. Now select the transparent portion of the image and fill it with the background color.
  8. Save the image in PSP format and then use File/Save Copy As... or File/Export/JPG Optimizer to save the file as a JPG for use on the web.

That's it! Your border will now look something like this:

Sample 2

This is, of course, not wide enough to use on a real web page. I've created a smaller version just to show you. I've also created a sample page that shows what the background will look like in action.

If you don't know how to use the bordered background you just created, take a look at my Using Bordered Backgrounds tutorial.