Creating a seamless texture in Photoshop

Creating a seamless texture in Photoshop

You will need to know how to use Photoshop (basics) and a digital photograph of something containing the texture you want, more-or-less, viewed straight on.

If you don't have a suitable photo handy, we can use one of these:

http://picasaweb.google.com/tloewald/Textures

I'm going to use this picture as an example:

DSC00603.JPG


First, you need to straighten the image and/or try to eliminate perspective. This photo is pretty much free of perspective but rotated a bit.

1) With the ruler tool, draw along one of the cracks.

ruler_tool.jpg


2) Now, select Image > Rotate Canvas > Arbitrary...

Note that the correct angle is there already (because you used the ruler). So just click OK.

straightened.jpg


3) Now, use the rectangular marquee select tool (press M) and set the aspect ratio to 1:1 (Fixed Aspect Ratio in the tool settings floater).

1_to_1.jpg


4) Make a square selection that starts and ends on a crack. (You should be able to make a selection three planks wide.)

5) Choose Image > Crop.

6) Now choose Image > Duplicate and click OK, so you have a copy in case you screw up or want a piece of the original image to patch a hole.

7) In one of your images, choose Filter > Other > Offset... Put in some arbitrary numbers (less than the width/height of the image) and make sure you select Wrap Around.

offset.jpg


This will reveal all the imperfections in your texture's ability to tile. You can fix these using the Clone Stamp Tool (S). Basically alt- or option-click somewhere in the image that has no visible seam and then use the tool to paint over some of the seam until there's no seam. Repeat this process (along with reusing offset) to find all the seams and eliminate them.

Note: It's not necessary in this example, but you may want to grab feathered selections from the original image and use them to cover seams too -- it's especially useful to use bits from the original image that weren't used in your cropped portion.

Also note that any high contrast detail is to be avoided (unless it's deliberate, like say windows on a big building), as it will be blindingly obvious when you tile (let's say there was a bright patch on the wood -- you'd see it repeated really clearly when you rendered your image).
Eventually you'll have a very nice seamless texture. If you're only interested in rendering, you're done.

seamless.jpg


If you need to use the texture in a realtime application, you want to resize the image down to n x n where n = an integer power of 2 (like 512).

power_of_2.jpg


Anyway, here's the final result, mapped onto a plane in Cheetah3d with UV scale set to 5 and 5.

render.jpg


Total elapsed time (including both doing all this stuff and writing the tutorial) about 35 minutes.
photo
 
Last edited:
Excellent tutorial. I always asked myself how it works to generate a seamless texture. I have to try it by myself once I have some time left.

Bye,
Martin
 
Back
Top