InformIT: Sams Teach Yourself HTML 4 in 24 Hours

Creating Your Own Backgrounds

Any GIF or JPEG image can be used as a background tile. Pages look best, however, when the top edge of a background tile matches seamlessly with the bottom edge, and the left edge matches with the right.

If you're clever and have some time to spend on it, you can turn any image into a seamless tile by meticulously cutting and pasting, while touching up the edges. Paint Shop Pro provides a much easier way to automatically make any texture into a seamless tile: Simply use the rectangular selection tool to choose the area you want to make into a tile, and then choose Selections, Convert to Seamless Pattern. Paint Shop Pro crops the image and uses a sophisticated automatic procedure to overlay and blur together opposite sides of the image.

In Figure 11.7 I did this with part of an image of the planet Jupiter, taken from a NASA image archive. The resulting tile—shown as the background of a Web page in Figure 11.8—tiles seamlessly, but has the tone and texture of the eye of Jove himself.

Figure 11.7 Paint Shop Pro can automatically take any region of an image and turn it into a background pattern that can be easily made into tiles.

Figure 11.8 These are the results of using an area of the image in Figure 11.7 as a background image for a Web page.

You'll find similar features in other graphics programs, including Photoshop (use Filter, Other, Offset with Wrap Turned On), Kai's Power Tools, and the Macintosh programs Mordant and Tilery.

Todo To Do

Here are some tips for making your own background tiles with Paint Shop Pro:

If you have a scanner or digital camera, try using some textures from around the house or office, such as the top of a wooden desk, leaves of houseplants, or clothing.
Using the Image, Blur, Blur More filter on an image (as I did with the Jupiter picture in Figures 11.7 and 11.8) before you turn it into a seamless tile will help it look better as a background. Using Colors, Adjust, Brightness and Contrast is usually also necessary to keep the background subtle in color variation.
When you select an area to be turned into a tile, try to choose part of the image that is fairly uniform in brightness from side to side. Otherwise, the tile may not look seamless even after you use Convert to Seamless Pattern.
You must also use an image big enough so that you can leave at least the width and height of the tile on either side of your selection. If you don't, when you select Convert to Seamless Pattern you'll get a message saying Your selection is too close to the edge to complete this operation.
You can also make some almost-automatic textures with the paper texture feature in the paintbrush style palette in Paint Shop Pro. You can make great paper textures, too, by selecting Image, Noise, Add followed by Image, Blur, Blur and Colors, Colorize.

Note

If you just cannot seem to get the pattern you want, there are hundreds of sites on the Internet that offer public domain background images that are free or inexpensive and professionally designed. A good starting place is the Background Underground Lounge at the 24-Hour HTML Café http://24hourHTMLcafe.com/bgu/.

This page presents several flashy backgrounds (tone them down with Colors, Adjust before using them on your pages) and links to hundreds more.

If you happen to see a background image on someone else's page that you wish you could use on your own page, it is a simple matter to right-click the background and select Save Background As to save a copy of it. Be careful, though, to ask the person who created the image for permission before you use it.

Summary | Next Section

Previous Section