This tutorial covers the creation of a normal map from a bumpMap or height map. The normal mapping technique is used in real time rendering engines, like Irrlicht, for example, to add detail to the surfaces without adding more geometry. To do it, we start from the base, what is a Normal Map? Normal maps are maps where tangential lighting data is stored, so, each channel maps one axis of the tangential space. Red maps the Tangent, Green maps the Binormal, and Blue channel maps the tangential value of the normal.
To do so, we use this image, as example, and we operate in the color channels. This tutorial is done with Photoshop, but can be done in any other program which can operate in the color channels, and can perform the "emboss" effect, and the "edge finding. We start from this point.

We aply the emboss effect to the red channel, and we achieve that result. The effect must be aplied, so the light seems that is coming from the right horizontally, as you can see here.

We do the same with the green channel, so the light comes from above. in these examples, the effect used is 3 pixels long and with a depth of 100%.

And for the blue channel, we apply the "find edges" effect. But this effect is too exagerated, and should be whitened.

To do so, we correct the contrast, and the brightness. this way, our normal map will look much better.

And this is the final result!

This is the map in use. The shader is DirectX9 standard phong from 3DSMAX)

|