Creating Seamless Tiles

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:

1. Open a textured image and note its dimensions. This information is visible on the status bar at the bottom right of the screen. For this exercise, I created a 200x200 image, and then added "texture" by using the Paint Brush and Fill tools.

2. Create a new file with the same dimensions as the textured image (see Figure 43.21).

   Figure 43.21. The textured image and a new image in Paint Shop Pro.

   

   As described earlier in this chapter, you must swap the diagonally opposed quarters.

3. Select the Selection tool and set its selection type to Rectangle and Feather to 0.

4. Place the cursor in the middle of the textured image. Remember that computers start counting at zero, not one. Therefore, the middle of the sample 200x200 textured file will be 99,99not 100,100. You can see where you are on the image by looking at the mouse coordinates displayed at the bottom-left of the Paint Shop Pro screen.

5. With the cursor in the middle of the image, click and drag the mouse to the upper-left corner of the image. Release the mouse and choose Edit, Copy.

6. Click somewhere in the new image to make it current and choose Edit, Paste, As New Selection.

7. Move the selection into the opposite corner of the new image from where it was in the textured image (see Figure 43.22).

   Figure 43.22. The first corner moved to the new image.

   

8. Continue cutting and pasting until all quarters have been moved to the new file (see Figure 43.23). You can move the selection marquee on the original image by right-dragging it using the Mover tool. Moving the marquee may prove easier for you, rather than reselecting each corner.

   Figure 43.23. All quarters moved to the new image.

   

9. Select the Clone Brush tool (it resembles two small brushes) and right-click to select a source area. Move the mouse around the seamed center area, drawing over the seams until you can no longer distinguish the seams.

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:

1. Open a textured image. For this exercise, I reused my original texture file from the last procedure.

2. Using the Selection tool, select an area in the center of the image. Unfortunately, the way Paint Shop Pro creates the image, you won't be able to keep all of your textureso you won't be able to make the selection area as big as the entire image. I simply selected a square in the center of my image, leaving an "edge" of about 30 pixels.

3. Choose Selections, Convert to Seamless Pattern. Paint Shop Pro creates a seamless pattern from the selection and places it in a new window. If you get an error message telling you that the selection area is too close to the edge of the image, use the Selections, Modify, Contract command to make the selection smaller.

4. Save your new 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.