Lighting 2D art with normal maps

This article follows on from my previous article: Using normal and depth maps to create lighting effects in 2d art.

I’ve been making normal maps out of my 2D art using specialized software to create adjustable lighting effects for my illustrations. You could hand paint the lighting without doing this of course, but I thought it was a cool technique to try and I’m learning about texture maps in the process.

It was a bit more time consuming to create the normal map as well as the illustration, but hand painting all the different lighting effects from scratch would take a lot longer without the normal map.

A normal map uses three colors, red, green and blue to signify the direction of surface normal’s. Red, green and blue correspond to the X, Y and Z orientation of the surface normal in a texture. Normal maps are usually used in computer games and feature films to create the appearance of high detailed meshes. They are usually “baked” from high detailed mesh sculpts into a normal map texture, which can then be applied to a low polygon model creating the illusion of high resolution detail.

Over the last four days or so I have used a program called Sprite Lamp to create a normal map for this illustration:

This involved creating 5 grey-scale lighting direction profiles for the character, top; bottom; right; left and front (hand painted in Photoshop using the original illustration as a template).

This was an iterative and experimental process for me. Firstly I did not know whether Sprite Lamp would cope with the high resolution art I used, given that it’s main purpose is for making normal maps for small game sprites to add dynamic lighting in game engines. Secondly I had to keep redoing the lighting for each lighting profile so that they all looked consistent and made the output normal map look good.

It was a useful exercise in trying different lighting directions on my character, and one I will keep practicing in the future.

The size of the final artwork I tested with Sprite Lamp was big at 1939 pixels by 3634 pixels. Sprite Lamp worked very well for this considering this program is designed for small sprites, although it did close on some earlier attempts until I had figured out the correct file formats to use.

The diffuse map or color map had to be a PNG file with a transparent background and all the lighting profiles were fine as flat JPEGs.

I found it faster and more stable for testing to resize the artwork to a smaller size in the early stages of this process. When I was happy with the small preview I used the large diffuse map and the large lighting profiles to generate the normal map, the bump map and the ambient occlusion map. I exported the normal map for use in Photoshop.

Sprite Lamp has a nice preview mode that lets you try different lighting conditions. I made a short video showing this:

I also made a specular map by turning the diffuse map black and white, adjusting the values and painting the areas I wanted to shine more a lighter color. This made a big difference to how the light affected the character on areas such as hair, the eye and buckles.

I managed to get a similar look with the exported normal map in Photoshop, but things like specularity do not show up like in a 3D shader engine. You could hand paint shine and glow effects on top though with different layer modes. I painted in a highlight for the eye.

Sprite Lamp gave me a lot more control for making a normal map for my 2D art than Sprite Dlight (which I discussed in my previous article), but it was more time consuming. For a fast solution Sprite D Light is really handy as well if you want to try this technique for quickly lighting or recoloring 2d art. They both have their uses.

Using Sprite DLight you can export 4 of the directional auto generated light maps and then refine them in your graphics editing program. After changes have been done put these into Sprite Lamp to generate the new normal map and make the process go a little faster.

There are lots more methods for making normal maps if you have a look on the internet, but I’m done on this topic for now (until I find something else cool about it anyway 😅).

Edit February 2020: I’m not done yet… keep tuned for more normal map articles. Also check out Laigter if you want a free Open Source solution for making normal maps from 2D sprites.