Sustainable Background Design

STEP 1. THINK BEFORE YOU ACT!!!

How many amateur games in development do you know of? How many of those great sites have you visited over the last, say 6 months? Heaps? Yup, I believe you.

What was it that struck you about those? Coding? Plot? Music? Perhaps, but not likely. What probably impressed you the most were those spectacular backgrounds, wasn't it?

Now think, how many of those wondeful looking projects have been completed? Probably not many. Most of them have probably been abandoned due to the fact that there was just too much work involved.

And what takes up most work in a game???
That's right: art. So in most cases, they just couldn't keep it up. It's not that hard to draw two or three spectacular-looking backgrounds or a fantastic splash-screen. However, once you've done that , and it has taken you ages, you begin to wonder how on earth are you going to finish that 50 room game you had in mind.

How do you overcome this problem? By doing what I pompously call sustainable background design: settling for a good-looking background style which doesn't take you all that long to draw.

Even if I'm no expert, I've managed to release three games and as many demos in less than two years (all credit to Chris Jones for the wonderful AGS engine). I don't think I would have achieved that if I hadn't drawn those backgrounds this way.

So yep, if you've made it this far, welcome to sustainable background design Pedro_Scribe's way!!!

STEP 2. THE BACKGROUND SCENE

Final Image Today we're going to draw this background. Ok, not uber-flash but that's what this is all about, isn't it? If I can consistently achieve this background quality in a 25-room game, I'll be pretty pleased with my little self.

By the way, I always use Photoshop 5.5 (not that it matters much, because all you're going to need is the polygonal lasso and the paint bucket)..

First ImageFirst of all, you need to get youself an empty 320x200 background. Then using the polygonal lasso and the pain bucket, draw the walls like so (bear in mind that the back wall should be of a lighter color).

Making crooked polygons instead of staight ones gives you that Day of the Tentaclish appearance.

Second ImageNow for the ceiling and floor. Just fill in the remaining areas with the paint bucket (remember that the ceiling should be the darkest of the lot). i've added a basic door for the hell of it.

STEP 3. SOME BACKGROUND DETAILS

Third ImageAgain, use the polygonal lasso and the paint bucket to draw those thingies that run along the base of the wall and whose name I can never remember. You can add some volume to them by drawing a lighter-color line along the top.

Fourth Image Well, that was pretty easy, and guess what? It doesn't get harder. Before we move on to the foreground we'll do some more detailing.

Let's make the walls look a bit more "cheery" (I wonder why people say I have no taste for decoration).

Also, let's put in a carpet and a door. Try to keep the perspective, but there's no need to get too carried away about it. And remember, it's all line tool, polygonal lasso and paint bucket. Nothing else. We've been going for about ten minutes now.

STEP 4. AND NOW WITH THE FOREGROUND

Fifth Image For each object in the foreground, we'll add a new layer. In that way, it'll be easier to move things around if we need to.

We'll put a bookshelf in. Just draw a couple of polygons to make a solid brown box, and then draw some more to make the shelves inside.

Sixth Image We'll also put a picture of Guybrush in because he's cool. I Googled for "guybrush", took one of the pics, cut it and pasted it on it's own layer. Then I drew a frame... you guessed it: it's all lasso and paint bucket stuf.

I drew the books on the shelf by making two boxes (a blue and a red one, then drawing a few lines inside to represent the different books.

I've also added some lines to the shelf's edges to achieve the illusion of lighting, but nothing to write home about.

STEP 5. FINALLY THOSE COOL BLACK OBJECTS IN THE FOREGROUND

Final Image Doesn't that look awesome in those LucasFilm games? It's actually pretty easy to do, so let's have a go.

Create a new layer and use our standard technique to draw silouettes of objects. Then fill them in black. By the way, you can add "cameo" type stuff which adventure players have probably seen before. Google for "Herman Toothrot", fill the figure in black and paste in on top for a great finishing touch.

...AND THATS ALL FOLKS

Could we have put some more furniture in? We could. Could we have added some flashy textures and lighting effects? We could. But guess what? We're into cheap, quick and easy. We're into sustainable background design: a style we can keep up without too much effort.

This backgroun took under half an hour to draw, and for those that care about that sort of stuff, we used only 38 colors.

I just hope this helps.

FOR FEEDBACK

Email me here or PM aussie at the AGS Forums

Tutorial reproduced with permission from Pedro_Scribe
blog comments powered by Disqus