Creating a Bordered Background
Using PhotoShop CS2

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 Adobe PhotoShop CS2, the latest version in July, 2006 when I'm updating this tutorial. You can download a demo version from Adboe. (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 pixels per inch, with 8 bit RGB color with a transparent background.

  1. Pick foreground and background colors you like (I've selected a nice bright green, R: 16, G: 186, B: 3 and white R: 255, G: 255, B: 255)
  2. Add another layer to your image by clicking on the new layer icon in the layers palette.
  3. Make sure that the new layer is active, select the Paint Bucket Tool and fill the image with your foreground color.
  4. To give the edges of your border a bit of a bevel, right click on the layer in the layers palette and select Blending Options... Click on Bevel and Emboss and use the following settings:
     
    Style: Inner Bevel
    Technique: Smooth
    Depth: 100%
    Direction: Up
    Size: 5px
    Soften: 0px
    Use Global Light: checked
    Gloss Contour: Linear
    Anti-alias: not checked
    Highlight Mode: Screen
    Opacity: 75%
    Shadow Mode: Multiply
    Opacity: 75%
     
    Your image should look like this: Sample 1
  5. Now let's 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.
  6. Now select the bottom layer and fill it white (or whatever contrasting color you've selected.
  7. Select a ten pixel high strip that covers the entire width of the graphic. (To make selecting easy, click on the Rectangular Marquee Tool, click on the Style dropdown in the toolbar and selected Fixed Size, enter Width: 1600, Height: 10. Finally click on the image at 0, 30 to select your strip without having to drag.
  8. Save the image in PhotoShop format so you can create other backgrounds in the future by just changing the colors.
  9. Before you crop your graphic, you should flatten it. Why? So the blenging options you added will stay the same after you crop. Don't worry, the selection will stay the way it is.
  10. Crop the image to your selection, Image, crop.
  11. Save the image in jpg format using File, Save for Web... (I usually use medium quality when I'm saving for background, buttons, and the like.) If you plan on using this file to base other backgrounds on, don't save the PSD file with these changes.

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.