InCreator's Background Tutorial

So, you want to make an adventure game? But have low skills in drawing?

I made tutorial about drawing a background and you're just looking at it! Point of this tutorial is not to teach you how to draw, but more to show that effective features can be made very easily and they don't take up much time, if you have some experience.

Here we go.

1. You'll have to decide what painting program to use. Windows Paint isn't possibly the best choice, because there's no graphics filters, layer system you'll probably want to use, It has crappy palette system and only freehand & rectangle selector tools, which isn't good for making backgrounds, although I must admit that they may be useful on some occasions, especially when making animated sprites.

My personal favourite is a simple paint program released by RL Vision...named ArtGem! It's shareware and takes only 1,2 MB (packed). Mostly because It can do most things that professional painting progs can, And it has easy, yet powerful interface. Favourite thing about it is different processors (darken/brighten, multiply, add/sub, negative, etc) and extreme good magic Wand selector tool (I've never figured out how to use Lasso tool in other programs, like Flash, so I love ArtGem!'s MW).

My tutorial will be ArtGem-based, but I'm pretty sure you can do all the same and even more with Adobe Photoshop or some other similar program.

Just seek internet for Artgem! version 1.12 (not later ones, they have nag screens!), and install it. It's 30-day shareware and, well...

An installation tip below, highlight to read it:

Before installing ArtGem!, modify your computer calendar. Set it to year 2010 or so. Then install program and run it first time. Then close program and change calendar back to normal. You'll get probably few thousand days until program license expires... :D

2. Okay. Now It's time to start drawing. First thing I usually do, is making room outlines, like this:

pic1.gif (2140 bytes)

This room will be 320x240, with 16-bit colors.

See? I used rectangle and line tools only. And we can already see something, such as house, a wall and fire hydrant. I'm not sure what'll come next, but let's keep on drawing and see where'd we get.

Remember not to use ANTIALIASING when doing outlines, at least not for background with such low resolution, or things will going to look really bad.

As seen on picture, I used very little of perspective view, because It's quite difficult to do. And it fits with 2D sprites better, too.

Note: If you really want to get better at drawing in perspective, seek for tutorials about it, try 3D-modeling (which greatly gives you more "perspective thinking" and better vision how things should look like) or just play some 3D first person shooter and use your eyes to collect more information from screen and store it into your head instead of jumping insanely around and shooting things. This helps a lot!

3. This was very primitive start to my new room. Now we need to add some more outlines, like trees and stuff.

pic2.gif (3131 bytes)

Now you probably think that those trees aren't good enough and they look weird. But later, filling outlines with color and shading things does the trick.

Next step would be drawing and painting a background, because otherwise, It'll be too difficult to do it later.

4. I start with closing gaps on tree's branches, then filling the background and adding city skyline.

pic3.gif (4277 bytes)

Well, as you see, background is taking form already. I used Magic Wand selector to select sky area, then filled it with color and using few tones darker color, drew skyline #1, then made color even darker and drew skyline #2 in front of it. Skyline is extremely easy to do using just filled rectangle tool and making random sized boxes. I also could draw some little antennas, fire escape ladders and satellite dishes, too - but fact is that I'm just too lazy to do that. This, of course doesn't mean that you should, so do these too. Smallest details always give largest effect!

5.  Next step will be adding some clouds and a sun. It'll be easy using 32 sized brush with opacity of 25% and 10% darken processor. In ArtGem, left mouse button brightens and right button darkens. We'll just randomly paint sky over and create a rounded shape to make sun.

Remember to turn ON antialiasing when doing this!

pic4.gif (19199 bytes)

6. Pretty foggy day, eh? Now It's time to complete these trees. First we need to color them.

Like this...

pic5.gif (19513 bytes)

...and shade them...

pic6.gif (22378 bytes)

This time I used 10% brightness tool with brush size of 8, opacity 25% and antialiasing turned OFF.

I just clicked randomly on tree with left and right mouse buttons, trying to make brighter sides of tree, where sun is and darker ones to another side of tree, It's really easy, yet effective.


7. Now leaves. First, I drew another picture, with size of just 3x3 pixels!

(tip to ArtGem users: You really cannot make a new image smaller that 32x32 pixels, but you can resize it to a smaller one!)

Picture is quite simple, like this:

lil.gif (803 bytes)

In case you don't see it, Here's 400% scaled version:

lil2.gif (836 bytes)

... or for really blind people, here's 48x48 size scaled version:

lil3.gif (950 bytes)


Select the whole sky background again, not including trees.

Now we select purple cross from that new image and use it with SPRAY tool and some colors.

We need to spray these crosses around tree branches to imitate background leaves, like this:

(The background sky must be selected while doing that, branches NOT)

pic7.gif (20360 bytes)

Getting somewhere already? Now do same thing with dark green color:

pic8.gif (19911 bytes)

I think you realize that next step will be doing exactly the same with a bit brighter green.

pic9.gif (21443 bytes)

Now select tree branches too. some leaves will be in front of them.

pic10.gif (21527 bytes)

Add some carefully, and also add last of leaves, with brighter green.

Like this:

pic11.gif (22256 bytes)

Surely not the best I could do, but main point is in technique, right? Try to avoid isolated and floating leaves, I didn't and some leaves seem to float in the air. That's because I'm doing a tutorial and you'll be probably doing a game, which are two different things and making a game deserves more careful drawing.

Anyway, you can add some more trees or bushes, using same technique and background cityline color (or a bit darker one).

pic12.gif (21780 bytes)

8. Now, let's finish coloring the picture.

pic13.gif (22458 bytes)

Looks pretty nice already. Now I want to turn this red wall into a red brick wall.

I created a new picture, with size of about 25x10. It's here:

lil4.gif (843 bytes)

Scaled version:

lil5.gif (895 bytes)

Right. I used it as a brush again and placed it at some points of red wall with darken processor, and even made another one, to make wall more different:

pic14.gif (22766 bytes)

Uh... things didn't turn out as nice as I wanted to, but I'm sure  you can do this better.

Now the building. I applied some noise to the gray part (for ArtGem users, W.Noise, 8%)   and brought out edges with brighten and darken lines. I also added some noise(3%) to the brick wall.

pic15.gif (25616 bytes)

9. Windows

There's two ways I use to shade glass. Both are done with brightening some areas of window.

Way #1:

window1.gif (1660 bytes)   Here, I just brightened circular area of upper left part of window...

Way #2:

window2.gif (1801 bytes) and in this case, I pulled few lines with different size of brush, again, with brighten-darken tool, but with no antialiasing.

This picture supports Way #2 better, because sun is behind the house, although Way #1 looks alot better.

So we continue by making the windows, adding some noise to the ledge and grass (6%).

pic16.gif (26062 bytes)

Now let's finish painting the street and fire hydrant.

pic18.gif (31808 bytes)

And -- well, picture is about getting ready now. all we need to do is to add shadows, which - once again - is done by brighten-darken processor. Just pull some darkening rectangles here and there -- and use same technique we used when making tree leaves to make shadows of trees. OR - you can draw some shadows, just as black areas onto another image, and then use them as darken brush to make exact shadows - It's all up to your ideas, skill and experience.

Tree leaves could have some noise if needed, too.

10. Final Picture and what can be done next...

pic19.gif (40972 bytes)

Now we could add some more details to the picture, such as signs, dumpsters, manholes, just whatever could come into your mind.

On that picture, house shadow is a bit non-realistic and way it falls to the sidewalk, is a bit wrong.

It's pretty obvious that room like that doesn't offer much interaction in an adventure game, so plan your rooms more carefully.

The thing I'd do is removing these black outlines, because they make things too... too...  I even can't describe it. But I'd color window outlines with different shades of dark gray and other things same way.

Good luck with your drawing and I hope that tutorial had some use!

Tutorial & example background done in 3,5 hours, Written-painted by InCreator, 10. November 2003.