On Drawing Backgrounds

[ThreeOhFour]

I know Andail has been discussing background illustration issues in a recent thread, and don't want to feel like I am infringing upon this, but I have had a number of requests from people in various places asking how I draw my backgrounds, and so in order to avoid doing up new tutorials each time I have decided to post something here as a more permanent reference for those interested in such a thing.

Before I go into any details, please be aware that I am not a trained artist and my techniques can be regarded as being full of bad habits. That being said, however, I do not believe that it is essential to study for years and years in order to simply make some nice backgrounds for one of your projects. What advice, if any, you choose to take from this guide is up to you, but be warned that some of the things I suggest may be "bad" advice when considered from the viewpoint of one who is familiar with more traditional painting techniques.

Before we start, let's have a quick look at the background I've painted quickly in order to demonstrate the steps I use:



As this was simply done for an example image, I didn't worry too much about the following, but these are important things to consider before you start drawing your background:

- Where are my exits, and how many are there?
- What items, objects, characters and hotspots am I going to need to fit into this background?
- What sort of atmosphere is my setting designed to evoke?

Also, a quick discussion on hardware/software:

- Make sure your monitor is calibrated properly with the colours. If you use Photoshop, Adobe Gamma is rather good at getting good colour settings for your screen.
- Whilst it can be done with a mouse, this sort of thing is much easier with a tablet. I use a little A5 Wacom tablet - not too expensive for my little needs and big enough to sit comfortably on my lap. Pressure sensitivity and smoother line control is really helpful for painting your scenes.
- For backgrounds, a good choice of program is Photoshop. Because full Photoshop is so expensive, I use Photoshop Elements 8 - not only did I buy it for about 1/10th the price of CS4, it still has all the stuff I use (although I never really use much more than the brush and eraser tools) and isn't filled up with expensive filters and the like that I will simply never use anyway. Other alternatives include Paint Shop Pro and Painter. GIMP is a good free alternative if you simply cannot afford these programs.

And on a technique related note:

A lot of the things I do here are things I developed whilst doing pixel based backgrounds. I learnt a lot about things like atmospheric perspective and choosing interesting palettes by learning "pixelart" for a while. Playing around with colour palettes to see what works well is really beneficial to creating eye catching backgrounds, and learning to simplify your work with pixels can also speed up the way you work with brushes a good deal. It is not essential to learn these things, but it can help.

With regards to layers... I try not to use too many, and if I do end up using a few I always merge them whenever possible. Painting with lots of layers is easy, but not really all that necessary, and I often find I work slower when I try using lots of layers because I spend more time switching between them and trying to keep them organised. If you can paint your backgrounds on 1-5 layers then it will be a lot more manageable - and whilst layers make erasing things easy, I don't find it that hard to paint over things instead anyway.

With those things in mind, let's take a quick look at each stage I use to create a scene:



The first step I use is to establish the main hue of the background. For an outside background this is often the sky, for an inside background it is the primary lightsource. Also, I draw my backgrounds at twice the resolution of the final image, and resize once I have finished drawing it.

For the sky, I use a gradient. Skies that are a flat colour work as well, but appear much less interesting and more flat. As Andail mentioned in his guide, the atmosphere is lighter towards the horizon and darker away from it.

I also copy in a 200% zoomed image of the main character sprite before I draw any structures on a seperate layer. This is a good reference point to ensure that none of your doors/chairs/tables etc look out of proportion with your main character when she/he is walking around. I always try to avoid character scaling, as it tends to look quite awful at the resolution I use for games.



The next step is to draw in the playable areas. This is the areas in which the player can move her/his character around and interact with objects. Using the reference sprite, I draw silhouettes of everything using a dark, desaturated colour. I try to avoid black as I feel dark purple/blue/green/red looks nicer, but it is all down to personal preference.



The next step is to introduce secondary lightsources. These provide some nice variation of hue throughout the scene.

To create these, I usually use a couple of layers - first I draw the white shape with a hard edged brush, then I either trace the first shape again in white with a softer edged brush or copy it to a new layer and use gaussian blur to soften the edges. Then, in a layer below this, I use draw the colour of the light with a softer edged brush. This creates a fairly nice feeling of glow.



The next step is to give some depth and form to the shapes we have drawn in silhouette. Here I use a brush at low opacity to highlight the areas that are facing the appropriate direction. You can do this with either a soft edged brush or a hard edged brush. Often I use both, but for the sake of speed I have used a hard edged brush here.

Learning to colour pick and use the opacity of your brush to blend colours is very helpful here, and is something well worth practising.



Now I add the secondary lighting to the scene, using similar techniques to the previous step. Try to balance this so that the secondary lightsources don't look too strong or weak - doing it on a separate layer and adjusting the transparency of this layer is one way of getting the right setting. Doing this gives you some great opportunities to light places that would otherwise remain in shadow, so run with it!



Finally, I add in some background detail. Although I am often tempted by the simplicity of simply drawing buildings as rectangles facing dead on, it is much nicer to rotate them a bit and have some nice angles in the background.

In order to make these buildings look further away I simply rely on atmospheric perspective. The buildings you see here are painted with a translucent brush, allowing the sky colour to show through, giving the appearance of atmosphere in front of these buildings. The more transparent the brush, the further away the buildings look. Simple, no?

From here, all that remains is the process of cleaning up your messy brushstrokes and adding in details and textures. With this done you can resize the image and import it into your game!


If you have comments/questions/criticism or something else to add to the discussion, I am certainly open to it, and look forward to seeing your thoughts. I hope this gives some insight to those who have been inquiring about the way I draw this style of background.

[Ubel]

A really good read. It was very nice to get some insight on how you produce your art and I'm sure it will be helpful to a lot of people. Well done!

I'd like to give you some personal advice, Ben. Since you have a habit of resizing your backgrounds to a lower resolution you might want to considering changing the image interpolation setting to "Nearest neighbour" before you do the resizing. I'm guessing your current setting is the Photoshop default "Bilinear" which gives the resized image very smooth edges. If you switched to "Nearest neighbour" you'd get nicely sharp edges which would look way better with your pixelated characters. The change isn't that big but it's still noticable.

Just in case you don't know where this setting is, this is how to access it in CS4 (I haven't used Elements that much so I don't know if it's the same): Edit -> Preferences -> General.

[Calin Leafshade]

using nearest neighbour would wreck his backgrounds.

They are smooth painted images, not pixel art.

[Ubel]

This is his 640x480 background resized with nearest neighbour and with the character copy-pasted from the first picture. I don't see how it's wrecked. The only thing that changed is that there is less blurriness on some edges which is good.

[Calin Leafshade]

hmm fair point, I stand corrected

[Misj']

Nice Walk-hrough Ben.

[ThreeOhFour]

I've played around with different settings for this, and sometimes I find that using certain settings when resizing can cause edges to get badly distorted when I downsize.

I actually use the bicubic setting as this seems to work fine. Still, I appreciate the input and will have a play around. For backgrounds where I actually draw sharp edges (which is admittedly a bit of a rarity) it would be nice to have them downsize with slightly more sharpness.

Misj' - the thought of backgrounds being a puzzle and this being a walkthrough now amuses me very much 

[Wonkyth]

Ah, but art is a puzzle, and one which I'm yet to crack!

Great stuff Ben, I'm sure I'll find it useful some time soon.

[Ryan Timothy B]

The buildings you see here are painted with a translucent brush, allowing the sky colour to show through, giving the appearance of atmosphere in front of these buildings

Instead of painting with a translucent brush, draw each background building on a separate layer with 100% opacity brush, then you can change each layer's opacity individually.  That way you don't have to keep the brush held down while drawing the entire building.


Anyway, nice tutorial.  I hope it directs people to make more Ben304 style games... or just more games in general.

[ThreeOhFour]

Actually, Ryan, whilst that works, what I often do is draw a large translucent blob at the building's rough position and then erase around the edges to refine the shape.

But yes, your suggestion works well also.

[Jakerpot]

Nice work Ben! But how do you draw those diagonal lines so straight? This isn't the brush tool is it?

[ThreeOhFour]

In photoshop, with the brush tool, hold down shift and it will draw lines from point to point.

[Ryan Timothy B]

That technique also works for the pencil tool too.  And you'll get perfect lines without the double pixels that their ACTUAL line tool does, which is retarded.
I use it all the time.

[Matt Frith]

Yep the shift button feature is a god send!  Lovely tutorial Ben.  I might have a go at drawing a background in your style when i get my hands on a tablet.

[Jakerpot]

Yeah, i thought it could be that...

And what about transparency on the light layers? I can't get any result *almost* ('cause i can't make lights this good as you!) like yours with 100% opacity on layers. How much transparency?

[Babar]

I hate the transparency problems with shading. What Ryan suggested earlier works if you only have one shade (or maybe 1 shade and 1 highlight) per thing, but yours is better if ben's want to fine-tune the shading, or want inbetween stuff, etc.

But then Ben's method ALWAYS gives me the problem that once I've done something with a translucent brush, and then I realise I missed something, or I want to add something, I have to draw that part VERY VERY carefully, because overlapping makes it less translucent, and patchy.

[Jakerpot]

Maybe i should post my bg here to show you the transparency problem...

[ThreeOhFour]

Babar: One thing I find useful in this sort of situation is to take the colour you are painting with at the opacity you want it, paint a blob on a layer and use the colour picker to pick the colour of that blob as your new painting colour. Then undo, change brush opacity back to 100% and paint the image without having to worry about translucency later on. This works really great, but can look a bit strange if you have a very strong sky gradient.

Jakerpot: Are you talking about the lightsource itself, the highlights on the ground.. the highlights from the secondary lightsources? I'm not really sure what you're asking, but will happily help if I can.

[markbilly]

Babar: One thing I find useful in this sort of situation is to take the colour you are painting with at the opacity you want it, paint a blob on a layer and use the colour picker to pick the colour of that blob as your new painting colour. Then undo, change brush opacity back to 100% and paint the image without having to worry about translucency later on. This works really great, but can look a bit strange if you have a very strong sky gradient.

That's what I do for shading. Do it using transparency, then either take a screen-shot and paste over the original image on 100% or just select the new colour it produces and add that to a 100% layer.

Great tutorial, Ben. When I get a tablet I'll also be having a go at some 'painted' backgrounds. My style at the moment is more line tool based.

[Kaio]

Hey Ben, just wanted to say thanks. This is very inspiring