Making Bordered Backgrounds

Borders are becoming more popular as a background choice because it adds a style to a web page, yet allows the web author to have a "clean space" to put data in. We will create two border backgrounds, each with some enhancements. One border we will create from scratch, and the other from the download image (flowerdnld.gif) created from a picture and using the Convert to Seamless Background discussed in our last lesson.

Bordered backgrounds usually have a border that is between 80 to 150 pixels wide. Some bordered backgrounds contain borders on both the left side and the right side of the screen (these are called Framed Borders). This type of border is built for people who are surfing with the resolution set to 800x600.

For those viewing the pages at 640x480, they will see the border on the left with a shadow on the right, which gives the page some "depth". Those viewing the pages at a resolution of 1024 pixels wide, will see nothing to the right of the second border (unless the original image has a width of 1024 or greater), but these folks should be used to this. Using Framed Borders can be a little more restricting in two ways, it gives you less room to display your data in as well as only those who have their resolutions set properly at 800 x 600 can view the background as you have designed it.

Hint for Web Page Development: When using bordered backgrounds, you may want to create a transparent GIF (the width plus a bit of the border image)to use as a spacer. The transparent GIF should be placed in your HTML code (in a table) to keep the data on your web page moved over far enough to the right to not allow it to flow to the left and onto the border itself. Often, tables are used to set up web pages with borders. The first column contains the transparent GIF, creating a sort of "tab" that will allow text and images to display to the right of the border edge.

When you view the Prof's Illustration pages (URL at end of tutorial), please notice how the tables are used to set up the web page. NORMALLY these tables would have a border width set to 0 making the table itself transparent. However, the tables are displayed on the pages in order to show you how the table is used to create the space needed. Using tables will allow viewers to see your page as you have designed it no matter which browser they are using.

In the first example, we will create a textured image using a preset of 'denim' for this border.

• Set Solid Colors:
  • Foreground = White
  • Background = Light Blue (192, 208, 240)
  • PSP7: Make sure the Texture Palette Boxes are set to Null.
• Create a New Image:
  • 100 x 100 pixels
  • Background Color
  • 16 M Colors

• Paint a Texture:
  • PSP6: Images || Effects || Texture
  • PSP7: Effects || Texture Effects || Texture
  • Click on the Presets || Denim
  • Click on OK

Because this image shows edges when tiled, we will resize it:

• Double Click on the Selection Tool:
  • Left = 0
  • Right = 100
  • Top = 1
  • Bottom = 99
  • Click on OK
  • Use Image || Crop to Selection

Creating the Border Image.

To accommodate users with larger monitors, we will make this border width of 1280 pixels. (You might want to use a width set to 1024 pixels or to 800 pixels wide.)

• Create a New Image:
  • First, Duplicate the Image: Window || Duplicate
  • Then, use Image || Canvas Size:
    • New Width = 1280 (or size you want)
    • New Height = 98
    • Center Horizontally = Unchecked
    • Center Vertically = Unchecked
    • Top = 0
    • Bottom = 0
    • Left = 0
    • Right = 1180 (Your new width - 100)
    • Click on OK

You have just created your border image. Save it as a GIF or JPG file. Also, remember to create a transparent GIF file at least 100 pixels wide to use as a spacer for your web page.

In the next exercise, we will enhance this border giving it a drop shadow so it has some depth.

Giving the Border image Depth.

There are a couple of nice effects that one might use to give the border image depth. Although it is possible to create these effects on a single layer, I often find it helpful to use multiple layers which gives more control over various effects used. Then, when finished, merge them.

• First, set your Background Layer to a Layer:
  • Right Click on the layer for the Context Menu
  • Select: Promote to Layer
• Since the Drop Shadow if used now will actually show lines when the image is tiled, we will use a technique to eliminate those lines of first increasing the size of the image, then setting the drop shadow and finally returning the size of the image back to it's original size.
• Increase image size:
  • Use Image || Canvas Size
  • Keep Width as is
  • Increase the Height by at least 4 pixels (always an even number)
  • Check BOTH Center Horizontally and Vertically
  • Click on OK
  • You might need to use the Zoom Tool: Notice that now there are transparent edges at the top and bottom.
• Set the Selection for the Drop Shadow:
  • Double Click on the Selection Tool:
  • Left = 0
  • Right = 100 (or width of original image used for border)
  • Top = 0
  • Bottom = 102 (or new height of original border image plus increase used)

• Set the Drop Shadow:
  • Create a New Layer labeled 'Shadow'
  • PSP6: Image || Effects || Drop Shadow
  • PSP7: Effects || 3D Effects || Drop Shadow
  • Color = Black
  • Opacity = 100
  • Blur = 12
  • Vertical Offset = 0
  • Horizontal Offset = 4
  • Click on OK
  • Deselect: Control + D

• Return Canvas to original size:
  • Use: Image || Canvas Size
  • Reset only Height = 98 (original height of canvas)
• Save as a GIF or JPG file and use as a border background.

Tip #1: You could also give the blue background (not the tile) a texture appearance. Just set your selection to reflect just the blue area and use some texture you want on bottom layer. Keep the values set to 0 or minimum when using your texture. Experiment and have fun.

Tip #2: You could give the textured area depth as well. Just increase the height of the image again by 4, then set a selection around the textured tile at left and use the Buttonize effect with height set to 1 and width set to maximum. Use this effect on its own layer. Then set the Layer Mode option to Luminance. Again, just experiment and have fun.

This border uses the Flowerdnld.gif picture. The original picture was of a rose. A selection was made and then Selections || Convert to a Seamless Background was applied (this download). The purpose of this exercise is to just illustrate another nice border.

• Using the Dropper Tool, capture a light color from the rose for the image. (light orange: 239, 210, 179)
• Set as a Background Color
• Make sure the image is a single layer: Merge || Merge All (flatten)
• Duplicate (Window || Duplicate)
• Use: Image || Canvas Size:
  • Width = 1280 (or your width wanted)
  • Height = 142 (height of original image)
  • Center Horizontally = Unchecked
  • Center Vertically = Unchecked
  • Set Top, Bottom & Left = 0
  • Right = (1280 - original width)
  • Click on OK.

• Give the image depth with a drop shadow around flower.
  • Increase Colors: Colors || Increase Color Depth 16M colors
  • Use Image || Canvas Size
    • Use Original height plus ( + ) at least 4 pixels
    • Check both Horizontal and Vertical Center Placements
    • OK
  • Double Click Selection Tool
    • Set Left and Top values = 0
    • Set Right to width of original image (89)
    • Set Bottom = original height + 4 (146)
  • Use the Drop Shadow Effect (same values as before)
• Reset Canvas size: Image || Canvas Size
  • Reset Height to original image height (142)
  • Click on OK
  • Deselect (Control + D)
• Add Some Texture such as marsh with values set very low.

Border Images may be developed from any image. Have fun. :o)

To view all the background images used in the lesson and some extra background, click here for the Prof's Tour on Border Backgrounds.

-- Enjoy -- :o)

Our next lesson will Work with Layers.