Welcome once again!
In a previous post, I’ve talked about how important lighting is so as to recreate our 3D world. In fact, it’s importance goes beyond the 3D scene, and there comes the 2D part of the game, such as textures, menus, GUI elements or some other related things. As in the post before, I want to spare some background with you, as it may help focusing about what we are talking about.
I’m sure that you’ve seen some of that very nice and well illustrated Star Wars, Indiana Jones or even Harry Potter posters over there. It’s part of Drew Struzan’s work, which you’ll recognize as soon as you see them. I have to admit that I love his mastery and skills, bringing life to the stencil. If you are asking for someone closer to gaming industry, I may suggest the work of Shinkiro, illustrator of SNK and Capcom. His work on lighting is worth seeing. Both of them cleverly use light to give more realistic look to the images, as you may see in the posters of Indiana Jones or the King Of Fighters characters, for example.
As 3D/2D artist working in A Mad Journey Minigolf, I realized that I spent most of my time making 2D art and texturing. Of course, skinning a character can be tedious, but painting textures was my time consuming activity. You have to plan what textures do you need and make the most out of them reusing as much as you can – thus saving some memory space, but that’s another question. As I’m producing images in virtual stencils, I have powerful tools that improve my productivity. In my daily work I use Photoshop CS (no matter the version, everyone has the basis explained here), and I’ll show you in this example how to get those lights quickly enough, for adding details to our character’s face. It’s a simple illustrative example about how you can start by adding details that look realistic, working with lights and shadows only.
The key is working properly with layers. If you are tidy, you can achieve great results in no time. Let’s paint our base layer. It’ll contain only color information, such the skin tone, eye and hair color. You may be tempted to add some other details such as zones that look slightly different (the nose stroke by a cold breeze looks a bit red!), but it’s best to have those details for another layer above the base. So, you can preserve the base, change the details efficiently, and have different versions of the face. You may notice that I’ve painted no nose, but be patience: it is there.
First layer for the face
Next, I’ll focus only on lighting, on a layer above (Ctrl + Shift + n). This layer will be overlayed over the ones below, so select that fusion method in the layer dialog (which you can open pressing F7). It’s marked in green in the image. I use the spanish version of Photoshop CS 5, so it’s called Superponer, but you may find it as Overlay as well. This part is very important, as it allows us to focus on shadows and lights, instead of color: I’ve only used grayscale tones in this layer.
Photoshop final layer composition
The light comes from the left of the image, so part of the eye is covered by shadows. The nose magically appears in front of our eyes (where else could it be?) just by drawing the shape of it with shadows, and remarking the outline with white tones. And, of course, here is also the mouth, drawn with a thin line that shows the smooth shadow of our lips. The shadows may be a bit brighter, so we can add another layer, overlay it again, and retouch some shadows.
First lights applied
Shadows added
The process needs a bit of practice, but it’s rewarding when you see the final result. And you do not have to care about colour, which is the main point of this post. This means that you can change the skin tone, and do not have to modify the lights at all. What’s more: once you got the shadows, experiment changing the fusion mode: Hard Light, Soft Light … I left some examples to invite you to try this techniques.
Hard lights
Hard and overlay
Soft lights
As you can easily notice, paint strokes aren’t accurate while painting shadows and lights, they are easily noticeable in the images. But that’s the advantage: even imprecise strokes give great results. You don’t need to have nerves of steel nor great pulse to achieve good looking images. Below is one texture used in A Mad Journey Minigolf, done with the same technique described here, and then applied to a level of the game:
Basic color for the structure
Lights added to the structure
In-game results!
As you can see, this concepts can be applied to a lot of aspects of 2D art and texture creation. Once again, I hope it was worth reading for you. And, as always, feel free to leave a comment!
CrazyBits Studios.