Lori's Web Graphics: Creating Backgrounds

Creating Backgrounds

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:

<BODY BACKGROUND="SLATE.GIF">

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 with filters.

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 nice.

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 Simple Filters 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 Simple Filters. 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.

Basics