Votes: 1, Points: 5
Create Tileable Texutres
Create tileable textures
Hello, and welcome for this new tutorial. In this tutorial I’ll try to
explain how you can make tileable textures, starting from photo
material. This tutorial will be separated into 3 parts.
1. Make your photo tileable in Adobe Photoshop.
2. Make a render-setup in Autodesk 3ds Max to render your work properly
3. Make your Bump and Specular maps.
Here we go…
1. Make your photo tileable
What does tileable mean? Most people will answer something like: “if I
can place the texture next to each other without having a visible
seam”. Sounds ok, but tileable also means that you don’t have any
eye-catching repeating spots in your texture. In early 3dgames this was
not a big issue, but in next generation games this is a big issue, so
let’s see what we can do about that.
As a starter you need a good
photo. Google image search is ok, but there are plenty of other places
that are much better. I always go to www.flickr.com,
because there you have tons of very high resolution images. (not all of
them are, but most of them). Today we’ll make a 1024*1024 texture, so
look for an image that has at least these sizes. You really don’t want
to scale your image up! I did a search on ”Concrete wall” and found
this great image that I’ll be using to day.
Some tips before we go on. Make sure that you image is taking in a 90°
angle. Photoshop has a set of tools to optimize your image if the angle
is not 100% ok, but 45° angles are not worth trying. Also, make sure
that your images is a good base to start with.
The bad one has that yellow spot, that will make it look tilled, even
when there is no seam. If you know you way around with Adobe Photoshop
you can make this look ok, but remember, this is a basic tutorial.
Back to our image. I made a square selection (you can do this by
holding the Shift key while dragging). This is the part that I want to
It has a line running true the middle, and one horizontal one, which I’ll use for the seams.
Make a new file, with the following sizes: 1024*1024. Copy-paste your
image from your photo to your new document, and scale down if needed.
How do we make it tileable? We separate the image in 4 parts, and them
to the opposite corner. (Upper left becomes lower right, etc). But
where do we cut? Some people only use a small border, I usually go for
the middle of the image, making 4 identical square selections. I could
use the concrete grooves in this situation, but I want to show you the
power of the Clone Stamp Tool in Photoshop, so I’ll go for the middle.
Here is how we do this. Place guides in the middle of your image (go to
View>New guide, or drag them from your Rulers (toggle rulers with
Ctrl-R)). Now make selections, and Cut/paste. Make sure that every part
is on a different layer. Now drag them to their new position. We now
have all our outer borders perfectly tileable. The only thing left for
us is the centre of the image.
As you can see, we have some
very bright parts, and some very dark parts. It is very unlikely that
you will not have this. What to do about this? First of, we add an
Adjustment Layer to our layerset. Select the layer on top of your
stack, then press the “adjustment layer” button, and choose for
Hue/Saturation. Set Saturation to -100.
Now why did we do this? Because now we have a gray-scale version of our
texture. Why do we need gray-scale? Well, in gray-scale it’s much
easier to see differences in brightness. So, if we want to check if our
four parts have the same brightness we just activate our Hue/Saturation
adjustment layer. Adjustment layers are similar to regular layers. So,
you can turn them on and off like normal layers to. This way you can
easily activate/deactivate a certain effect without changing your
original image/texture. Very handy wouldn’t you say?
for the real work. Let’s do something about the dark part of our
texture. Go to your toolset, and look for your Dodge Tool. This tool
will lighten up your image. You can do very cool stuff with this. Now,
we’re going to handle the dark corner, so you should set Range to
“Shadow”, this way you will effect the dark parts of the image most.
Set exposure to a low number (going from 10 to 20 max). You have more
control this way.
Now on the other hand we have the Burn tool. This tool (you’ll never
guess) will darken your image. In this case you can set range to
Highlights so that it doesn’t affect your darker spaces.
NOTE make sure you don’t darken/lighten the outer edges of your canvas,
since these are already a perfect match for our texture!
This is what I get after some Photoshop work:
In the right lower corner you see the original, in the centre the one I
changed. It has a general gray colour, which is exactly what we want.
(I have some gray spots if I deactivate my Hue/saturation layer, but
that’s ok. We’ll give the texture colour with our hue/saturation layer
anyway.) There is still a terrible seam visible, I know. That’s next.
First, we’ll merge our layers together. I still want my original layers
to exist in case I want to change something, so this is what I do:
deactivate your Hue/saturation Adjustment layer if you haven’t already.
Select all (Ctrl-A), and “copy merged” (Ctrl+Shift+C). Now paste your
image again (Ctrl-v).
Go back to your toolset, and look for
the Clone/Stamp tool. With this tool we can copy a part from our
texture, and blend it in somewhere else. How does this work? First,
select your Clone Stamp Tool, Alt-click to mark your start point. Now
you can click and drag all over your canvas, and do the magic stuff.
Remember to stay away from your canvas borders! Remember I told you
that there are two condition to make a tileable texture? Well, the
Clone Stamp Tool is the perfect tool to remove eye-catching details on
you texture that will make it look repeating. There is one big BUT to
this great tool. It has the intention to make your image blurry. So, if
you see that a section of your image has more blur than another (which
could cause repeating textures in the end), just use your Clone Stamp
Tool and repaint some of the stuff you don’t like.
ready with your Clone Stamp Tool, then go to
Filter>Sharpen>Sharpen. This will remove some of the blur in your
This is what I have so far. I still have a bright section in the middle
of the texture, so I might burn that a little, just to get it plain...
Now there’s only one thing left. Test our image and see how it looks.
There are several ways to do this. You could do this in Photoshop (just
make a new document with 3 times the size of your texture. You could
also import your texture into your game-engine of choice, to much work
imo, so I usually make a plane in max en render it there. Give’s the
best result in my opinion. This is how mine looks so far.
It still has some repeating parts here and there, but I’m quite happy
with the result. Remember that the vertical lines you see are intended.
I could remove that one to if I wanted to, but I want to keep something
to break the texture. It will look better in game this way I think.
We now have a tileable texture, with no seams and almost no repeating spots… time for part 2.
2. Lighting setup
When I’m making textures for a game, then I don’t exaggerate with the
effects and options 3dsMax has to offer. It’s very easy to make your
texture look very good in 3dsMax, but that doesn’t mean it will look ok
in your game. So, for this we will just use 2 omni lights as light
source. Although skylights generate a nice ambience in 3dsMax, they
will also ruin your normal map. So, no skylights in our scene.
As you can see in the above image, I use 2 planes for my renders. One
being a wall, the other one a floor. This usually does it for me.
Lightning is a bit tricky. First, we’ll set up a blue omni light (RGB
49–163-228), somewhere close to where the two planes connect. This will
cast a nice blue “glow” on the edges we create with our normal map.
The second one is a very bright one, that will be our main light source
(RGB 246-243-225). You can give this one a colour if you like but keep
it very bright, because this will affect your texture colour. If you
change it to much you will not see your real texture colour. We place
the second omni light somewhere like in the image below (it’s also a
little to the right of our two planes.
Besides the two omni lights, we’ll also set our AA filter to Catmull-rom.
That’s it for our render setup. We can now render our texture in our
render dialog. But that's rather laborious if we want to make small
changes to one of our maps. It would be alot cooler if we could see our
texture in real time (and drag the lights all over your texture to see
the effect, yes...). And believe it or not, you can do this in max. (I
think from max 8 up, i haven't tested this in max 6 or 7).
Before we can start we have to make sure that our display drivers
support DirectX, therefor, go to Customize->Preferences, go to the
Viewport tab, and click Choose Driver. Make sure you pick Direct3D, and
you pick DirectX 9.0 from the list. Restart 3dsMax if needed. You can
now use directX shaders in your viewport.
The only thing
left now is to enable them. Go to your material browser, and look under
the DirectX Manager tab. Activate "DX Display of Standard Material".
Let it proces for a while, and then you should be able to see that the
"Show map in viewport"-icon has turned from blue to pink. This means
that if you enable it, it will be in realtime with DX. Go ahead and
enalbe it. (it take's some time before your texture is loaded, but once
loaded all goes smooth)
(image of what it looks like after you made a normal and diffuse map, just to show the power...)
3. Make your bump and specular map
Time to make it look sexy. Before we start with either bump or spec we
first need to do some stuff with our colour map (or diffuse, which is
actually a wrong name). It’s still in gray-scale at the moment, and I
really liked that yellow concrete. So, I’ll just go to my
Hue/Saturation Adjustment layer, select the Colorize option, and set
Hue to 54, Saturation to 38 and Brightness to -30. These work for my
texture, but they will probably not work for yours. These are things
you have to figure out yourself, try some things, see what you like…
You may or may not have noticed that there is a Layer mask attached to your Adjustment Layer.
For people who don’t know what a layer mask is, a mask is an extra
layer, by which you can set transparency. So, if I paint something
black on the layer mask, the same pixels in my layer will be fully
transparent (100% invisible). If I paint white, then those pixels will
be 100% visible. In-between you have 256 degrees of transparency (layer
masks only work with gray-scale).
This of course is very
handy. I told you I had some gray parts in my texture, and I still want
to keep the original yellowish look. So, I painted the entire layer
mask with gray (rbg 128-128-128), and then used my Dodge and Burn tool
to paint the parts I wanted to either way give more colour, or give
less colour. Remember to stay away from the canvas edges as much as
Here are we at the moment:
I notice that there is still a horizontal line, so I’ll change that on
my merged layer. Next I’m going to add another Adjustment Layer. The
Brightness/Contrast Adjustment Layer. Give your texture a little more
contrast, because regular photo’s usually lack contrast. That’s it for
the diffuse map.
Let’s start with the specular map. First of,
what can I do with specular maps? Spercular maps are used to change the
amount of reflection of a material. You can’t make anything act like a
mirror with specular maps, but you can alter the brightness and the
colour you will see when you place a light above it.
is Specular Level. This is the amount of reflection that you will have.
White being very reflective (like brushed metal), black being
completely dull. There is also Specular Color. This is the colour that
you will see when you look at the material when it’s reflecting. Very
theoretical explanation for something that isn’t that hard at all. Let
me give you an example:
What you see are the two maps, first one specular level, second one
specular colour. The result is very clear. The white part of the
specular level reflects coloured light, and this colour is the same as
in the specular coulor map (so, there were no green lights used in this
Now that we know this, time to go back to our
texture. Let’s make a new layer group, and place all your layers in
that new group. You can call it Diffuse. Now make another new group,
and call it Specular. Make sure you have this your specular group
selected, and add the Hue/Saturation Adjustment Layer. Set Saturation
to -100 (should make your image gray-scale). Now add the
Brightness/Contrast Adjustment Layer, give contrast a higher value (65
for example), and Brightness a lower value (-30 fe). Save your image in
a new file.
This is the "old" way to make specular maps. Nowadays coloured specular are moving up.
Color in specular gives a more natural, realistic effect (as real as we
can get in games until materials get more advanced gloss that is).
Everything reflects light at a different amount and color. Otherwise
everything would appear wrapped in plastic.
The 180 hue shift
technique is the quickest way to the most extreme effect, and is not
the end all, beat all for everything. Though it works fantastic for
Human flesh would be a very dark purple, gold might
look best with a brighter green. It's all about experimenting and
testing. Sometimes it's higher contrast, lower saturation, small hue
shift or negative hue.
This is all info on color alone. A lot
of time saving is done by quickly adjusting the diffuse, but in
actuality, the best specular is much more customize, even a completely
new painted texture.
( Thank you Chris Holden for your input on coloured specular maps.).
Now back to 3dsMax. Go to your material editor, and add the specular
level to your list of maps. (browse to the file you just saved).
Now there’s only one thing left, and that’s our bump map. For this we’re going to use NVIDIA’s normal map tool.
Can be found here:
We’ll need a height map if we want to use NVIDIA’s dds-plugin. What are
height maps? They are just images (gray scale). Everything black will
be low, everything white will be high (you can take this literal when
you convert height maps to normal maps). But how do we make our height
map? Disable our Specular layer group. Make a new layer group, and call
it bump. Select all, and copy merged (Shift-Ctrl-C). past in a new
layer. Now go to Filter>Noise>Despekle. Do this 2 or 3 times.
This will remove the noise in your image. Now to go
Filter>Sharpen>Sharpen to make the edges sharper.
Add a new
Hue/Saturation adjustment layer, and set Saturation to -100. Now add a
new Brightness/Contrast adjustment layer, and play with the values. Do
you still remember that I wanted a groove in the concrete? Well now’s
the time to think about that again. I’ll burn the edges of the images,
so that they are “lower” on my bumpmap. Time to take a closer look at
the nVidia plugin.
First set your compression format. There are multiple possibilities,
but i found that CxV8U8 Normal works best for 3dsMax (especcialy if you
want to use the normal map in game engines like for example Unreal 2.5.
After that press "Normal Map Settings..." which will open a new set of
First, make sure you tick of "Convert to tangent space
normal map". This tells the plugin to convert your image to a normal
map. Next you have to set your scale. There's not realy a fixed value
that you can use. I usualy try some value's, see how they work out.
(alot depends on the image you're using. Images with high contrast will
have a low scale, and vise versa.)
That's about it. You can press "2d preview" to see a 2d preview of your normal map. Press "save" to save your file.
Only few things left until we’re finished. Go back go 3dsMax, open your
material editor. Look under the maps tab for Bump (set the amount on
100, it’s on 30 standard). Make sure you first select Normal Bump, and
then select your *.dds file. If you don’t do it like this it will most
likely show up wrong.
Here’s a render of my result:
That’s it for this tutorial. I hope you guys learned something, and had a good time.
couple of days have past now, and i began to realize that the texture
isn't as eye-catching as i first thought. So, here are some other
textures i made with this exact same method, hoping to convince you of