How To Make A Tiling Image

Chapter 6: Drawing Tiles From Scratch

• Either draw your image with a solid color background (and make sure the content inside doesn't touch the edges).
  
  
• Or, draw your image very carefully to make sure the bottom edge lines up with the top, and the left with the right.
  
  
• Or, use the technique described in Chapter 2 of this tutorial to make the image tile together smoothly.

Here's an image that I created:



I used a solid color background, and made sure the content (a birthday cake graphic) doesn't touch the edges.

Here's what this image looks like when put together as tiles:



(You can also click here to see this in a full browser window).

First, I started out with a larger image. You'll notice that I drew two different size cakes on the image:



When put together, the tiling effect is lot less obtrusive:



(Click here to see this image in a full browser window).

Note: I use this image (well a slight variation of it) on our Fun4Birthdays.com site. Take a look at that site, and I think you'll agree the tiling effect is barely noticeable when put to use in a real web site.