A seamless tile is an image that, when tiled or repeated, forms a seamless pattern. Therefore, you can use a relatively small image file that will tile itself on your Web page. Creating seamless tiles is something that is discussed constantly on Usenet.
Of course, the object is to get the sides to match up so that the smaller tile appears to be one large image when it's placed on your pages. Before showing you how to create a seamless tile, I'll explain the basic principles.
The Basics of Seamless Tiles
The object of a seamless tile, once again, is to get the edges of your image to match up so that when the image is tiled, it appears to be one big image. Demonstrating this is easier than trying to explain it.
Suppose you have an image that you want to tile, and suppose the image is square. (This technique works just as well if the image is a rectangle.) The goal is to swap the diagonal quarters of the image. (I told you this concept was hard to explain.) To get a better idea of what I'm talking about, take a look at the diagram in Figure 43.15.
Figure 43.15. Quartered image, showing the original placement of the quarters.
What you need to do is cut the image into quarters and swap the diagonal corners. This step allows your image to tile seamlessly. When you move the pieces, the image should resemble Figure 43.16.
Figure 43.16. Quartered image with the final placement of the quarters.
The reason this technique works is hard to see, but essentially you're cutting the image and rearranging it so that the edges formed by the cutting process are on the outside of the new image. Because the new edges were joined before you cut them, they match up when the image is tiled. Although this process is hard to visualize, it does work.
Figure 43.17 shows a textured image.
Figure 43.17. A textured image.
Figure 43.18 shows the same image with the corners numbered as in Figure 43.15.
Figure 43.18. The textured image showing the numbered quarters.
Of course, you don't have to draw the numbers on the image. I've done so here to demonstrate the process more clearly. Figure 43.19 is the image after the quarters have been swapped. Note that the numbers are still in place.
Figure 43.19. The textured image showing the numbered quarters with corners swapped for tiling.
Figure 43.20 is the image with the quarters swapped and the numbers removed. This image will now tile seamlessly.
Figure 43.20. The textured image with quarters swapped for tiling.
You might notice, however, that although the edges now match up, the center of the image has a vertical seam and a horizontal seam running through it.
If you get rid of the vertical and horizontal seams, this image will be ready to tile. The way to get rid of the seam is to use the Clone tool. Although it's a little difficult to master, the tool is very effective, as you'll see in the next section.
Creating Seamless Tiles with Paint Shop Pro
Creating seamless tiles with Paint Shop Pro requires a little work; you must cut and paste the four quarters yourself. Follow these steps to create your own tiles:
You can also use the Paint Brush tool to fine-tune the image. After using the Clone Brush and working with it a bit, I ended up with the image in Figure 43.24.
Figure 43.24. Final seamless tile in Paint Shop Pro.
To see what the final seamless background would look like, I created a new 600x600 image in Paint Shop Pro and, using the Paint Bucket tool, filled the new image with the seamless tile (see Figure 43.25).
Figure 43.25. A tiled example of the final seamless tile.
Using the Convert to Seamless Pattern Option
Paint Shop Pro offers a quicker way to change a pattern into a seamless image, suitable to use as a Web page background. The results, although good, may not be as nice as a seamless image you can create yourself by using the procedure described in the previous section. The result, as it were, is in the eyes of the beholder. You may want to perform both procedures on a potential image, and choose the one you like the best.
Follow these steps to create a seamless pattern from an existing image:
To test the seamless tile that Paint Shop Pro created, I once again created a new 600x600 image in Paint Shop Pro and, using the Paint Bucket tool, filled the new image with the seamless tile (see Figure 43.26). You can see there is some difference between this result and the one shown in Figure 43.25. Which is better? Hard to say. Again, the choice will depend on the texture file with which you begin.
Figure 43.26. A tiled example of the final seamless tile.