In Making a Seamless Texture, we learned how to take a source image and make it repeat across a surface seamlessly. But just because something tiles nicely doesn't mean it will look good. For instance, let's say we are working on a rock texture. If there are deep cracks, a patch of unique color, or some other anomoly only in one little part, that is going to create patterning. When that texture is placed on the side of a mountain, a player will be able to see that one anomoly in a pattern across the surface. You don't want that. Trust me.

In this tutorial, we'll learn how to totally destroy anomolies in an effort to annahilate the possibility of patterning, while using color to ensure the reign of masterfully created textures.

As always, our first step is to aquire source art. In this case, I'm using this image.

The image above is a reduced res version of the actual image. Get the full sized version in all its higher res glory Image:AdvancedSeamlessTextures source.zip.

The process for making this image seamless is similar to the process detailed in the Making a Seamless Texture tutorial, although it's not a carbon copy. As you know, we are not only trying to make this image tile without seams, we are trying to make it look good. The difference in process starts right at the beginning. Instead of cropping right away, we are going to edit the image to give us the most information for our crop that we can get away with. If you look at the image, you'll notice that the grass is forced into a more horizontal shape because of the garden thats creeping in on the top edge. Also, take note that if we take a square crop, we are effectively losing about a quarter of the grass in the image. That's stupid; WE WANT THAT GRASS.

Before we remedy both those situations, though, we want to clean up the bottom corners. To do this, we turn to our good friend, the clone tool.

And the edited image:

Now to tackle the garden menace. Make a rectangular selection from around the middle, making sure not to select any of the patchiness, and paste it over the garden.

Merge the garden cover-up layer and the orginal layer. Invite Mr. Clone Tool to take care of the seam. Since one of the best things this image has going for it is its sharpness, try using a clone brush that has no feathering. A hard edged brush used intelligently will preserve the sharpness. Feathered brushes create a blurring effect on sharp images such as this one. Besides covering the seam, take a few samples from different parts of the image and paint them onto the middle of the garden cover. This will help kill any chance of recognizing the garden cover as something that was copy and pasted from the middle of the image.

While you're at it, take out the patchy spot in the center.

This is looking hot. It's going to make a nice texture.

Now to make the image repeat seamlessly. This can be done with the process found in the previous tutorial. Here is a quick review, in case you are enrolled in this class without taking the prerequisite.

1) Crop your image into a square and resize it to so it's not gigantic. The size I typically use for terrain textures is 256x256. Since the resize with particular image is pretty drastic, you may want to do a single round with the sharpen filter to get back some of that lost clarity. Also, although you cant see it right now, the pixels on the edges are at about 50% opacity. That happens when you shrink something really big down to something really small. To take care of that, after you resize, just duplicate the layer and then merge the two. It will give you solid edges all around.

2) Go to Filter>Other>offset and offset horizontally by 128 pixels. Use the clone tool to get rid of the seam in the middle of the image.

3) Go to Offset again, but this time offset the image vertically by 128 pixels. When you clone over the seam, make sure you bring your brush right to the edge of the image without actually sending the brush over the edge. Doing that will make you have to go back and do step 2 again.

Here is the seamless texture.

This looks nice, but we aren't done. This texture would be great if we were making a game about city parks, but our game is a post-apocolyptic sci-fi love story that takes place in the arctic circle. This grass is hardly appropriate.

A post-apocolypic arctic environment wouldn't be very believable with green grass. The grass needs to show signs of being dry from the cold climate and also from being nuked repeatedly. To do this, we are going to go to Image > Adjustments > Hue/Saturation. For the image below, I used the following settings:

Hue -38 Saturation -37 Lightness 0

But what the hell is this! You can see these nasty blotches on the middle left and middle right! Hey, friend, don't worry. These things happen. We have a way of dealing with this.

First, duplicate you're layer. Since the first way we try to fix this may not work, we want to have a solid way of getting back to this fork in the road without having to make sure that you stay within the amount of undos your history palette is holding. Another way of doing this is to just take a snapshot in your history pallete. I always copy layers because snapshots don't save with the file if you close it.
<br<

First, clone tool the spots out and then go through the "make seamless" process again. Granted, this is kind of tedious, but we need to get the texture to a place where it's uniform across the entire area. Some of you may be thinking "But... the spots are kind of interesting". This is true; they add a bit of variation in the texture, and variation makes things more believable in-game. The problem is that the variation as it exists now is sporatic and will cause patterning. We want to be entirely in control of how the variation is going to be laid out.

That being said, here is our new texture, all re-unseamified with no blotches.

This is when things start to really get interesting. We have our base texture, which for all intents and purposes, could be used in our environment. Making variations of this texture, however, will make the environment look more believable. That being said, let's make a "patchy grass" version.

First, we need a secondary texture. Any random texture image you have or you find on the internet will work. Im going to use a dirt texture from www.gamesextract.com. Here it is.

Open the file, then with the move tool selected, hold shift and drag it from it's window into the grass window. Holding shift will make it appear into the center, as opposed to the the standard drag, which just has it appear from the edge you drag it in on.

Next, we need to get an abstract selection so we can add the patches, There are a number of ways of doing this.

The easiest way is to head over the Guides and Assistants section of this site and download an alpha map. You can place the alphamap in your image, ctrl select it in the layer pallete to get the selection, and then just copy and paste from whatever layer you are trying to take a sample from. This ends my shameless self promotion.

Since this site is about helping developers, though, I'll teach you how to actually get an abstract selection rather than just pimp my own work.

First, duplicate one of your layers. In this example. im duplicated my dirt texture. Next, gaussian blur that texture slightly. I used a level of 3.6.

Go to Image > Adjustments > Treshold. Treshhold is great for making alpha selection boxes among other things. Set the threshold to 120.

Now, use the magic wand to select either a black spot and then go to Select > Similar to select the black across the entire work area. Create a new layer and fill the selection with black. Deselect the selection. With the new layer active, do a gaussian blur of 3.

Click on your dirt layer, duplicate it, and then hide the original; we are going to be editing the dirt and we want an original form to go back to. Ctrl select the blurry black layer and then click on the copy of the dirt layer. Push delete. Set the blending option (which is the little drop down menu that normally says "Normal" in the top of the layer pallete) to "Dissolve". Finally, set the layer opacity to 85.

Bam! It's the first step in our variation. It doesn't look like much right now, but it will.

Copy the blurry black layer and hide the original. Click on the copy and push ctrl+t to start a free transform. Scale it up and rotate it, similar to this:

Next, duplicate the base yellow grass layer again. Ctrl select the big black blurry texture in and push ctrl_shift+I to get the inverse selection. With the duplicate yellow grass layer selected, push delete. Hide the big black blurry layer.

Move the modified yellow grass layer above the modified dirt layer and set its opacity to 50. Go to Image > Adjustments > Hue/Saturation. Make its hue -8 and its lightness -20.

Things are starting to look interesting, but we need something to glaze over the whole thing to really bring it together.

We're almost there. We ctrl click the big black blurry layer and the ctrl+alt click the small black blurry layer. This will subtract the area of the small black blurry layer from the area of the big black blurry area within our selection. Click on the base yellow grass layer and do copy and paste. Activate the layer that was created with the paste, and hit ctrl+t to open free transform. Rotate the layer counter clockwise 90 degrees. Change the blending option to Color Dodge. Finally, set the opacity to 22.

This is looking good. Here is the laid back, easy part. Experimentation can sometimes lead to really interesting textures. Try changing opacities and blending options on differnet layers. Whenever you see something you like, click the leftmost bottom button in your history pallete. This will create a copy of the document as it currently exists.

After experiementing a little, I came up with this.

I hid the big blurry dirt layer and changed the small dirt layers opacity to 59.

After changing what you want, make sure you save your work as a psd or some other format that supports layers. Somtimes the best place to get inspiration is to look back at what you did previously. All thats left is to flatten the image, take out the seams, and save it as a jpg.

Lets look back at what we just did. We turned this:

Into these:

Making good textures is tough to pin to an exact science. This tutorial shouldn't be looked at as definitive directions to doing it "the right way". Instead, look at it as a guide that lists good ideas. Start with a clean source image. Normalize everything and then add details. Unexpected, pleasant results can be achieved by experimenting with blending and opacity. In this example, we only used one other image besides the grass, but there will be times in your texture making careers that will warrent more. For instance, you could use one as the base, one for color, another for light and shadow information, and a fourth for extra detail. Really, the sky is the limit. The best advice is simply to work on a texture until you think it looks good, then see if you can make it look better than that.