[TUTORIAL] Making a texture with a normal map

[VelvetFistIronGlove]

Here's how I built a cobblestone texture for my castle map (cp_siege). What I cover in here is the process of using free source photos to produce a TF2ish texture with a bump map. I don't go into the details of using photoshop (a screencast would be better for that), or of compiling vtfs, since that's already covered in other tutorials.

First I decided on the look I wanted. I was after rectangular, fairly even granite cobbles. Here was a nice reference image on flickr:
http://farm1.static.flickr.com/22/30254886_75d89008be_m.jpg (http://flickr.com/photos/steveroe/30254886/)

Starting from a photo is a good way to get a realistic-looking image: I was going to take some source photos myself, but my camera packed it in, so I hopped on over to cgtextures.com (http://www.cgtextures.com/) to find some suitable images. In particular, I was looking for a nice high-contrast picture. This one fit the bill quite nicely:
http://www.cgtextures.com/thumbnails/textures/brick/floors/Regular/FloorsRegular0017_thumb.jpg (http://www.cgtextures.com/texview.php?id=14781&s=S)

I cropped this down, edited it to be seamless, resized it to 1024x1024, and adjusted the levels and colours a bit:
http://farm3.static.flickr.com/2070/2387977709_e26538de6d_o.jpg (http://www.flickr.com/photos/velvetfistironglove/2387977709/)

I wanted the cobbles to look like granite, not sandstone, so it was off to cgtextures to find another source image:
http://www.cgtextures.com/thumbnails/textures/stone/rock/smooth/RockSmooth0030_thumb.jpg (http://www.cgtextures.com/texview.php?id=5378&s=S)

I cropped and resized it, and tweaked the colours to get what I wanted:
http://farm3.static.flickr.com/2060/2387977741_40a4f373ba_o.jpg (http://www.flickr.com/photos/velvetfistironglove/2387977741/)

I put this in a layer underneath the cobbles, and changed the cobbles layer to "Multiply" mode to get nice granite cobbles. Notice how a little of the texture of the original cobblestones has remained:
http://farm3.static.flickr.com/2319/2387977783_10103d32f4_o.jpg (http://www.flickr.com/photos/velvetfistironglove/2387977783/)

So the texture was shaping up well. I didn't like the black cracks, so I thought I'd find a source image to put dirt in the cracks. From cgtextures:
http://www.cgtextures.com/thumbnails/textures/Ground/sand/Sand0028_thumb.jpg (http://www.cgtextures.com/texview.php?id=742&s=S)

I cropped and resized this one down to fit:
http://farm4.static.flickr.com/3195/2387977843_b438f56a51_o.jpg (http://www.flickr.com/photos/velvetfistironglove/2387977843/)

I now needed to make the dirt only appear in the cracks between stones. So I copied the light cobblestones texture, increased its brightness and contrast, and blurred it slightly. This gave me a nice outline of the cobblestones:
http://farm3.static.flickr.com/2330/2388808200_bdfd685a7c_o.jpg (http://www.flickr.com/photos/velvetfistironglove/2388808200/)

Taking this, I inverted it and put it in a mask for the dirt, so the dirt was now only in the cracks:
http://farm4.static.flickr.com/3042/2387977927_1ce6e83292_o.jpg (http://www.flickr.com/photos/velvetfistironglove/2387977927/)

You can see that the stones don't seem to stand out from the dirt at all. I added another layer with a black "inner glow" on the stones so they'd be better defined:
http://farm4.static.flickr.com/3257/2387977983_c85f71821e_o.jpg (http://www.flickr.com/photos/velvetfistironglove/2387977983/)

This is now almost right. It just looks a little to grainy and 'realistic'. I used the 'Artistic -> Dry Brush' filter to give it more of a painted look. I then tweaked the lightness a little as well. This is the final diffuse map:
http://farm4.static.flickr.com/3055/2388808146_854625a7d9_o.jpg (http://www.flickr.com/photos/velvetfistironglove/2388808146/)

Now for the normal map. To make this, I used Nvidia's photoshop plugin (http://developer.download.nvidia.com/tools/texturetools/Photoshop_Plugins_8.23.1101.1715.exe). This works from a variety of sources, but I find it works well if you make a heightmap indicating the different levels of the texture. Since the cracks are low and the bricks are high, I used the same outline image again for the heightmap:
http://farm3.static.flickr.com/2330/2388808200_bdfd685a7c_o.jpg (http://www.flickr.com/photos/velvetfistironglove/2388808200/)

Running it through the normal map filter, using the "Max (R, G, B)" conversion produced the normal map:
http://farm4.static.flickr.com/3281/2387978195_7b5b21b4b9_o.jpg (http://www.flickr.com/photos/velvetfistironglove/2387978195/)

Now we need to put it together. First I resize the texture down to 512x512 (it doesn't need to be bigger), and then I make a simple VMT file:

"LightmappedGeneric"
{
"" "cp_siege/vfig-cobbles"
"" "cp_siege/vfig-cobbles-normal"
"" "rock"
"%keywords" "tf"
}


After compiling the textures, here's how it looks in-game:
http://farm3.static.flickr.com/2301/2388712678_cb52228c8f.jpg (http://www.flickr.com/photos/velvetfistironglove/2388712678/)

EDIT:

So, I revised the texture a little, following the advice given in comments on this thread; mostly rounding off the normal map edges, and adding some brush strokes:
http://farm4.static.flickr.com/3033/2396347623_6c63026359.jpg (http://www.flickr.com/photos/velvetfistironglove/2396347623/)

And if anyone's interested, the PSD is available (http://andy.durdin.net/textures/vfig-cobbles.7z) (7zipped, 18MB).

If you've got any questions about the details of a particular step, please ask.

[R3dRuM]

You own velve, nice tutorial!

[Youme]

Epic :D
Nothing I didn't already know but thats besides the point.
I think you need to make the normal map for your stones rounded slightly (more like cobbles) and you definatly need some brush strokes in there :P

[VelvetFistIronGlove]

I think you need to make the normal map for your stones rounded slightly (more like cobbles)
Yeah, I tweaked that this morning.

and you definatly need some brush strokes in there :P
Brush strokes? Pah. Well ok, maybe.

[The Scientist]

It's an amazing looking texture, but I agree with youme that a few broad brush strokes could help it fit in with the tf2 style a little.

[MrAlBobo]

it would likely add to the tutorial if you added brush strokes steps as a optional add-on

and also...is there somewhere i can find a list of the other texture types?
like for this you have "rock" listed in the vmt code, if, say you wanted a texture that behaved like wood, would you just replace rock with wood?

[Hawk]

Very well-done tutorial.

[Youme]

Oh i see the edit now, much better :D

[phatal]

Great tutorial. I've been looking for a step by step on this for some time. Much appreciated.

[l3eeron]

Awesome....

and I can actually follow you, even though Photoshop isnt my strongest program.

+thanks

[MrAlBobo]

well...ive found the answer to my own question, but I figured posting a link to the various surface types you can choose from couldn't hurt
http://developer.valvesoftware.com/wiki/Material_properties

[VelvetFistIronGlove]

it would likely add to the tutorial if you added brush strokes steps as a optional add-on

Unfortunately, I don't remmeber the steps I took to add the brush strokes; although you can see the end result, and download the PSD to see how it's different.


and also...is there somewhere i can find a list of the other texture types?
like for this you have "rock" listed in the vmt code, if, say you wanted a texture that behaved like wood, would you just replace rock with wood?

Was about to post a link, but I see you've found it already :)

[Open Blade]

I wonder if Hammer has a way of allowing downloaded texture files that others have made to be selectable (using all the original properties the designer used).

[VelvetFistIronGlove]

Hammer will let you use any material whose .vmt and .vtf files are in a subdirectory of the "[STEAMACCOUNT]\team fortress 2\tf\materials" directory -- is this what you mean?

Also, if you're planning on reusing people's custom textures, make sure the texture author is ok with that first.

[MrAlBobo]

a question...do you happen to know how to make a texture reflective?
I assume it has something to do with the alpha channel...but I haven't had a chance to experiment

[tedrock]

it won't reflect players no matter what you do. most people use cube maps to achieve the effect

http://www.iwannamap.com/viewtut.php?tut=33 for a tutorial unfortunately the zip he links doesn't exist anymore.

another method people use is game cameras but you can't use them in TF2


take a look at http://developer.valvesoftware.com/wiki/Reflective_Materials

[MrAlBobo]

eh...i was mostly looking for how to make a texture shiny, with a bit of reflectiveness
like polished metal, or polished granite
reflecting players isn't something i was aiming for
the 1st link doesn't look like what i want, but Ill play with what it says in the 2nd tomorrow, the most useful thing though would be a name of a default shiny texture, so I can look at the vmt and see how its done

[Arhurt]

eh...i was mostly looking for how to make a texture shiny, with a bit of reflectiveness
like polished metal, or polished granite

Take a look at the Phong material settings at the valve wiki.

http://developer.valvesoftware.com/wiki/Phong

[dcar227]

I have a problem plz HELP T-T..... I get the checkers and can't figure out whats wrong.
I'm new at adding textures so where can i find a tutorial on how to add my textures to hammer 4 TF2?

[Arhurt]

If it's purple checkers layered on top of your textures in-game, then look for info on cubemaps, if you add but a single env_cubemap the checkers will disappear, but you want to take a look at it a little bit more. Just search the forums for Cubemaps. In fact, if you searched for checkers or Purple checkers you'd get an answer ;)

If your whole texture is with checkers, there is either a problem in your VMT or materials folder configuration. In the VMT you don't add the .vtf extension!

[Lolz1337]

any way to do this without photoshop? I usually use paint.net

[Youme]

Well once upon a time you could use crazy bump to do all normal/specular/etc maps for textures but that's had its format changed and now you need to actually pay for it to use it :(

[Lolz1337]

Well once upon a time you could use crazy bump to do all normal/specular/etc maps for textures but that's had its format changed and now you need to actually pay for it to use it :(

nah pirate bay ftw!

[Youme]

Shh.

Fancy sharing, privatly?

[Lord Ned]

Sonofabitch, my Crazybump "trial" (while it was in beta) just ran out.


Here's my failtempt at a texture like what you had.

(No filter used, my orginal texture was too complicated for Dry Brush to work well)
http://img211.imageshack.us/img211/2339/brickfailen4.png (http://imageshack.us)

[Morphis]

After compiling the textures, here's how it looks in-game:
http://farm3.static.flickr.com/2301/2388712678_cb52228c8f.jpg (http://www.flickr.com/photos/velvetfistironglove/2388712678/)

EDIT:

So, I revised the texture a little, following the advice given in comments on this thread; mostly rounding off the normal map edges, and adding some brush strokes:
http://farm4.static.flickr.com/3033/2396347623_6c63026359.jpg (http://www.flickr.com/photos/velvetfistironglove/2396347623/)

And if anyone's interested, the PSD is available (http://andy.durdin.net/textures/vfig-cobbles.7z) (7zipped, 18MB).

If you've got any questions about the details of a particular step, please ask.

How did you round off the Normal map?
How did you keep the edges detailed? :confused:

[Youme]

How did you round off the Normal map?
How did you keep the edges detailed?:confused:

My guess is that the normal map has been blurred using a standard blurr filter then layered on top of the original normal map at a low opacity, that way you keep most of the sharpness of the edjes but the whole thing is smoother and appears more rounded

Also, normal font size and colour please ;)

[Queops]

Nice work, good tutorial.