Bordered Backgrounds
There are certain things that you need to consider when making bordered backgrounds. For
instance, some backgrounds can be made very small, not only saving server space, but also
bandwidth, and making download time quick. When making a background, have a plan.
Backgrounds with patterns will need to be larger than plain backgrounds. Let's do one
background in different sizes and then look at the results of all of them. We will start
with a plain bordered background. Open Paint Shop Pro, then open an image with a White
background, and 256 colors, resolution set to 100 pixels per inch. Set the width to 1200
and the height to 110. Click on the foreground color box on the right side of the screen
and choose a color from the pallette. For this example, I chose in the yellow/gold group
and I used my eyedropper on the square inside the color circle to find a lighter shade
than what is in the pallette. Use your flood fill tool and flood fill your image.
|
| Now, find your selection tool, make sure in the controls window
it is set to a rectangle, and starting at the coordinates (shown in the bottom left of
your screen when you mouse over the image), 0,0 - move your mouse to the right and down
until you get to the coordinates 120, 110. Release the mouse button. Now go back over to
the foreground selection tool and pick a color a shade or two darker than your background
color and flood fill within the selection square you just made. |
| Now, go up the the "Images" menu, then click on
"Effects" and then "Drop Shadow". You can make the settings anything
you want, but, I used black for the shadow, Opacity set to 100, Blur set to 13.8, Vertical
offset at 1 and Horizontal offset at -1. In the box on the right of the Drop Shadow window
you will see your background image. With the size of image we are using, you need to drag
the image right until you see the edge of the selection you are working on. You will be
able to see your drop shadow, and can adjust the settings to the way you want it before
clicking on ok. When you have the settings you want, click on ok. |
| Now, you will see the "marquee" still, so click on the
"Selections" menu, and then "Hide Marquee". Now look at your image. If
you look at the top and bottom of the drop shadow, you will see that it does not go all
the way to the top and bottom of the image. We will fix that now. Click on the
"Images" menu, then "Canvas Resize" and set the width to 1200 and the
height to 90. Click on ok. |
To see that background on a full page you can look
at this example.
| Now, your image is done. Save it. This particular border
background can be made smaller to save server space and bandwidth because there is no
pattern on it. This is the same image, with the canvas size set to 1200 width and 10
height. |
To see this background on a full page you can look
at this example.
| As you can see, they look exactly the same as far as being used
for a background and think of all the space saved by being able to use the smaller image. You now know how to make a plain bordered background.
Considerations
You may be asking why I used such a wide image. For plain backgrounds, i.e., no borders
you can use smaller images for tiling a background, and we will get into that in another
lesson. I set the width at 1200 to cover "most" browser resolutions, so that the
border does not tile on the right side of the screen when using a higher resolution to
view the page.
With the new monitors now coming out, i.e., 17" and larger,
backgrounds probably should be set to 2000 as apposed to 1200. That is a personal choice.
|
|
