An HTML background is simply an image that is repeatedly displayed in the browser
window "behind" the text and foreground images. You load a background image using the
<BODY> tag. For example, to load a background image named SLATE.GIF,
you'd enter this:
It's also a good idea to set BGCOLOR to a color that matches the dominant color of your
background image, like this:
<BODY BACKGROUND="SLATE.GIF" BGCOLOR="GRAY">
Convert to Seamless Pattern Method
One of the easiest ways to create a background image using Paint Shop Pro is to
make a selection and then use Selections > Convert to Seamless Pattern
after painting an empty new image with a single color using one of PSP's textures.
Here's an example:
- With a tannish-yellow as the Background color and a brownish color as the Foreground color,
open a new 200x200 image.
- Pick the Flood Fill tool. On the Color Palette, set the Foreground Style to Solid Color
and set the Foreground Texture on. Choose the Woodgrain texture.
- Fill the image with the Foreground color by clicking inside the image canvas.
- Pick the selection tool, then select an area of your woodgrained image. Select an
area that you find pleasing and that is not too close to the edge of your image.
- Choose Selections > Convert to Seamless Pattern.
If Convert to Seamless Pattern is grayed out, check to see if you have made a selection.
If Convert to Seamless Pattern is available but you get an error message that
the selection is too close to the image's edge,
then go back and try selecting an area that is further from the edges.
- Save the resulting image as either a JPEG or a GIF. In fact, try it both ways
and see which one is better. (JPEGs are smaller but, because they're "lossy", they
sometimes show distracting edge effects when used as background images.)
Although this method is easy, it often gives less than acceptable results all by itself.
Here are a few images I created with PSP's textures and Convert to Seamless Pattern:
Click on each of these images to see how it would look as an HTML background.
With a little adjusting, some of these might be tweaked into acceptability.
And with a lot of fiddling, all of them could be made into nice backgrounds. For example,
by adjusting the contrast and brightness of the blue grid image above, I got this:
Click on this image to see how it looks as a background.
For images that have fuzzy edges or "noisy" patterns, this method actually works quite well.
A concrete-like pattern can be made this way:
- Open a 200x200 image with Background color set to White and
Image type set to Greyscale.
- Select Effects > Noise > Add.
- Select Random and set the amount of noise to 50% or so.
- Select Effects > Blur > Blur, followed by Effects > Texture Effects > Emboss.
- If you think the brightness or contrast needs adjusting, use Colors > Adjust >
Brightness/Contrast or one of the other methods available under Colors > Adjust.
Follow the directions given above for using Convert to Seamless Pattern.
The result will look something like this:
Before we leave this topic, here's an example
of a rather successful application of this method applied to a photograph.
And here is an example of the method used on a texture created
Handmade Seamless Patterns I
On pages 250-254 of their now out-of-print book Creating Web Graphics With
Paint Shop Pro, Andy Shafran and Dick Oliver describe how to make seamless patterns
from just about any image. It takes quite a bit of care and time, but the results can be quite
Quickly, here's the idea of how to use this technique:
Open the image from which you want to create the tile. Crop it if necessary to get
the basic tile that you want.
You then refine the edges in a few not-so-easy steps:
- Select All and then copy the selection to the clipboard.
- Increase the canvas size to twice the height and twice the width of the original image.
(Select Image > Canvas Size and then set the height and width appropriately.
Be sure that Center image vertically and Center image horizontally
are not selected.)
- Paste the selection from the clipboard below the original image, being careful to match
the edges as closely as possible.
- Use the Retouch tool or Clone brush (or, if you're really compulsive, the Paintbrush) to
"blend" the edges together. Be sure to note the vertical position where the two copies of
the image meet, too, so that you can crop out the extra copy later on.
- Paste the selection from the clipboard to the right of the original image, then
blend the edges of the right copy and the original as you did in the last step with the bottom
copy and the original. Be sure to note the horizontal position where the original and
the right copy meet, so that you can crop out the extra copy.
- Now the really hard part: Select the blended right edge (from several pixels to the left
of the edge to the very edge itself) and copy this selection to the clipboard. Then paste
that copy as a new selection and place it on the left edge of the original image area,
being careful to position the selection exactly. Do the same thing with the bottom edge,
starting your selection a few pixels up from the edge and going to the exact bottom edge.
Copy that selection to the clipboard, then paste the copy as a new selection and place
it exactly over the top edge of the original image.
- Select the area of the original image, using the vertical and horizontal positions
you noted earlier as guides. Use Image > Crop to Selection to crop away the extra copies
that you pasted in in the previous steps.
With any luck, you'll now have a nicely tiling seamless pattern.
Handmade Seamless Patterns II
And here's a much easier way to make a handmade seamless tile by hand!
First, get a plugin filter such as Sandy Blair's Half Wrap, available on his
page. (If you're not sure how to install plugin filters for Paint Shop Pro,
follow the directions Sandy gives.)
Apply the filter to the image you want to use as your tile. (It's safest to use a copy
of the image rather than the original, of course!). Here's an example of an unfiltered
image and the result of applying Half Wrap:
Use the Retouch tool or Clone Brush to "hide" the image's original edges,
which are now inside the image. Be careful not to alter the new outside edges.
Save the finished tile as a GIF or JPEG. Here's my finished tile:
You can click on this tile to see how it would look on a page.
The Easy Way
The easiest and most effective way to make a seamless background tile is to use a
plug-in filter specifically designed for this purpose, such as some of
Sandy Blair's other
Below are some examples of tiles I made using these filters, following the result in each
case with a hot wax coating (Effects > Artistic Effects > Hot Wax Coating):
Image at upper left is the original.
You can click on any of these tiles (even the original) to see how they would look on a page.
You might also want to take a look at the Effects
section for a brief discussion of plugin filters. And check the How To
page for tutorials on creating seamless tiles using PSP's Pattern and Rotating Mirror Effects.