Jibble

Author Topic: How to make badass awesome backgrounds for your AGS game.  (Read 23515 times)

i stole your car

  • What goes here?
    • I can help with making music
    • I can help with proof reading
    • I can help with story design
HOW TO MAKE BADASS AWESOME BACKGROUNDS FOR YOUR AGS GAME

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.

 8)

Matti

I want the drugs you're on.  :=

discordance

  • teach him how to rock.
    • discordance worked on one or more games that was nominated for an AGS Award!
I can safely say that I'll never need another tutorial after this amazing and transcendent tutorial experience.

It's lacking Poser characters!!!

Your clouds look like shit.

LRH

    • I can help with making music
    • I can help with play testing
    • I can help with translating
    • I can help with voice acting
This absolutely made my day, I'm crying from laughing so much.

Dualnames

  • AGS Baker
  • Rottwheelers
  • Pretty Badass
    • Dualnames worked on one or more games that won an AGS Award!
    •  
    • Dualnames worked on one or more games that was nominated for an AGS Award!
Your clouds look like shit.

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

YOU'RE TEH AWSOME!@!@!2 YOU ROXOR AND PWNS!!!!
No more military army stuff. I'm alive and back.

Babar

  • Creator, Mutator and Defecator
    • I can help with proof reading
    • I can help with scripting
    • I can help with story design
    • I can help with translating
    • Babar worked on one or more games that won an AGS Award!
    •  
    • Babar worked on one or more games that was nominated for an AGS Award!
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

LRH

    • I can help with making music
    • I can help with play testing
    • I can help with translating
    • I can help with voice acting
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

Dualnames

  • AGS Baker
  • Rottwheelers
  • Pretty Badass
    • Dualnames worked on one or more games that won an AGS Award!
    •  
    • Dualnames worked on one or more games that was nominated for an AGS Award!
Re: How to make badass awesome backgrounds for your AGS game.
« Reply #10 on: 14 Feb 2010, 00:00 »
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!
No more military army stuff. I'm alive and back.

Jakerpot

  • Head Hunter
    • I can help with animation
    • I can help with backgrounds
    • I can help with play testing
    • I can help with proof reading
    • I can help with story design
    • I can help with translating
    • I can help with voice acting
Re: How to make badass awesome backgrounds for your AGS game.
« Reply #11 on: 14 Feb 2010, 00:27 »
Man, your background is so awesome that i tought it was Full Throtle 2.

Really.



R4L

  • You need me Rick...
Re: How to make badass awesome backgrounds for your AGS game.
« Reply #12 on: 14 Feb 2010, 02:25 »
Why wasn't this done sooner? Haha!  ;D

Jakerpot

  • Head Hunter
    • I can help with animation
    • I can help with backgrounds
    • I can help with play testing
    • I can help with proof reading
    • I can help with story design
    • I can help with translating
    • I can help with voice acting
Re: How to make badass awesome backgrounds for your AGS game.
« Reply #13 on: 14 Feb 2010, 13:54 »
Babar... Is that background yours??? *Teach me!!!!*  :=



Babar

  • Creator, Mutator and Defecator
    • I can help with proof reading
    • I can help with scripting
    • I can help with story design
    • I can help with translating
    • Babar worked on one or more games that won an AGS Award!
    •  
    • Babar worked on one or more games that was nominated for an AGS Award!
Re: How to make badass awesome backgrounds for your AGS game.
« Reply #14 on: 14 Feb 2010, 18:39 »
What do you think I just did?! :P
The ultimate Professional Amateur

Now, with his very own game: Alien Time Zone

Miez

  • Mittens Viscount
  • cMiez.Say("Whee!");
    • I can help with animation
    • I can help with backgrounds
    • I can help with play testing
    • I can help with story design
    • I can help with translating
    • Miez worked on one or more games that won an AGS Award!
    •  
    • Miez worked on one or more games that was nominated for an AGS Award!
Re: How to make badass awesome backgrounds for your AGS game.
« Reply #15 on: 14 Feb 2010, 20:06 »
Ah. So that's what I've been doing wrong ...  ;D

Jakerpot

  • Head Hunter
    • I can help with animation
    • I can help with backgrounds
    • I can help with play testing
    • I can help with proof reading
    • I can help with story design
    • I can help with translating
    • I can help with voice acting
Re: How to make badass awesome backgrounds for your AGS game.
« Reply #16 on: 14 Feb 2010, 20:38 »
What do you think I just did?! :P

You are right sorry. *Teach me again then!*  :=



Re: How to make badass awesome backgrounds for your AGS game.
« Reply #17 on: 14 Feb 2010, 20:55 »
I've been laughing so hard my throat is dry.

SinSin

  • 10 years and counting!
    • I can help with backgrounds
    • I can help with play testing
    • I can help with voice acting
    • SinSin worked on one or more games that won an AGS Award!
    •  
    • SinSin worked on one or more games that was nominated for an AGS Award!
Re: How to make badass awesome backgrounds for your AGS game.
« Reply #18 on: 14 Feb 2010, 21:50 »
Amazing  I love the beautiful use of lens flare  ;D   

Shane 'ProgZmax' Stevens

  • Mittens Serf
  • GARBAAAAAGE DAAAAAAY!
    • I can help with animation
    • I can help with characters
    • Lifetime Achievement Award Winner
    • I can help with making music
    • I can help with proof reading
    • I can help with scripting
    • I can help with story design
    • Shane 'ProgZmax' Stevens worked on one or more games that won an AGS Award!
    •  
    • Shane 'ProgZmax' Stevens worked on one or more games that was nominated for an AGS Award!
Re: How to make badass awesome backgrounds for your AGS game.
« Reply #19 on: 14 Feb 2010, 23:02 »
Wow Babar, you must teach me your ways  :=