How To Make A Tiling Image

Chapter 4: How To Make Realistic Tiles

• On a money-making web site, you might want to tile pictures of dollar bills.
• On a site about gardening, you might want to tile pictures of leaves or flowers
• ...And so on.

First, we start with our original image:



Next, we convert it to a tiling image, using the technique described in Chapter 2 of this tutorial:



And when we place tiles of those images next to each other, this is what it comes out looking like:



While this okay, it doesn't look quite right, because if you look carefully at the images, there are some rather obvious oddities (like half-leaves joined together in a funny-looking way).

(These oddities, are even more obviously if you review this image in a full browser window).

This time, we'll start with a slightly different image. If you look carefully you'll notice that this is a very similar image to that in the previous example, except I've made sure that the image also contains lots of whole objects (in this case, leaves) that are completely within the boundaries of the tile, and go pretty close to the edges (but without going over).



Next, we convert this image to a tiling image, using the technique described in Chapter 2 of this tutorial:



And when we place tiles of those images next to each other, this is what it comes out looking like:



This time, while there are still some oddities on the boundaries between tiles, they are rather less obvious to the eye. A big improvement, I think that you'll agree!

(Try reviewing this image in a full browser window, and this difference should be even clearer).

In the next Chapter, I'll also show a simple trick to making the tiling effect less obvious, which when combined with the techique from this Chapter, really can produce nice results.