How To Create a Seamless Texture

Posted by Jason East on May 04, 2010.

How to Make a Seamless Texture

Posted Tuesday August 04, 2009

Despite the fact that seamless textures look really neat and appear to take lots of time and work to create, a decent seamless texture tile can be created rather quickly in under a dozen steps. It does help to have some Photoshop experience and a good eye for detail and aesthetic, but the process is still quite simple. In this tutorial we will create a seamless leather background for use in a 3d model or as a background for a web page.

Step 1 – Choose and prep your base image

I’ve selected my photograph and opened the file in photoshop. The quickest and simplest way to create your texture is to start with an image with square proportions. Let’s use the crop tool to crop our image down to a square.

My base image is 564 pixels tall here, so I’ll just crop from the very top and while holding shift drag the crop selection down to the bottom of the image. Holding shift constrains the crop selection to a square proportion.

I’ll adjust my crop by either dragging the selection on the canvas or by nudging by tapping the up arrow or down arrow key until I have an area defined that seems to capture the most interesting parts of the base image. Notice that the areas I’ve chosen for this image have some variation in the direction that the slightly worn seams run. This will make for a more interesting texture, but will increase the work needed to make the texture appear natural.

Here is the cropped piece, ready to be joined at the edges.

Step 2 – Offset the image

To start the join, I’ll select Filter > Other > Offset

I’m offsetting 1/2 of my total image size to wrap the image around the square proportion. Essentially, this makes the texture seamless at the edges of the image, so the seams are now in the middle of your image instead of at the outer edge where they were before. This greatly reduces the amount of work and time it will take you to create the texture.

Step 3 – Smooth out the seams

I’ll use the clone tool here to go in and remove the seams from the inner part of the image. Depending on the image, you might also have some luck using the healing brush tool as well. I’m just going to use the standard clone stamp tool.

For a more natural looking semi-rough texture, I’m going to use a textured brush at varying sizes.

By holding alt/option you can click the “origin” area of the clone, or the area that will be repeated where you use the clone stamp. If you haven’t used the clone tool before, just play with it a little bit and you’ll get the idea. Be sure to pull from different areas of the canvas to create a more random, natural look.

There are still a couple of places here that need some cleaning up. Also, I want to make sure that the middle part where the four corners of the join occured appears totally seamless, so I’ll use the clone tool with a smaller brush size, but the same texture to carefully extend one of the diagonal seams across the image. Getting this technique right takes a little practice but with a little patience you’ll be amazed at what Photoshop can do with just a few tools.

Step 4 – Export the file for use

You can view the leather background texture here.

If you’re using the file on the web, export it using save for web and devices, or if you’re using it in a model, export it using the appropriate filetype and resolution that you’ll need.

That’s it! You now have a seamless texture ready to use.