From photo to seamless texture
04/09/02 @894 | Martin | comments (30)
This tutorial is about creating seamless textures out of photographs. There's a simple technique that allows you to create seamless textures. A skill any 3D modeler or game designer should be familiar with. I'll show you how I turn the photograph below into a texture that will seamlessly tile horizontally. (I apologize for the poor image quality, but I had to compress them quite a bit to save some bandwidth).

Step 1: the source file

The original photograph, 2240x1680 pixels

We'll need a photograph. I was on vacation in the French Alpes and made some photographs of textures I found in a mountain village. This wall has a nice texture with some cracks and color variations. The original image is pretty high res, if you want to have it, it's available right here:

texture_full.jpg (1.6 mb)

You might want to grab it and tag along while I go through all the steps. I think it's easier to follow if you open up photoshop and follow my every move . You can use this technique in most photoshop-like programs but it's written with the photoshop tools and functionality in mind.

Step 2: the cutout

this is the part we'll use for the texture

It might sound weird to devote a whole step to cutting out a section of the image... and it is. I just wanted to show you which part of the image we'll use for the texture.

I wanted to create a texture for a wall, so I decided to use the whole thing. When making game textures, which are relatively small, you can also choose to use just a section of the wall. Since the source file is of such a high resolution, you'd be able to keep some more of the details that would otherwise be lost by the resizing...
Small note: we've not resized the image yet, keep it high res for now.

Step 3: deperspectivalising

transform the image to get rid of the perspective.

Sounds good ey . But yeah, that's pretty much what we need to do now. You can get rid of the perspective problems by simply cutting off the top and bottom part, but since I'll use the texture for on a wall, I want to keep the details at the top and bottom because it will look more realistic. As you can see there's some dirt and wet stains at the bottom...I want those in it. So we're going to transform the image.

Since you're working on a high resolution, it's not a big problem to transform the image a bit. So select the whole image (ctrl + a) and goto Edit > Free transform (ctrl + t). Scale the image so the parts beyond the top and bottom of the wall fall off. All that remains is the end of the wall where the ground starts in the bottom right corner. Press ctrl while you grab the tranform point, this allows you to distort. Drag this point down a bit until the end of the wall dissappears from the screen. Basically what you've done now is you've corrected the perspective, making this face of the wall a perfect rectangle, which is exactly what we need if we want it to be a texture.

note: I've noticed that I cropped the image a bit to loose the dark gap on the right side of the image. It'll make it much easier to get the texture to tile seamlessly.

Step 4: some cloning

we need to clone this part, to get rid of the shadows at the top

If you take a look at the picture, then you'll see there's something hanging over the wall casting a shadow onto the top part of the wall. There's noting hanging over the left part of the wall, so we'll clone that part to get rid of the nasty shadows.

Take the rectangular merquee tool and set the feather to 12 px. Select the part of the wall you want to clone. Since you can't select outside the canvas of your image, you'll get the feather effect at the top of the wall too, but we don't want that. So make the selection a tad bigger and then drag the selection outside you screen, that way it won't feather at the top, only at the sides and the bottom. Now press ctrl + alt + shift and drag the selection to the right. Ctrl makes you move the selection, add alt and you'll move a copy of the selection and add shift to constrain the movement to 45% increments. Now cover the whole top in clones, don't worry too much about tile effect since you'll hardly notice it. By making one clone overlap more than another you can break the repetition a bit.

Step 5: removing the seam

here's that devilish seam sitting right there in the middle.

So here's our real problem. We've prepared the texture as much as we could, now we need to get rid of the seam. I've cut the image in half and swapped the parts, now we can clearly see the seam. One way to remove it is to paint or smudge out the differences, but I prefer working with the photomaterial only.

To remove the seam we'll use just about the same approach, only we make the edges overlap a bit so we can 'paint' with the photomaterial by using a mask and the airbrush tool. Let me show you how I do this.

Step 6: copy and paste

we copy the layer and make a small strip overlap the left side.

It's getting a little tricky now so pay attention. First we'll duplicate the layer by selecting the whole canvas (ctrl + a). Now copy (ctrl + c)and paste (ctrl + v) and you're done. Don't duplicate the layer since you might also grab image data that is outside the canvas and you don't need that.

Click the marquee tool and drag the layer to the left while pressing ctrl and shift to constrain the movement. Drag the layer to the left until only a small strip is still visible. Now we basically have two textures that overlap eachother a bit. Now we need to get rid of the seam and we're halfway done.

Step 7: paint that seam away

using a mask and the airbrush tool with a soft 'brush'  we can paint away the seam.

We have the small stip, now we need to add a mask to that layer. Click the layer and then click the mask icon (layers tab, at the bottom, second icon from the left). Now that we have a mask, we can take the airbrush tool with a soft brush. We're still working with the fullsize texture, a brush size of about 25 will do. Use black as the foreground color and paint away the seam. In the screenshot you can see my strokes in black. I've also selected the mask so you can see the marquee line around the strokes. Don't just make the two sides flow into eachother, also paint around the cracks and make sure you don't destroy the details or make a dark spot fade out over a bright background.

Step 8: find the seam

find the seam...

Now that we got rid of the seam, we can merge the layers. You should now have one layer with texture... that still isn't seamless. We need to make another copy of the layer and this time move it to the right. You have to find the seam.. slowly drag it to the right until you see the details repeating. If you want to see if you found the right spot, click the visibility (the eye-icon) on and off. If you found the right spot, you'll only see the right side if the seam change a bit. Give it a try, you'll see what I mean.

Step 9: crop and voila!

invert the selection and crop the image to make it seamlessly tileable.

When you've located the seam, don't flatten the image yet. We need to cut off the right strip to make the texture tile horizontally. As you can see the part at the left side is an exact copy of the part at the right side.So click the layer while holding ctrl and you'll select the contents. Flatten the image and keep the marquee. Go to select > inverse (ctrl + shift + i) and go to image > crop to cut off the material outside the selection.

Once you've cropped the image, your texture should tile seamlessly, but only horizontally. At this stage you can use the same technique to make the texture tile vertically. I'm not going to do this because this texture was meant for a wall and doesn't need to be tiled vertically. Let's make some final adjustments before we resize our texture to the dimensions we need.

Step 10: locate imperfections

the white marks mark the seam

Now it's time to test your texture. Paste it into a larger canvas, copy it and tile it. Now we can see if the it's really seamless. There's a small part that I don't like. It's a dark spot. By selecting it with the round marquee tool using a feather of...say 12 pixels and then playing with the brightness and contrast I can get rid of the spot.

The tricky part is getting rid of the big, rough crack on the right side of the image. You can cover it up quite easily by using parts from the texture. The clone tool work pretty well too, if you know how to use it.

Step 11: spicing up the contrast and colors
Well I'm more or less done. I've made two variations of the texture by playing around with the clone tool. I also tweaked the colors a bit using image > adjust > color balance (ctrl + b). I also added a bit more contrast using image > adjust > brightness and contrast. It's easy to overdo this though, so contain yourself. Now we can finally resize the image. I need them to have dimensions of a multiple of 16 since I will use them as Counterstrike map textures. When your source image is high res, you can mess with the proportions a bit.

 

Aftermath
Of course the textures above can still be improved, there are still details in it that will create that 'repeat-effect' when you tile the image. It also depends a lot on the type of texture you're making and the amount of details like cracks and color variations in the texture. The real pro's still paint their own textures using photo's only for reference... But for the less skilled, I'd say this is a very nice alternative.

- Martin