How to make seamless backgrounds

Seamless backgrounds are easy to make in Photoshop. Here's how.

First, make a small square, say 4 x 4 inches, and start drawing a pattern, not going all the way to the edge.

Now offset the pattern repeatedly (in such a way that the image "wraps" from top to bottom and side to side), and add more strokes to the offset pattern, always keeping the strokes in the middle, not near the edge.

To do this in Photoshop, choose Filter > Other > Offset, and set the Wrap Around option. Use a numerical offset that is somewhere around one-third to two-thirds of the image size. The X and Y offsets can be different.

You can apply the offset repeatedly by using Command-F to reapply the filter. This works best if, in mathematical terms, the offset and the image size are relatively prime. This way, the offset doesn't cycle back to the original position too quickly. (If the offset were a whole-number fraction of the image size, say one-third, it would cycle back to the original position in just three steps.)

This keeps shifting the image so that it wraps continuously, and thus forms a seamless background. If you always draw in the middle and stay away from the edges, you will not introduce any discontinuities. With practice, you will be able to produce an image that is uniformly distributed across the image space.

Save the image as a GIF or JPG and check the tiling using a web browser. You will want to check the image as you work on it. (The File > GIF89a Export option may be useful here.)


[ kal zone | Web art ]