How to Create a Gradient Sidebar Background for a Web Page in Paint Shop Pro

Gradient sidebars add contrast to your page and attract the viewer's eye. The side border is a color or pattern, while the rest of the page is white for easy readability. Create your own side border background using Paint Shop Pro, a popular Web graphics program. This tutorial uses Paint Shop Pro 5.0 and above.

Difficulty:

Moderately challenging

Instructions

Things You'll Need

• Computers
• Paint Shop Pro

1. Open Paint Shop Pro. Click on the File menu and select New.

2. Set the image dimensions at 100 pixels high and 100 pixels wide, with a white background color and 16.7 million colors for the image type.

3. Click on the Fill tool (which resembles a tilted bucket dripping paint) from the toolbar.

4. Click on the Foreground box (the top box below the palette) from the left side of the screen. Choose the foreground color and click OK.

5. Choose Linear Gradient from the fill style on the Control toolbar. Set the Match Mode for RGB, make the tolerance 20 percent and make the opacity 100 percent.

6. Click on the Options button and change the fill direction. To make the color gradient from left to right, move the bar to the middle left or change the number to 270. For a right-to-left gradient fill, move the bar or change the number to 90.

7. Click on the image to fill it with the color. If you're unsatisfied with the result, select Undo from the Edit menu and make changes.

8. Select Copy from the Edit menu to copy the filled image.

9. Click on the File menu and select New. Set the new image's dimensions at 100 pixels high and 1,000 pixels wide, with a white background and 16.7 million colors for the image type.

10. Click on the Edit menu and select Paste. Choose Paste as New Selection. The colored box will be pasted onto the image.

11. Use the cursor to move the image to the far left, aligning it with the top and edge of the blank image. Make sure that no white space shows around the top, bottom or left side.

12. Choose Save As from the File menu and save the image.

Tips & Warnings

• Like all backgrounds, a bordered background is simply an image tiling down the page. If there is white space anywhere but on the right side of the image, it will appear as spaces on the page.

• You can make the colored border larger by increasing the size of the first image.

• Try some of the other gradient options, like Rectangular Gradient and Sunburst Gradient, to see how they look. Remember, however, that the border will tile down the side of your Web page, so your viewer will see it repeat over and over again down the page.