How to make badass awesome backgrounds for your AGS game.

Started by i stole your car, Sat 13/02/2010 19:35:31

Previous topic - Next topic

i stole your car


Step 1: Perspective

The first thing you need to learn about drawing backgrounds is perspective, and then equally how to “break” perspective. As an artist it is our duty to defy the laws of tradition. Perspective is a bad habit and anyone who tells you otherwise probably beats their wife.

Let’s look at the structure of the piece I am putting together for this tutorial.

I appreciate at the moment it doesn’t look like much, but choosing to disregard any noticeable sense of perspective actually frees us from certain rules and adds a level of artistic depth to our piece that I will at the moment refer to as “quirk.” If you are following along at home, take this time to build your own room structure, don’t worry if it looks a bit messy right now, remember that’s just quirk and if anybody mentions it, just put it down to artistic license.

Here’s a few things to take into account when creating your room.

  • Don’t worry about sizing the door, your player character can be scaled down to fit.

    Okay, done? On to the next bit.

    Step 2: Colouring

    Before we enter into the realm of colouring, let me just shoot down a little myth (or should I say downright lie) that seems to be floating around at the moment about limiting your colour palette. Don’t. There is an abundance of colours for a reason. You don’t walk into a room in real life and find yourself inside a five colour existence, it’s just not realistic. So keep that in mind when choosing your colours.

    The first thing I do is work on the background, which is of course sky. It doesn’t matter where you are the sky is always going to be the background of everything, even if you can’t see it behind walls. Just because the player character can’t see it, does that mean we should restrict the player themselves from being able to see it? No. After all, behind the earth is sky, so at all times sky should be visible. So grab a nice BLUE colour from your palette and use the fill tool to make the background.

    Done that? Great.

    Now it’s still looking a bit bland at the moment so this is where gradients come in.  Grab your gradient tool and choose a darker blue colour. Some people will tell you that the sky is always darker closer to the horizon. This is not true. Anybody who knows anything about science will understand that the EARTH MOVES. If the earth moves then it can’t always be looking at the same part of the sky can it? With this in mind, go ahead and draw your gradient anywhere, we can fix this up with some visual trickery later to deceive our audience.

    That looks much better.

    Now to finish up on the sky we’re going to add some clouds. Just grab that paintbrush tool and draw in some white patches around there, don’t forget to gradient them as well.

    Looking good.

    Alright we’re finished with the sky now so let’s get to work on the inside of our room. I don’t need to tell you what colour things are because it really doesn’t matter so go ahead and use your fill tool to sort it out. Just remember though, due to lighting, walls are NEVER the same colour. (also this makes your room nicer to look at.)

    Step 3: Objects

    Our room is looking a little bit empty, so let’s go ahead and fill it up with some objects. Boxes are always good because they are easy to draw, but you could also use any other arbitrary object like a bed or some pipes or something. It doesn’t matter if it has any relevance or if the player actually interacts with it at all, as long as you fill up that empty space. Also you can add hotspots to them later which just say random things like if the player was interacting with a bed you could have him say “It’s not bed time.” Or if it’s a clock it could say “Party time!” Not only does this serve to add interaction to your arbitrary objects but also wastes the players time and makes your game seem significantly longer overall. Two birds!

    As you can see here I’ve added some objects and coloured them too. There are some boxes, a bed, a clock and a picture of Mickey Rooney being eaten by a shark. Not only is this comedic but I have really minimised the empty space of the room.

    Step 4: Texturing

    Now that my room is structurally complete and chock full of objects, let’s go ahead and texture them. This will definitely give them a little bit more life. I am using Photoshop to do this, with comes packed with all sorts of effects and gizmos I can use to texture my surfaces, but if you’re using paint or any other program you can just click lots of dots over surfaces to give them texture, although you are also a lesser human being for not being cool enough to use Photoshop like me. Here’s what my room looks like complete with texturing.

    It’s probably best practice to texture every single surface. You can shake it up and add gradients to some of them if you want to be a little more subtle.

    Step 5: Lightning

    We use lightning to brighten up our rooms, otherwise we would be completely in the dark all the time. I know this isn’t exactly realistic but that’s why they’re called “adventure” games. If you can’t put lightning in your game then where’s your sense of adventure? You are probably a nun, go back to boring land.

    I’ve drawn in the lightning, (don't forget to texture!) now we have to show the effect. This is really simple to produce. Everything that the lightning can see, needs to be brighter. We do this by painting some transparent white over it. Make a new layer and set the transparency of the layer to around 70% so you can see it, but still see what’s below it. Take your paintbrush tool and set colour to white and get to work painting. Don’t worry if you go over lines because it’s transparent so nobody will really notice.

    Step 6: Shading

    Everything creates a shadow. This is physics and the fact that I am having to tell you makes me a little concerned about what they are teaching you kids in school these days. We make shadows the same way we made everything brighter. A new layer, 70% transparency, but this time we are going to be painting things black, and instead of painting everything we are only going to be painting underneath objects. If you are confused about what I mean, see the following picture for reference.

    As you can see, we’ve come a long way since that first structural line drawing. Our picture now has a lot of depth thanks to the lightning and shading. There’s just one last thing we need to do in order to make it perfect.

    Step 7: Lense flares and atmospheric effects.

    Lens flares make everything look good. In Photoshop if you go to your “Filters” and then “Render” there are a couple of nice atmospheric effects in there to really spruce up your image. I’m going to render some clouds to give my picture a really foggy look and then overlay some lens flares above that, why don’t you experiment and not copy everything I’ve done because that’s called plagiarism and I will take you to the cleaners if I catch you.

    To conclude, everything I have just told you is the absolute truth. If you disagree with any of this then you are entitled to your own opinion, and by entitled to your own opinion I mean you are wrong and probably have an annoying habit that nobody has told you about because they are too scared to hurt your feelings.

    If you've been following along at home feel free to post your own backgrounds that you made using this tutorial but don't do it in this topic, I don't want you dirtying it up.

    If a moderator could sticky this topic, I think it's important that everybody reads this.




I can safely say that I'll never need another tutorial after this amazing and transcendent tutorial experience.



This absolutely made my day, I'm crying from laughing so much.


Quote from: Chicky on Sat 13/02/2010 19:52:50
Your clouds look like shit.

I wish i could draw like this@@@!!!!@@!1121212!@12121@121

Worked on Strangeland, Primordia, Hob's Barrow, The Cat Lady, Mage's Initiation, Until I Have You, Downfall, Hunie Pop, and every game in the Wadjet Eye Games catalogue (porting)


You know, you've inspired me to pass on my knowledge as well! We all need to do our bit to help out starting artists! So, here, without further ado, is a BG I made all by myself for a project that unfortunately never made it to the light of day.

Okay, first you need to start with the line art. At this stage there's no need to get bogged down in the details, GO WILD! Experiment! Do stuff! Think of the basic shapes you'll be having in the BG, and sketch them in.

Now that the line-art is complete, you'll want to start blocking in the colours. No need to worry about staying inside the lines at this point, you're just doing it rough. Keep in mind the general colours you will be using, and try picking wisely!

Okay, we're almost there! Now comes the final and easiest part. You just need to do a little touching up here and there, and it is ready!

Hope it was helpful!
The ultimate Professional Amateur

Now, with his very own game: Alien Time Zone


You guys need to stop, I've literally been laughing out loud for the past half hour over this stuff and my neighbors are probably going to call the police thinking I'm some kind of maniac...


@Babar: hmm, while I have no problem with adding detail, the steps between your first and the second pic are just so confusing. I think I'll add more colours and gradient, that should help. Also, the old chinese proverb goes: "When in doubt - lens flare!"  ;D

Had a real "lol" moment, thank you car thief.
I don't want the world, I just want your half


Quote from: Domithan on Sat 13/02/2010 20:40:07
You guys need to stop, I've literally been laughing out loud for the past half hour over this stuff and my neighbors are probably going to call the police thinking I'm some kind of maniac...

Plus you have laughing issues!
Worked on Strangeland, Primordia, Hob's Barrow, The Cat Lady, Mage's Initiation, Until I Have You, Downfall, Hunie Pop, and every game in the Wadjet Eye Games catalogue (porting)


Man, your background is so awesome that i tought it was Full Throtle 2.



Babar... Is that background yours??? *Teach me!!!!*  :=


The ultimate Professional Amateur

Now, with his very own game: Alien Time Zone




Amazing  I love the beautiful use of lens flare  ;D   
Currently working on a project!

Shane 'ProgZmax' Stevens

SMF spam blocked by CleanTalk