WorldBuilding/TerrainTextures/Making a Seamless Texture in Photoshop

From TDN

Introduction

Seamless textures. If you are making games, you need them. There are plenty of free texture sites out there, some with pretty good work to offer, but chances are there will come a time when you just can't find that *perfect* texture. You think, "If only I knew how to do this myself, I could make one". That's where this tutorial comes in.

Following the method detailed in this tutorial literally every single image you've ever seen, be it photograph, digital image, or masterpiece painting can be source art for a seamless texture.






Aquiring Source Art

We obviously need to start with an image that we want to make seamless. Like I said, any image will work. For this tutorial, we are going to be using this digital photo of a rock.

Image:Seamlesstextures01_01.jpg

The image shown is actually half the size of the image we're going to work with. The working image can be downloaded Image:SeamlessTextures source.zip.

Taking digital photos to use for textures is a great way to save time painting, but there are a few simple rules you should follow to make sure what you shoot is actually usable. To get the low down on how to take good photos, check out Photo Textures - Hints and Tricks.

Now that we have our source, time to roll up our sleeves and get down to business.






Making the Image Seamless

The process to make something is seamless is relatively easy. Start by sizing your art. This will usually mean you are cropping a larger image to focus in on the part that you want to have as your texture. Most of the time the texture is going to need to be square, so take your box marquee tool and hold shift as your drag your selection to keep the selection sized equally on all sides. You want to make sure you get as much information in the selection as you can, since it will give you that much more to work with. I have highlighted where I selected with the magenta rule.

Image:Seamlesstextures01_02.jpg

Next , go to Image>Crop to crop around your selection.

Image:Seamlesstextures01_03.jpg

There are all sorts of rules and guidelines of what makes for a good texture, but those are the topic of Advanced Seamless Textures. This is going to be strictly a guide to making something seamless.

We have our square selection, but it's far too big, so we need to resize. Generally, textures for terrain can be smaller in size since detail can come from layering and blending them. Go to Image>Image Size and resize the image to be 256x256 pixels at 72 pixels per inch.

Time to unseamify this little doggie. Go to Filter > Other > Offset. With a horizontal shift of 128 and a vertical shift of 0, click OK. Your image should look like this.

Image:Seamlesstextures01_04.jpg

See what just happened? I invented the word unseamify. But more importantly, the Offset filter demonstrated that it rules supreme by moving the seam to the middle of the image (the perfect place for it to be so we can edit out).

Now we are going to use the clone tool with a size 30 feathered brush to erase the seam. For those of you who aren't familiar with the clone tool, it's the button that looks like a stamp that sits right above the eraser button. Clone is effectively a live copy and paste in brush form. Hold the alt key and click on the middle of one of the halves to get a selection for the brush, then paint over the seam. After doing that, we see that the seam has been erased.

Image:Seamlesstextures01_05.jpg

Now go back to offset, but this time do a vertical shift of 128 and a horizontal shift of 0.

Image:Seamlesstextures01_06.jpg

Again, we'll use the clone tool to take out the seam, but this time bring the brush as close to the edge without letting any of the brush actually go over the edge of the image. If the brush goes over the edge, you will have ruined the seamlessness of the first edge. Here is the final image.

Image:Seamlesstextures01_07.jpg

That's it! You just made a seamless texture! Just set it as the background of your desktop as a repeating tile to test it. This was a basic example; it technically is a seamless texture, but it doesn't look AWESOME. Check out Advanced Seamless Textures to learn how to take your image to the next level.