Creating Specular/Normal Maps

[Tiros]

I noticed some people are using crazybump to generate their specular-maps.. which really let's down your piece. So I decided to write a short tutorial on how to create them in PS, and compare it to the specular map generated from Crazybump.

Don't get me wrong, Crazybump is a great app, but not for handling your specular maps.

This tutorial has been directly copied from the "STC #15 - Treasure Chest" thread.



I threw together a tutorial here, the result ain't perfect, was kinda rushed, but you should get the idea pretty clearly while comparing with the result given from the crazybump specular

So, let's start off by showing the Diffuse

Looks pretty bland, eh? Well, that's because you can't really see the tons of subtle details. You don't want to make the details too obvious in your diffuse, some are actually better off to be put in the specular map.


So, what kind of specular do we get if we run this through crazybump?

"click"

Yes.. horrible.. it looks like shite.. If you have a weak stomach you prolly don't want to see the Result given by these two together in a max scene.


Well then, don't run off yet.. I've only showed you how it's not supposed to look.. so it won't get any worse.


With a simple bit of fiddling with the adjustment-layers in photoshop with my diffuse as the base, this is what we get.

Neat, huh? And this is how it looks in the max scene. Looks ok, could be improved but, I won't be spending too much time on creating a great result right now as I'm in quite a hurry.

So, now you might be wondering: Why the heck is his specular-map coloured & how the heck do I create this thing then?

Then why is it coloured?

That's because the colour in the specular map will effect the highlights in your material. In other words, make a specular that's completely red and you'll get a red specular.

But why ain't my specular coloured blue?

That's because it's the negative hue of the diffuse. Not sure how to put this.. but.. let's say you got a red material, and your specular colour is blue. And since blue is the opposite colour of red (well, almost) you will get a more white and matte specular.

Giving your specular an inverted hue isn't a must or some kind of rule at all.. give it any colour you want as long as it looks good. For example, copper should have a pink'ish specular colour while having a brown'ish diffuse.

And how the heck do I create this kind of specular?

It's really simple, I'll show you how I made mine.

(Note that I'm using PS CS3 on Windows Vista, so it might look a bit different)

I usually start off by creating the "Hue / Saturation" Adjustment layer which can be found here.

I invert the hue and desurate it a bit, since the coulours going to be stronger once we increase the contracts with the "Brightness / Contrast" Adjustment layer. These are my settings.

Once you're happy with your hue, then add your "Brightness / Contrast" Adjustment layer which can be found in the same place as the "Hue / Saturation" Adjustment layer.

Then I increase the brightness, or the specular would be awfully feint. And I also increase the contrast to bring out all the details hidden in the texture.

These were my settings.


Now Please Note: Your specular is most likely not going to come out perfect the first time, you'll have to do a lot of tweaking and experimenting before you get a great result. And for different engines and shaders these maps will come out differently.

There's also a lot of different way of creating your specular maps, though this is the one I favour.

To preview this in 3ds max, simply put your diffuse in the diffuse slot, and the specular in the specular level and specular colour slot. Then turn on DirectX Display.

If you're using maya however, I'm afraid I don't know how to do it.




Creating Normal maps
While I were at it I thought I might aswell make one for creating normal maps, and how to show them off aswell. Cuase not only are people still using crazybump to generate their specular, they're also using it to generate horrible normal maps which they then eleminate in their beauty render by doing a clayrender... what's the point of that?

So, if you followed my previous tutorial here you'll see how our nice little metal plate suddenly got a nice specular and started looking a bit more realistic. So let's go ahead and add a little depth to it aswell!

Then what do people do?

Open Crazybump -> Open their diffuse in crazybump -> save it as it is without tweaking the settings.

Then they render it out with a clayrender, being happy with their normal map not showing at all.

But... how would this metal plate look if we didn't use a clayrender, and actually made the normals show?

It'd look like... well.. a shiny rock wall perhaps?

Well, if you now wanted a shiny, bland, rock wall, you've done a great job. But I think it's about time we learn how to do some real normal maps and how to show them off properly.

How do I create a proper normal map?

First off, we got to make sure the things which are to have depth do, and that the things which shouldn't wont.

Start off by opening up your .psd containing the diffuse and specular map. Then start hiding all those details which should not have depth, such as stains, text etc.

Then you invert all the scratches and other bright surfaces which whould have an indent rather than the opposite.

Then you could play a little with the contrast and colours to bring out the fine details in your texture. And once you're done, it's time to save this map.. what do we call it? Well, call it whatever you want really, though myself I usually save them as a "heightmap" to keep some order in my directory.


Now you can finally open up Crazybump. And if you've read this far in the tutorial, then don't stop now, or you'll miss the whole point. And if you havn't red anything above, then do so!

Once you're in Crazybump, click "Open Photograph from file". Open heightmap from file prolly works aswell, though I prefer using the photograph tool.

Select your heightmap and open it up. And then select the better of the shapes.

When you selected one of the shapes and get to the part where you edit your settings, it should look quite similar to this.

Does it look like the surface of a metal plate? ...no, it does not.

So, what we want to do is to bring out the subtle and fine details in this heightmap. The most important thing while doing so is obviously removing the shape recognition and all the large/medium details. Leave only the "Fine details" at 99, and the others at 0. Then you adjust the intensity slider while keeping the words "Metal plate" in mind.

Then, eventually, it'd look something like this. (Don't mind the lighting, I just moved and changed the colour of the lights in order for you to see the depth better.)

And now you could copy your normal map and put it in your .psd containing the textures, or just save it as a normal map right away, whichever you fancy.

How do I show off my normal map without eliminating the depth?

That's quite simple really.. just render it out without changing the settings and you got it. Aslong as you don't use a skylight or something similar in your scene, the bump will be visible. That's why doing a clayrender is such a bad thing to do.

But if you want a nicer result, simply use DX Display as explained in the end of the previous tutorial. This is how my normal map looked in the viewport with DX display.

"click"

Alright, that wasn't perfect.. looks a bit like concrete.. but hey, aslong as it doesn't look like a shiny rock wall and the normals actually work I think I've made a good point!

Cheers

[Minimus]

Thanks i like this post

great that your taking your time to explain this for us who dont have a clue....i feel a bit smarter ^^

[ice_killer]

this is very cool gona check it for sure thanks m8 for this wonderfull tutorial

[SkyGround]

Thank you very much Tiros ! )

[Tiros]

Glad to see that it was of help to people, was actually pretty funny writing it aswell

I thought people would already know about these things though.. well, perhaps not about the specular-colour.. I'll have to give Doylle some cred for that, seeing as he explained a bit to me about how he create his specular maps.

Cheers!

[Gen-an]

some nice info there. but I have to disagree that you shouldnt use CB to create spec maps. of course if you dont take the time to tweak the settings your end result will look crappy.



took 30 secs in CB and the end result is quite similar to yours. if I play with the contrast/brightness you wont be able to tell the difference. bottom line is: CB is not a one button press miracle it does need some (minor) tweakings, bot so does PS

[Tiros]

I'll have to disagree with you aswell Gen-an

Even though they may be similar I'd like to belive one gets more detail out of doing it properly in PS, and when doing it in PS you will also have it all gathered in one document... Aditionally you could just tweak the adjustment layers at any time, without having to go back into CB

Though aye, I guess they could still be done in CB. My tutorial was mainly aimed for those who just go right into CB and copy the directly generated specc-map from it though

Cheers!

[Gen-an]

Originally Posted by Tiros

...
Even though they may be similar I'd like to belive one gets more detail out of doing it properly in PS, and when doing it in PS you will also have it all gathered in one document...
...

Sure, most of the time, maps from CB can be further tweaked in PS for best result.
Personally, I render several different maps in CB than use them as layers in PS and play with the settings. Never really use these textures as final maps tbh.

Also, imagine if you got 30 stone textures and you want to create spec maps for them, CB would be faster in this case.

[geodav]

a very useful tutorial Tiros, CB does have it's uses but as you say it doesn't replace doing a proper job, you can really see the difference with the normal maps. but yes i do use it just to get quick test maps for in game

[[hP]]

This is pure gold!