Complex Tiling Tutorial

While making a new background for my other web-site, I finally figured out a good way to turn just about any image into a seamless tiling background, so I thought I'd share the how-to here.

Take a look at the tiling tutorial visual aid for a quick over-view and illustration of the procedure. Then read below for more detailed explanations if necessary.

Step 1

Start with an existing image or collage. It's dimensions should be larger than you want the final tile to be. Open it up in photoshop and make sure that your rulers are showing (view->show rulers or control-R.) Move the mouse pointer over the left side of your image, hovering above the ruler. Click & then drag right; you'll see a little dotted line (the guide-line) and a new double-lined cursor form as soon as your mouse is back over the image itself. Keep dragging towards the right, and release somewhere between 2/3 to 7/8 of the way across, dividing up the image into two unequal columns. Now do the same thing to divide the image into rows, this time only drag 1/8 to 1/3 of the way from the top down. These guidelines will help you make accurate selections, they aren't actually part of your tile. The exact placement doesn't matter so much, just as long as the bottom left quadrant is the largest of the 4 quadrants. Should look something like this:

Step 2

Now, with the rectangular marquee (selection) tool selected (M on your keyboard), select the far right column (upper & lower right quadrants). The selection should "snap" to the guides. (if not, make sure you have snap-to-guides selected under the 'view' window). Do control-C to copy to the clipboard and control-V to paste. The column will show up floating in the center; use the "move" tool (M on your keyboard) to move it over to the left. Be careful to get it ALL THE WAY over the left edge, with no extra pixels sticking out off the canvas, and no extra space between the left edge and the left edge of the canvas. Ditto for the vertical edges. If you're even 1 pixel off, you'll get funny lines in your tile, so use the zoom and the arrow keys to get this part just right.

Step 3

At this point, the right edge of your floating column should be very visible. The next step is to blend that away. My personal choice for this is to add a mask to that layer, and use a soft-edged, light-opacity, round air-brush, set to black, so hide part of the layer, letting the base layer show through. For further instructions about how to do that, see my first or second layers tutorial. If you already know how to do a feathered erase, you can also do that. Whatever, just as long as you end up getting rid of that sharp demarcation between the right edge of the floating column and the background, WITHOUT effecting the left edge of the floating column, which needs to remain exactly as it is so that when we tile, it matches up with the other side. When you're done, merge the layers down so that you're back to a single layer.

Step 4

Now repeat step 2, but select the top row (upper right & left quadrants) and place a copy at the bottom edge.

Step 5

Repeat step 3 on the floating row to blend its upper edge into the background, again, being sure not to the modify the part right along the bottom edge. Flatten your layers.

Step 6

And with that, you're pretty much done, the bottom left quadrant should tile perfectly. You can use the crop tool to eliminate the upper left & upper right and lower right quadrants or just select the bottom left and copy-paste to a new file.

Notes

While you can use this technique to tile *any* image, obviously the results are going to be better on some than on others. Good candidates have a lot of "dead" space or abstract backgrounds and/or a lot of blending within the piece itself. If your first try doesn't look right, try adjusting where you have the guides, making the left bottom quadrant larger or smaller.

Here's a sample of a tile made using this method and what it looks like tiled.

More of my Photoshop Tutorials   |     view my art (home page)