Having a site background that works well with your theme without sacrificing page load time can be difficult. One way to accomplish this is through repeating, seamless backgrounds.
In this video tutorial, I will teach you how to make a simple repeating background using Adobe Illustrator CS4. I will be using simple geometric shapes to teach you how to construct a repeating background image. However, this is only to simplify my explanation of background tiling.
First, I will show you how to set up your canvas using increments of 10 pixels. I will then show you how to use Adobe Illustrator's Ruler and Guide features to create a 3x3 grid of your canvas.
Once your canvas is properly prepared, I will show how to use the center square of your grid to begin your background tile design.
With a background element designed in the center square of your canvas grid, I will show you how to duplicate and move it to corresponding corners of your center square. I will also explain how a background tile does not need to be symmetrical, it only needs to line up on the tops and the sides.
With a repeating image successfully designed, I will show you how to use the Pattern feature in Adobe Illustrator to quickly apply your repeating image to any object. This is also a good way to test if your image tiles correctly.
By the end of this tutorial you should have a better understanding of how a repeating background works, as well as how to design one in Adobe Illustrator CS4.
