Silky Pixel

Tutorial: How-to Create Seamless Texture Patterns

September 17th, 2008

Creating repeatable patterns is a great skill to have in your toolbox. The technique is a must for creating 3D textures, but can benefit graphic design needs as well.

It’s easy to find a pattern, but not so easy to find one that can be tiled without some work. Usually this is the case:

If you tried to tile this, it wouldn’t work. There isn’t enough of the pattern shown to line up the repeat end to end. Fortunately, there is enough pattern throughout the image to create a full repeat -it just needs some re-arranging.

To start off, you’ll need a pattern to source from. Make sure that it shows a full repeat of the pattern or you’ll have a lot of extra work on your hands. I am going to use a scanned fabric sample that can be downloaded here. Many patterns are to be found from a quick google image search as well.

After you get the image loaded up, you want to make sure that everything is straight. Double-click the ‘background’ on the layers palette to make it workable. Hit ‘ctrl+r’ to show the rulers, and pull out a few guides.

Find parts of the pattern that repeat (circled above) and drag a guide on them to make sure they are lined up. I usually use ‘distort’ and ‘warp’ for this [edit | transform].

Now we need to repeat the pattern’s width manually. Make your canvas about 200% larger to give some working room [ctrl + alt + c]. Duplicate the fabric layer and move this layer over to the right until the pattern repeats correctly.

I adjusted the opacity of the two layers to show the overlap.

Get rid of the garbage hanging on the edge of that layer by erasing the edge (I recommend using a mask on the layer rather than the erase tool). The underlaying layer will show through and, if lined up correctly, should appear seamless. Merge these two layers together.

Now we need to do the same thing for the pattern’s length. Make the canvas 200% taller for some working room, duplicate the layer, and move it up and to the right until you can see where the repeat lands.

$Now repeat the pattern\'s length$

Again, the opacity is adjusted to show how the two layers overlap.

Now we have a full repeat all lined up! The circles show where I have identified repeats in the pattern.

Drag the guides along these repeats and get ready to crop. Merge the layers and do a last check to make sure the repeats of the pattern line up with the guides using ‘distort’ and ‘warp’. This step is important, it will determine how well the ’seamlessness’ turns out.

This is a good time to save a version of the file incase you need to go back and adjust where the image repeats.

Now crop the image along the guides. Be sure the ’snap to guides’ is turned on (view | snap to).

After the image is cropped, we need to put the edges of the document next to each other to get a preview on how this pattern will tile. This is done with the ‘offset’ filter. (Filter | Other | Offset…)

Open the offset filter and set the ‘Horizontal’ to half the width of the image. In my case, this is 908 px. Be sure ‘preview’ is checked, and ‘Undefined Areas’ is set to ‘Wrap Around’. To get a feel for what the filter is doing, click ‘Set to Transparent’, but be sure to have it set to wrap around before OK is pressed.

Luckily, this tiles perfectly and there is no adjustments needed. Do the same process now for the height.

Sometimes you will run into a situation where one end of the image is darker than the other, or the edges don’t line up correctly. This is where you need to get creative to get it to work.

The stamp tool and healing brush tool are perfect for creating seamless textures. This damask fabric isn’t a good example to show the stamp technique, so I made up a quick scenario with a typical texture that would need this:

FYI; to get out blotches or to deal with edges that are lighter/darker than each other, use the Dodge and Burn tools at a very subtle exposure (5-10%).

Now, what to do once you have this perfectly tile-able patterned image?