Photoshop: Tileable Textures

After going through through some of the questions I’ve received lately, many of you asked about tileable textures. I’m sure you’ve all gone to websites which had ugly overlapping backgrounds. Let me show you how to alter your textures to ensure that they tile properly.

Tileable Textures in Photoshop

Video

[raw] [/raw]

Here’s a bamboo texture that I’ve been working on lately. You’re free to use it and follow along. (Click below to expand)

While it’s not necessary, I prefer to work with textures that have a square aspect ratio, and there’s usually not a need for massive images, unless you’re producing professional game textures. So in this case, use your  Crop Tool from the Tools Bar on the left, then at the top enter 256px x 256px for the dimensions.

I really wouldn’t go bigger than 512px, especially if you’re going to be using this online. Make sure you remember the size of your final image. You’ll understand why in a moment. When cropping your texture, make sure to capture the main elements of the design, and fill the whole crop. Don’t worry if the top and bottom are slightly cut off.

Once the image has been cropped, let’s make some adjustments to ensure that it tiles properly. Head up to Filter > Other > Offset.

Here, for both the horizontal and vertical values, we want to enter exactly half the size of our document. If you remember, we cropped our texture to fit in a 256px x 256px document. So for the values, we’re going to use 128 for both, as it’s exactly half of 256. You also want to make sure that Wrap Around is selected at the bottom. This will help connect our images together.

At this point, the texture will tile just fine, but there are some clear seams that we need to fix before testing anything. Usually, if you used the proper Offset values, your seams won’t be too bad. To fix these, I’d recommend starting with the Spot Healing Brush with the Content-Aware option turned on. That should deal with most of the seams. For the rest, the Clone Stamp should work just fine.

Now that our texture is looking seamless, let’s see how it tiles. Head to Image > Canvas Size. Here, you’re able to increase the size of your canvas, without effecting the image that you have been working on. I chose to increase it to 768 pixels to make it 3 times as large.

Now, you can position your image in one of the corners, then using your Alt/Option key, drag out a duplicate until it snaps beside the original. Continue this until you’re convinced that the texture is tileable.

We now have a perfectly tillable texture! No seams attached!