Messages

Excratus: If you're doing highlighting or shading, often you can paint with a softer edged brush to get much smoother results. If you do this on a new layer, you can then erase around the edges (as softer edged brushes sometimes are a bit harder to draw accurately with)

Jakerpot: I selected it by guessing

As for a version of the background without everything on a different layer.. why? I drew it like this on purpose so that if people wanted to edit it they could. If you want elements merged, can't you do it yourself?

Revan: Cool, glad to hear it helped.

Markbilly: Yeah, that works. Glad to hear it's interesting

Kaioshin: Nice to hear that, thanks.

Misj': Cool, interesting ideas. I've used some of these other techniques before (and have been playing around with them a bit lately as well) but there's some new ideas in there as well, so thanks.

I'm not really that "anti layers", but I know some people who use like 30-80 layers to make the backgrounds for their games... which I consider totally insane

Snarky: Yeah, that does work, and it is something I use a fair bit. Folders are something I never use (I actually think that Elements might not support them), but if I do the buildings this way I simply adjust the opacity of each building in the background individually, then flatten them all into a single layer. There's no "right" way of doing it, I don't think, but depending on how much detail you're planning to add (one can often get away with using very little detail on elements like these) you can often get away with doing this quite basically.

Jakerpot: The opacity to use depends totally on the situation - there's no magical "right" opacity to use, you need to adjust it depending on what you're painting. If you're at step 3 and looking to move to step 4, try this: Select the sky colour as your brush colour, set your brush opacity to somewhere between 25% and 50% and draw with that brush on top of the silhouette, where you want it highlighted. I colour pick all the time while shading, so I often start out with the highlight colour quite bright, and then colour pick the area I've painted to get a darkened tone.

If that confuses you, post a picture for us to look at

If anyone else wants to edit the image, I've included the final .psd here - and I even refrained from flattening the layers while drawing it, just to make your lives easier (usually I'd flatten this down to just a few layers - but I thought it might be handy to have the "everything on a seperate layer" version)

And just to confuse everyone and to show that there are as many exceptions as there are rules, you can get away with doing your background scenery without any transparency at all:



Hooray for exceptions to the rule 

I actually quite like the gradient idea ProgZ suggested - and if you check the colours you can see that he has not actually used that many colours to do it.

I think it works pretty well with the objects as they are as well, but anyway, that's my opinion for whatever it be worth

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.

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

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.

I liked the background you posted some time ago in the critics lounge and am glad you have turned this into a game. I look forward to playing it

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 

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.

Haha yes that is hilarious

Maybe this is a bit off topic , but I would really like ben304 to make a tutorial on how he draw his backgrounds, I´d love to learn "his style".

So Ben if you read this, please teach me, Pm or put it up on the web, I dont care how , just push me in the right direction.

Heh, I actually have a few different styles that I use, and all of them are produced pretty differently, but I think I know which one you're interested in learning.

I've already sent out a few little PM tutorials here and there, so I might sit down and make a slightly more complete tutorial and put it up on the internet. I'll PM you if/when I do.

To everyone else, thanks for playing our little project

Come on man, we use much cooler insults than that!

Holy crap we made a 48 hour game this weekend and I didn't even realize this was going. Awesome 

An easily justified decision considering the game you have made.

Exciting news.

Igor: Just for the sake of doing it, not for any event.

David: Thank you

One possibility is that your character sprite has blank pixels beneath his feet. This is a likely cause for the problem - check your character's sprites and make sure that his/her feet touch right at the bottom of the sprite's frame.

If this doesn't work, and the walkable area is set in the proper spot, I'd suggest checking to see if you've altered the character's z value somewhere.

You may like her bottom but the way her thigh is positioned makes it look really rather odd to me - the fact that it sticks out is probably just as much a result of the way you have drawn her thigh. If you like her the way she is that's fine as well - I was merely pointing out what seemed odd to me.

Curvy ladies are excellent. Wonky ones are not.

Also, I just noticed, the skirt seems to be at a different direction to the rest of the image - it is front on whilst the rest of her is at an angle.

It's a step in the right direction, but if you're looking for an anime type face I'd go with something along these lines:



Other than that, there some other strange elements - chunky legs, bendy arms and a bottom that sticks out more than it probably should.

Holy crap I remember this.

Awesome!

Still!

Pfff, Angela Gossow could kick all of their asses.