Seamless Texture Creation
by Le Chief (view all articles)
2 ratings / 4.5 stars
A tutorial that explains how to make seamless textures in Photoshop with some additional tips.
by Le Chief (view all articles)
2 ratings / 4.5 stars
A tutorial that explains how to make seamless textures in Photoshop with some additional tips.
In this tutorial, we will learn how to make textures seamless so they can be tiled multiple times on a surface without any evidence of where the texture loops. In this tutorial, it is assumed that you have basic knowledge of Photoshop and how to use the Clone Stamp Tool. This tutorial does not cover how to get the texture running in game, it is assumed that you know how to get the texture running in the game engine you are using, I will be using Valve’s Source Engine in this tutorial.
Assuming you have your texture ready in the desired dimensions, open it up in Photoshop and let’s begin.
I will be using a rugged concrete texture I got off CG Textures for this tutorial and have resized into a 512x512 image, if you would like to use the same texture I am going to use you can get it here. Firstly, let’s have a look at what it looks like if we try to tile it. You can tile a texture by copying your texture and creating a new canvas four times the size of the texture, 1024x1024 in my case, then paste the texture four times in an even tile arrangement.
As you can see, it’s easy to spot where the texture seams together so we can’t use this texture just yet in game.
Tiling a Texture
To tile this texture, we need to go into the Photoshop menu bar and click 'Filter' then> 'Other' then> 'Offset'. What this filter will do is offset the texture so the four edges of the texture are now in the middle and we can see the seams. For the horizontal and vertical settings, we put in half the length of the texture's respective axis, so if my texture is 512x512, I will enter 256 for both horizontal and vertical axis. If my texture is 1024x128 I will enter 512 for my horizontal field and 64 for my vertical field. However, this is only needed if our texture will be tiling along the x and y axis. If our texture will only be tiling along the x axis, we just offset the texture horizontally, leave the vertical field as zero. Also, make sure the Warp Around radio box is enabled.
Once you’ve entered the correct settings press Ok. We now can see the seams of the texture in the middle; we simply use the Clone Stamp Tool (s) and start cloning away those seams.
Once you are happy and can’t see any more seems, you will need to offset the texture again in case you cloned part of the edge of the texture. This time we can just click Filter then Offset as out settings are already set. Again, look for seams in the middle of the texture, if you see any just clone them away. If you cloned part of the edge you will once again need to offset the texture and clone away any seams.
Once you’re ready, have a look how your texture looks tiled. Here is what mine looks like:
As you can see or can’t see rather, there are no seams where the texture tiles, its seamless! Now let’s check that texture in game:
Ouch, although it’s seamless, it’s noticeably repetitive. So now we need to make the texture less repetitive. Go back to the texture in Photoshop. The key to making it look less repetitive is to remove distinct features that would give away the fact that this texture is repetitive and make our texture more consistent looking. It’s no good if one side of our texture is darker than the other, we need to even that out, we also can’t have any distinct discolorations or any other features, no matter how small that will spoil the texture. So start cloning away.
Here is what my seamless texture looks like before and after the removal of distinct features to make the texture look less repetitive:
As you can see, a lot of the distinct features have been removed and the texture is now more consistent, let’s have a look what it looks like in game:
As you can see, the texture is now less repetitive, just have to increase the scale of the texture on that wall and it will be fine. It may be a bit unpleasant removing these distinct features; however it’s essential for making the texture look seamless. If you want to keep some of those features, it’s a good idea to make a decal from the same texture before you removed the distinct feature(s) that you want to keep such as those discolorations or cracks etc.
Extra Tricks
Tiling Brick Wall Textures
Brick textures can be difficult to tile, especially if the lines don’t match up after you offset the texture. You can get away with using the Clone Stamp Tool on brick textures where the bricks are small and uneven, but on larger brick textures it can be difficult.
The secret is to select individual bricks and clone them over where the texture offsets, where the bricks don’t line up. You can do this by using the Marquee Tool (m) to make your selection then toggle the Move Tool (v) and dragging the selection around while holding [alt] to duplicate the selection. You may find you will have to rebuild the edges of the bricks (the cement or fill between the bricks) to make them integrate into the wall better; you can do this using the Clone Tool, just clone the cement in between a pair of bricks elsewhere on the textures on the edge of the new brick you cloned. It can be a slow and tedious process depending on how bad the texture is, but with careful work, you can end up with a highly effective brick texture.
Blurry Texture
You may find that after using the Clone Stamp Tool for a long period, the texture can start to become blurry. To correct this, just use the Sharpen Tool (r) to correct individual parts, or apply a sharpen filter to the whole texture by going into the Photoshop menu bar and pressing ‘Filter’ then ‘Sharpen’ and selecting from a sharpen filter.
Lens Correction
You might like to make some textures with your own photographs one day; however some cameras give photos a curvature at the edges. To correct this, go into the Photoshop menu bar and click Filter then Distort then Lens Correction. Play around with the settings until you fix the distortion.
Applying Grunge
Applying grunge to a texture and making it look dirtier or worn out is common practice but how do you do it? It’s very simple actually, you can download custom Photoshop brushes, some designed for the very purpose of applying grunge and add them to Photoshop. These brushes work the same way as a normal brush (circle) works, except they are designed specially to get certain effects.
To apply grunge to a texture quickly, just create a new layer and click a few times in different places on that layer with your desired colour and grunge brush, than play around with the layer opacity. Of course, it’s not as simple as that, careful selection of the brush or brushes you use for applying grunge should be made, careful placement of those brush marks, and tweaking of the opacity for desired effect and good colour choice is essential for good grunge, and don’t be afraid to place your grunge marks over several layers so they can be tweaked separately.
Greens are good for moss, browns and oranges are good for rust and dirt and black is good for general grunge, of course other colours such as white can be used also.
To get your own grunge brushes, just do a Google search for “photoshop grunge brushes” or “photoshop brushes”. You may be surprised at the wide range of custom brushes there are available to create all sorts of effects. If you’re looking for grunge brushes, don’t be afraid to try other brushes which may be suitable for grunge but the name suggests otherwise like “smoke brushes”. I have a nice tea stains brush pack which I use frequently for interesting grunge on my textures.
Assuming you have your texture ready in the desired dimensions, open it up in Photoshop and let’s begin.
I will be using a rugged concrete texture I got off CG Textures for this tutorial and have resized into a 512x512 image, if you would like to use the same texture I am going to use you can get it here. Firstly, let’s have a look at what it looks like if we try to tile it. You can tile a texture by copying your texture and creating a new canvas four times the size of the texture, 1024x1024 in my case, then paste the texture four times in an even tile arrangement.
As you can see, it’s easy to spot where the texture seams together so we can’t use this texture just yet in game.
Tiling a Texture
To tile this texture, we need to go into the Photoshop menu bar and click 'Filter' then> 'Other' then> 'Offset'. What this filter will do is offset the texture so the four edges of the texture are now in the middle and we can see the seams. For the horizontal and vertical settings, we put in half the length of the texture's respective axis, so if my texture is 512x512, I will enter 256 for both horizontal and vertical axis. If my texture is 1024x128 I will enter 512 for my horizontal field and 64 for my vertical field. However, this is only needed if our texture will be tiling along the x and y axis. If our texture will only be tiling along the x axis, we just offset the texture horizontally, leave the vertical field as zero. Also, make sure the Warp Around radio box is enabled.
Once you’ve entered the correct settings press Ok. We now can see the seams of the texture in the middle; we simply use the Clone Stamp Tool (s) and start cloning away those seams.
Once you are happy and can’t see any more seems, you will need to offset the texture again in case you cloned part of the edge of the texture. This time we can just click Filter then Offset as out settings are already set. Again, look for seams in the middle of the texture, if you see any just clone them away. If you cloned part of the edge you will once again need to offset the texture and clone away any seams.
Once you’re ready, have a look how your texture looks tiled. Here is what mine looks like:
As you can see or can’t see rather, there are no seams where the texture tiles, its seamless! Now let’s check that texture in game:
Ouch, although it’s seamless, it’s noticeably repetitive. So now we need to make the texture less repetitive. Go back to the texture in Photoshop. The key to making it look less repetitive is to remove distinct features that would give away the fact that this texture is repetitive and make our texture more consistent looking. It’s no good if one side of our texture is darker than the other, we need to even that out, we also can’t have any distinct discolorations or any other features, no matter how small that will spoil the texture. So start cloning away.
Here is what my seamless texture looks like before and after the removal of distinct features to make the texture look less repetitive:
As you can see, a lot of the distinct features have been removed and the texture is now more consistent, let’s have a look what it looks like in game:
As you can see, the texture is now less repetitive, just have to increase the scale of the texture on that wall and it will be fine. It may be a bit unpleasant removing these distinct features; however it’s essential for making the texture look seamless. If you want to keep some of those features, it’s a good idea to make a decal from the same texture before you removed the distinct feature(s) that you want to keep such as those discolorations or cracks etc.
Extra Tricks
Tiling Brick Wall Textures
Brick textures can be difficult to tile, especially if the lines don’t match up after you offset the texture. You can get away with using the Clone Stamp Tool on brick textures where the bricks are small and uneven, but on larger brick textures it can be difficult.
The secret is to select individual bricks and clone them over where the texture offsets, where the bricks don’t line up. You can do this by using the Marquee Tool (m) to make your selection then toggle the Move Tool (v) and dragging the selection around while holding [alt] to duplicate the selection. You may find you will have to rebuild the edges of the bricks (the cement or fill between the bricks) to make them integrate into the wall better; you can do this using the Clone Tool, just clone the cement in between a pair of bricks elsewhere on the textures on the edge of the new brick you cloned. It can be a slow and tedious process depending on how bad the texture is, but with careful work, you can end up with a highly effective brick texture.
Blurry Texture
You may find that after using the Clone Stamp Tool for a long period, the texture can start to become blurry. To correct this, just use the Sharpen Tool (r) to correct individual parts, or apply a sharpen filter to the whole texture by going into the Photoshop menu bar and pressing ‘Filter’ then ‘Sharpen’ and selecting from a sharpen filter.
Lens Correction
You might like to make some textures with your own photographs one day; however some cameras give photos a curvature at the edges. To correct this, go into the Photoshop menu bar and click Filter then Distort then Lens Correction. Play around with the settings until you fix the distortion.
Applying Grunge
Applying grunge to a texture and making it look dirtier or worn out is common practice but how do you do it? It’s very simple actually, you can download custom Photoshop brushes, some designed for the very purpose of applying grunge and add them to Photoshop. These brushes work the same way as a normal brush (circle) works, except they are designed specially to get certain effects.
To apply grunge to a texture quickly, just create a new layer and click a few times in different places on that layer with your desired colour and grunge brush, than play around with the layer opacity. Of course, it’s not as simple as that, careful selection of the brush or brushes you use for applying grunge should be made, careful placement of those brush marks, and tweaking of the opacity for desired effect and good colour choice is essential for good grunge, and don’t be afraid to place your grunge marks over several layers so they can be tweaked separately.
Greens are good for moss, browns and oranges are good for rust and dirt and black is good for general grunge, of course other colours such as white can be used also.
To get your own grunge brushes, just do a Google search for “photoshop grunge brushes” or “photoshop brushes”. You may be surprised at the wide range of custom brushes there are available to create all sorts of effects. If you’re looking for grunge brushes, don’t be afraid to try other brushes which may be suitable for grunge but the name suggests otherwise like “smoke brushes”. I have a nice tea stains brush pack which I use frequently for interesting grunge on my textures.
Posted by 
