Making Seamless Tileable Images in Photoshop 4+

©1999 By Jeff Cantin aka TinCan on IRC

In this tutorial we will make a few small images that are 100% seamless tiles. Once you understand the technique you will be able to make any size texture maps you want. I learned some of this data from Zero Batzell Dean and from the Serious3D magazine Issue 1, as well as my own understanding of Photoshop. This is a record of a combination that works well for me.

Let's begin

Open Photoshop and open a new file, set it to 200 x 200 pixels, 72 dpi, and RGB Color. Select the entire image with "Ctrl A" and from the Edit menu select "Stroke." The stroke settings should be set to 2 pixels and the placement should be "inside." This will put a border around the entire image. From the Filter menu, select "Other" and "Offset..." change the x and y values to half the image size, in this case 100 x and 100 y. This step "moves" the borders to the center of the image and looks like a cross.

Step 1

Step 1

Make a new layer and set it's opacity to 95%. This will be our drawing layer. Anything you draw that touches the "cross" is actually going to be on the border, so I work this area first.We will use the offset filter often during this process.
Step 2

Step 2

This is how the layer looks after the "Offset" filter is applied. Now I can draw my main object in the center of the image area.
Step 3

Step 3

Whenever I get close to the edge I hit the offset filter and continue drawing over the cross area and then toggle the offset again.

Lets do a test to make sure we have a seamless texture, hide the cross background layer then select "All (Ctrl A)." From the edit menu select "Define Pattern," now make a new file that is twice the size of our texture image, in this case 400 by 400. From the edit menu select "Fill..." and choose "Pattern" from the selector box, whack the OK button. You should see something like this...

Tile test

With a little thought you could make any texture seamless. Do the edges first by drawing over the "cross," then use the offset filter, and work towards the center.

If you learned something from this tutorial, please drop me an E-mail at Jeff Cantin
This is an important step, I track the number of visits to "thank you" notes, I need to know my time and my web space is well spent.

I have other tutorials linked from my hobby homepage. Give those a try too when you are ready.