Hi, and thank you for visiting
www.naphtalite.com.
I decided to dedicate a part of my corporate pages to bring you atleast a fraction of what goes into development of such a project.
What I will present here, is only a one way to create pleasant and entertaining enviroments. We won't go into particular art techniques and methods, but more into way of thinking when you are working on a piece of art like this.
So, before further adeu lets get TO WORK! Since you read all the way here we will break off from the corporate talk and get into a more closer mood. Really. Just let me slip into something more comfortable.
Ok, got my slippers on.
Just a quick note before we begin. Unfortunately, I forgot to save the first step of the process, so I put in a DRAFT of another location I am currently working on. Consider it as a sneak preview :).
Ok, so what you see here is a bunch of loose lines, bold shapes and "layers" of depth in the scene.
Some people tend to work on a number of small, loose drawings, usually done on paper, and then decide which one works best.
I like to start with perspective lines first. You can see them protruding in the upper part of the picture, through the trees and above the bushes. This is the easiest way for ME to get a cleaner impression of what the final piece will look like.
Since I am developing this game on my own I already know what will happen on this particular scene, soI can get the result faster without doing a bunch of really detailed sketches.
Ok, so you have an idea what your location will look like, now it is time to start refining the shapes you so violently poured onto the canvas.
(now I'll switch to the ACTUAL scene we will work on)
First of all, IMMEDIATELLY get rid of WHITE colors. White is the brightest color in the world, and VERY rarely seen (only under strong studio light). Try to go with a bit darker gray, it will be easier to lighten the areas you'll need.
So, this is the scene with three possible exits. You had to solve the problem of perspective and "camera" angle so the scene is reasonably well laid out for the player. We have to keep those things in mind, as players tend to oversee some relevant exits, paths and objects. Remember the loose plank on the bridge in Monkey Island 1?
After deciding my sketch was fine and I covered everything needed for the players progress and interactions (notice the signs, obvious gates and a hotel in the distance). These parts are RELEVANT!
Go BOLD here, give your hand freedom to work out the massive shapes, DON'T be afraid to make mistakes. If you make them, leave them. Throughout the years I worked as an illustrator, and watching a number of succesful modern computer artists, you can SELL absolutely ANYTHING to the viewer. BUT, you have to sell it well. If the house you drew leans on one side, or the roof doesn't stand straight, MAKE SURE you explain why is it like that. You need to give the viewer an ANSWER to his question. And be DAMN SURE you give the correct one.
Sketching in the sky and the clouds, you start to give yourself some boundaries. Up until this point most of the options were possible, but once you DEFINE a particular part of the scene, other things must conform. So, my sky has a light shade, the clouds are even lighter, so HOW are we going to define the shapes to be more readable to the viewer?
Easy, by employing the power of shadow.
Since I needed that palm and bushes surrounding the hotel REALLY sharp and defined, they need to go heavily into a darker tones, hence, into the shadow. Now, since they are in shadow it automatically means that the sun is INFRONT of us.
But, we'll get to that.
First we have to REALLY define the shapes and details on the scene. SO, onto the next step.
Now, think of your scene as a number of planes laid infront of you. If you are working with a software that has layers feature built in, you know what I am talking about.
Start with the FARTHEST plane, and that would be the sky. Using the smallest brush, define the clouds or ANY other shape you see in the distance. You don't need to take care of the line weight, that can easily be corrected in later stages.
I started with the sky, then sketched in the motel, the bushes.
Here you have the chance to give your building blocks the shapes, form and material. Give the leaves some cuts and deformations, give the house some windows, doors, planks, try to define the part but with the least strokes.
DO NOT OVERKILL the foundations you did in the previous step. Better yet, do not delete it, keep it in a separate layer throughout the whole process. It is a nice reminder of what you INITIALLY wanted to do, and can sometimes really come in handy.
This is where I finished the line art and a final layer/plane. Most of the details are in, including some small chunks of grass, stones and pebbles, flowers that grow out of the bushes etc. Now your picture will become more defined and even more restrictive. Here you will have to decide, which parts are more important to the viewer/player, and which you can omit. Also, you can see which parts of the front layer cover the background ones and so on. Try to clean up the image, define the shapes you left untouched and you should come up with a mess seen above.
Hope you have the ability to name the layers you worked on. Mine was something like this (starting from the bottom):
- Sky Line Art
- Motel Line Art
- Bushes and Trees Line Art
- Gates/Palm Line Art
Well, that's about it for the line art. Now we come to color part.
First I opened up an new layer below the "SKY LINE ART", and called it a very original name like "SKY COLORS". I like to start with the sky, as most of its colors later on define the things like Ambient Light, Diffuse Light, Luminosity etc. Scared? Don't be. Those are just fancy terms for things you already know about.
The sky is always lighter in color when closer to horizon, so, do some kind of radial gradient and fill in the sky color. I like to use clouds to even further define the perspective lines we did on our initial DRAFT sketch. Also, they can nicely define the horizon, the curvature of the sky and other things that I don't know about.
Also, I decided on the middle value for the bushes and the color of the road. This is an another layer which I also, rather originaly named "BUSHES COLORS".
Ok, onto the "MOTEL COLORS" originality.
Now, initially my idea was to make the hotel in gray/dab colors, as my story instructs me that it hadn't been used in a while. But, painting it gray in my color book didn't satisfy the little demon we call - THE FOCAL POINT - bwuaahahahahahaa.
Basically, the focal point is a point (obviously) that is the most important thing on a piece of art. Be it Botticelli's Venus or Da Vinci's Last Supper, focal points are usually in a high contrast with the rest of the picture. Throughout the history, artists employed simple techniques to achieve this effect. Sometimes they would light the object with a special light source (guys painting for the Church could always get away with divine light), or DARKEN the area around the focal point, or better yet, put everything else in a shadow.
Now, how do you define the focal point, or how to avoid pussyfooting in the later stages?
Rather simple. When I've filled the motel with this shade of "gray" I squinted my eyes as HARD as I could. This eliminates details and leaves you with a blobs of shades. I could see that there is no clear definition between the bushes, sky and the motel. Try it on this particular picture.
I don't worry much about the bushes and sky as they are not so important, but the motel is a pretty distinctive part of the location and I want to make it more visible.
Selecting the Motel layer (this is where the layers come in handy) and still squinting I change the lightness of the gray tone. Going darker doesn't work very much, as I want the contrasts between the planks, windows and doors, so I went with a rather lighter color, almost going into white.
Ok, this scares off the focal demon and we can proceed with the final layer, which is our gates and the palm on the left. Notice that I used a darker green on the palm, again to sharply define the shapes between the palm and the bushes.
It isn't much yet, and it does look a little bland, but that is only because we haven't used the power of
SHADOWS!
Lets blast those suckers in, shall we?
Remember those terms we mentioned?
Ambient color, Diffuse, Luminosity?
Here is where we will use the ambient color of the sky to paint in the shadows. Let me clarify.
In short, there are lots of colors that surround us. The light rays coming from the sun bounce around and light up the objects. This is called Radiosity, and those who are into 3D rendering probably know what it is. Since there is alot of BLUE (sky) colors, the ambient component of light tends to be very blueish (note that this is only when it isn't cloudy).
To prove my point, take the simple white piece of paper and go outside (really, the sun won't hurt your little squinty eyes). Find a spot in the shadows, for instance infront of the building or a tree. Position the paper so that a half of it lies directly in the sun and the other half is in the shadows. Now compare the colors of the shadow. The lit part will be completely WHITE, while the part in the shadow should appear blue. Am I right?
Now, lets transfer this into computer world. Most of the paint packages have different painting modes like ADD, OVERLAY, MULTIPLY, SCREEN. Using the blue color set to MULTIPLY will make our white canvas blue. That's the effect we want to get on the other colors. Open up a new layer ABOVE all others and name it SHADOWS. Set it to MULTIPLY.
Now, pick the middle value of the sky (not too dark and not too light), and start violating the canvas. You should end up with something shown above.
I wasn't very happy with that blue color so I adjusted the setting of the shadows layer and went a bit into a purple colors. This is ok when we are working on a cartoony visuals, but when dealing with realism, you need to be very careful.
I also added a FOREGROUND layer, just with some distinctive shapes of leaves, branches, grass and so on.
This whole picture still looked too, how should I say, cloudy for a sunny day, so I boosted the contrasts and gave the parts in light a more yellowish tones. Again good for cartoons, would be more difficult with realistic paintings.
But now that we have a complete picture set in tones, line art and shadows, we can begin the most enjoyable part - DETALING!
Before we dive into detailing of every little leaf, let me also point out to one component that is very important for the depth of the picture. It is called HAZE.
Haze is basically the effect that occurs because of the thickness of air. You see, the further the object is, the more molecules of air stand between it and our eyes. These molecules pick up the AMBIENT component of light, and in this case become more blue. Hence the far objects become more blueish. That is exactly what we will do with our bushes in the background. Again, since this is a cartoony picture, you can never go wrong if you exaggerate, so we will lightly paint the bushes with blue. You should get a turqouise kind of color, better known as Parisien Blue.
If you have more distant objects have another go with a blue over it. It should do the trick.
Now, as you can see above, I already started detailing and defining shapes with the shadows. I again used that blue color, but this time with a dash of green. Why? Because of radiosity, the rays of light bounce off the leaves picking up green component. I know you probably ask yourself, why didn't we used the exact same color for the shadows. Simple.
The rays spread out linear, and looking at it globally, the sky spreads out FAR MORE blue than a single bush could. But, since we are painting the bushes around bushes, the distance between those leaves is very small, hence the rays of green still haven't dispersed. Got it? You will :).
Finishing off the bushes details and shadows. I don't go into TOO much detail, as when I turn on my SHADOWS layer, most of the details simply dissolve. See?
Looks kinda cool, doesn't it?
Now, to finish off the motel. I was searching for the right color to match the complete scene, and found this shade of blue that really stood out. Filled in the parts that REALLY define the shape of the building and just slightly detailed the wooden panels, windows, broken glass and other small details. No need to go heavy into it, as I need to take care of my development time, still have loads of locations like these to finish.
Here it is:
I think it works well, atleast for this stage of development. I only need to detail that palm tree, the signs and the gates and I am finished. Fixed up the foreground parts and I am done.
And this is how it looks in the game.
That's it. Hope you enjoyed this little walkthrough and that it atleast helped you a bit. Drop me a note on the forums if you wish to see more, as I really enjoy writing these articles.
Till next time, take care,
KB.