Drawing oldschool backgrounds for Adventure Games

Tutorial Time (again)! I just finished a background for my new game and recorded the steps. So if you’re interested to draw things like this (this is a motel room):

Keep on reading :)

First of all: This is not a tutorial about how to use paint programs, some basic knowledge in whatever application you use is needed.

There’re two common methods to start on low res background – you begin with a hand drawn sketch and scan it. Or you directly start from the scratch – without a template.

For this screen, I made a rough sketch on paper but drew it completely on the computer (no tablet). For the first 2 steps, I’ve used Pro Motion, but shading and anti aliasing has been done in Photoshop 6 (which runs fast enough on this old machine). If you need  8-bit color depth, then keep sticking to ProMotion (or whatever you like), otherwise Photoshop (or Gimp) is a real time saver.

1. Step – Outline the scene

I’ve tried to chose an interesting perspective with lot’s of sloping lines. The blue line’s the horizont, the red dots are the two vanishing points. Because it’s a quite boring to just look in a corner, I’ve added a ledge to the wall (maybe there’s a chimney on the other side or whatever ;) ).

Now I’ve moved the scenery a little and added a ceiling – since this is going to be motel room and not a hallway. There’s also a window with curtains.

Now there’s also a table and a bed. I’ve used flashy colors to see if the composing is good and making painting over it easier.

The next station is a tv and a little detail on the carpet (at this point it also could have been a wooden floor). All the objects I’ve outlined so far are static objects. In the later game you can’t move them aroung, pick them up or anything alse. This is important for the shading because if you would have been able to move the table, you also had to move its shadow.

Step 2 – Basic coloring

Let’s bring some colors to the scene. First I’ve added a lamp to have a primary lightsource. ProMotion is really good in adding old school gradients and so I’ve chosen a goldish yellow and colored the wall. Unfortunately I did it wrong :)

Note the light on the ledge and the left wall. It’s impossible for the lamp to create that shadow – fortunately this has been fixed on the next image. Finding a color (and a texture) for the carpet gave me a hard time, so I ended up searching google for motel rooms. Most of them had red ones, so I also chose it until I realized that it’s damn ugly – so where the motel rooms btw :)

So for the next version I’ve used red for the table and a more convenient grayish blue for the carpet. Those color ideas were from an Ikea catalog :)

I’ve also fixed the gradients on the wall to look more natural and colored the bed and the TV. The bedsheet is actually the one I’ve currently use. As a hint – be creative choosing colors and textures. Here’s how you shouldn’t do it: White wallpaper, brown table, white bed, gray sheets, no curtains at the window and an inconspicuous color for the carpet.

Even if realitiy isn’t that colorful – most of us play games to forget about reality ;)

Those white parts in the image are actually transparent, so the carpet doesn’t get white on the bottom of the screen.

Step 3 – Objects

I’ve added a new layer in ProMotion and added some objects to this quite naked room. Here are the objects without their background.

In case you don’t know what to add in a room, just think. A TV need something so you can watch it – voila: armchair in front of the TV and so on.

So here we have a door, some pictures, a pile of dirt, an armchair and a phone with a clipboard. For those objects I’ve created outlines again, just like in step 1 and some basic coloring.

Step 4 – Details, shading and the finishing touch

Here’s how it looks, if the objects are on the background. I also adjusted the color a little. Since I’m now in Photoshop, this is rather easy.

I’ve now added a slight vignette to draw the attention more to the center of the room. Note that the lamp is now lighter and the corners get darker.

Also the wallpaper looked quite boring, so I’ve decided to add some stripes – it’s never good to have large areas in the same color (search for a “tv lines” tutorial, if you don’t know how to do it).

There’s also glas in the window frame now.

The next part might be the hardest part for some of you – adding shadows. Just look at the light source and try to imagine where the light might hit the ground or where it might be blocked. Adding shadows in photoshop is quite easy (and there are a lot tutorials about it). I’ve used an additional layer, positioned it under the object layer and drew 100% black areas. Then I’ve applied a slight motion blur and set the layer’s opacity to about 30%. For the shadow on the carpet (it gets darker, the more it’s away from the lamp) I’ve used a seperate layer and made it completely black. Then I’ve added a layer mask and added a gradient from black to white on it – done ;)

But as I’ve written above, there are far more better tutorials, covering shadows.

The last thing I did is to add some noise on rough surfaces – like the carpet and the arm chair.

And that’s it – it might not be perfect and there’s always room for improvements. But try not to dissipate your energies just to one screen. I’m sure, there will be a lot more you have to draw and in my oppinion it’s better to have some mediocre screens but a finished game instead of 2 perfects screens and a canceled project ;)

So long, I hope you liked it!