TUTORIAL: How I make backgrounds

Making a decent background is a real work. It takes both time and stamina, and if you start to feel bored you must stop or the result'll be shit. But if you're patient and don't hurry, then your backgrounds can be really beautiful. In this tutorial I'll show you how I made one of my backgrounds, from start to finish.

 

THE SKETCH

Always start by doing a quick sketch of how you want the endresult to be like. Without it you won't have a clear goal to work toward and it'll show, I promise!

Think about it in great detail, because the more detail there is in background the more realistic it'll feel. But don't make more details than you can handle at first (like tiled walls and floor).

In this background I'm doing a scabby dockside bar, so I thought long about what's in bars like that. It should be dark, have a pooltable, something on the walls, and old sailors as guests.

USING PAPER AND PENCIL

After doing the sketch to satisfaction your ready to draw the real base-image for your background. Use white-drawing paper and a pencil of your liking. Mimic your sketch, but do it in even more detail and with more care (this is after all the base of how your endproduct will be like).

I liked my sketch pretty much but I thought there was missing a lamp over the pooltable and something on the wall behind the sailors so I added a lamp and on the wall I hanged a fishing-net. Of course I didn't draw the characters because they're not going to be background but added on top of it.

CONTOURS

Now scan your image and open it in a graphics-editor that use layers (I use Photoshop 7).

To get sharp contours and good colouring we need to improve the contours of the image. I do this by making a new layer and drawing new contours on that layer. In that way I don't mess up the real image if I make too many mistakes.

At first I colour every line red so that I can easily distinguish it from the background. Then I colour them in the colour I want. For instance I coloured the the details on the fish blue and a line on the pooltable golden.

COLOUR

When you're done with the contours. Create a new layer inbetween the background and your contour and colour this white. Now the old image is gone, and you can colour your new image easily. Colour it in a new layer and use a bit too bright colours. Why you should do this I'll explain later.

It's not forbidden to add more detail to the picture in the colourlayer. I added two white lines on the glassdoor of the fridge behind the counter which make it look more glassy. The floor I did plain gray at first but then I used a distortfilter to make it look more like old concrete. Then I used the burn-tool as well to simulate dirty patches.

Now comes the fun part.

SHADOW

After colouring your image looks nice and coloured but there's still something that's not right. And that's the fact that there are no shadows. Photoshop has a great tool called an adjustment layer with which you can simulate shadows for example. I use a brightness/contrast-layer to darken the image to the appropriate lightlevel (in this case really dark). Then I paint out the light areas and the even darker areas just using the pencil-tool.

This part of your background-making is the most important since it'll set the mood for the scene. So take your time and try not to miss anything. Don't forget that every lightsource creates shadows on everything.

Personally I don't mind I perspective is a bit of, but try to make the shadows fall as realistically as you can.

FINAL TOUCH

Now all that's left is some final adjustments like making your image the right size for your scene and adding small things that should animate. In my image I want to have flickering flames on all candles so I drew the flames on a new layer (one layer for each frame of the flames) and then created another brightness-contrast-layer to make the flames cast light around them. So here's the final result. Animated and ready to be inserted into my game. It takes time but the result's  worth it!