I’ve chosen this background, because I made it completely by mouseclicks. No drawings, no tablet, no scans. In other words, you just need patience and almost no talent.

As for the program, you can use everthing that supports layers and pixel. I’ve used Photoshop 7  (pencil tool, 1x), but paint.net, The Gimp or GraphicsGale are up for the task as well.

The Beginning

So lets start. The first thing we should think about are the dimensions of our screen. In this example there needs to be space left for a Lucas Arts verb GUI, which takes a height of 58 px. So our background can’t be bigger than 320×142 px without the need to scroll. Being aware of this fact, we can finally start.

I started with a black background, because the final result will be predominantly dark, respectively  a closed room. For landscapes  I’d probably chose a light blue and a forest would start with a dark green.

The next thing is to place the player’s character on the canvas, to get a feeling for the dimension inside the room. The now following part might be the most important one: the structural work.

Mistakes in this part will hound you through the entire creation process and reduce the fun you should have while drawing. A little pencil sketch can help you to speed up this step.

Ha! At the beginning I wrote “Pen & Paper? How needs that?”. But trust me, it’s really a lot easier to sketch out how the picture should look like. That sketch can also be a map or whatever – you just need to know, what you want. By the way, I wanted a cell in a carrier, something made of steel with a seperated room attached to it. My sketch was made in 5 minutes and wasn’t much bigger than a stamp

So here’s the result:

In this early step, you should also think about your light sources. Since my prison doesn’t have windows, I needed some kind of lamp, which I placed on the ceiling. The perspective I’ve chosen is nothing special, just a regular one point perspective. On a seperate layer I’ve added some guidance lines and horizontal line.

At the bottom part, you’ll notice that I’ve already prepared a small palette.

The Palette

When creating pixel art, I usually don’t use the palette tools of the paint programm as I prefer to draw palettes directly into the picture (preferably on a seperate layer).

For a better comparison, I create a palette for each part of the background using HSB  for color mixing (Hue, Satuation, Brightness) instead of RGB. Here’s an example:

I start with the darkest color, then increase the brightness and decrease the satuation. I repeat that until I think I have enough colors. Of course it depends on what you like to draw.

The First Coat

After we have our skeleton ready, we can continue to basic coloring. About the choice of colors, I’d like to add the following: they should at least somehow match each other.

Free yourself from the conception: chair = wood = brown (chairs can be painted, they have a cushion and so on), pants = jeans = blue or walls = err… if have white ingrain wallpapers in my room.

At http://kuler.adobe.com/ you’ll find dozens of color-combinations and a mixing tool (on the left side, click create) which finds matching colors for you.
I chose a matt-finished green for my walls.

Now I’ve  added two light sources. Originally the lamp on the right side wasn’t planned. But during the coloring, I realised that this area would have to stay black – so I quickly made another lamp. You can also see a texture on the ground, but to be honest, I’ve added it in a subsequent step (filter: add noise).

I always try to avoid vast empty spaces, the wall in the back is a good example for it. In the first step of coloring it was just dark olive and looked incredebly dull, so for starters I began to add green borders. If you’re out of ideas, try looking for some photos covering a similar topic. For this background some good keywords would be: marine, army, hospital – Flickr is full of great material.

The green stripes loosend up the area a little, so in the next step I’ve added doors and segmented the wall into plates.

For the plates I had to practice at the bottom part first. Again it’s good to know, where the the light comes from.

The Balance

Now that we took care of the wall, the upper part looks awfully empty. So we simply moved the problem and now have to fix it again.
So what’s on a ceiling… hmm, maybe a compressor?

I started with a green box and tried to carve in some details. So now a compressor sticks on the ceiling. Well, it should be at least connected to something. How about pipes? They are expected in technical rooms anyway, so I worked my way from back to front:

The lazy pipe, just a thick line in the background

The spatial pipe, that also utilizes the left wall.

The final pipes, which are closest to the viewer. Also I could now add some shadows to the pipes.

Examining the screen again told me that it’s now mostly balanced, so we can advance to the next step.

Filling Spaces

The rightmost wall is still quite bleak and also the middle leaves space for improvements. Since the right part of the picture was going to be a cell anyway I decided to add a puddle and a makeshift bed. The wall itself got a strange texture. I’m not quite sure what it’s meant to be, but in StarWars the walls are covered with stuff like that

As a measure for the bed, I’ve added the prisoner on a seperate layer. This allows me also to estimate the gap to the floor.The last really empty space is now the middle of the back wall – time for a desk. Of course an alcove or other furniture would do the job too, but a desk is easy to draw and I can hang a map above it.

By the way, a big armoire would present an empty space itself and therefore wouldn’t be much of a help.

However, there’s still an uncovered area. This time we take care of the dividing middle wall. I have planned shelf and because a ventilation problem in the cell, I’ve also added a vent above it.

The hunt for spaces is almost over now. You can see that I drew another vent on the back wall – such things are easy to draw and are a good match to the pipes. Evaluating the composition, I’d say we’re done. The important thing is that the screen is passably balanced, going overboard with details can destroy this impression again.
But for my particular game I also needed a phone and suggestion box. See that these objects also go nicely along with the desk. A turbine or a bicyclestand would be a little stupid.

Another thing that pops out watching the screen, is its sterility. Apart from the puddle that prison is almost brand new. To support its authenticity, I let it rust. The easiest way to do it is to create another layer and to choose a rusty color (like the bed’s color). Now I picked a low opacity (I suppose every newer paint program lets you chose the opacity of the brush/pen), about 30%, and started drawing. For a more convincing look, think about at which places rusting usually starts, e.g. corners and edges. Also the endings of pipes are a good place.

Let’s see how it looks after some oxidisation:

Way more convincing, eh? But remember to add those atmospheric tricks at a late stage of your screen. If you now move a pipe or changing another detail, you have to start with rust all over gain. Especially shadows should come last.

Objects

For drawing game backgrounds, you have to keep in mind that the player also interacts with it’s surroundings, like opening doors or picking up objects. This screen makes no difference. To avoid trouble, I strongly suggest that you start making your object on a seperate layer.

I always create objects showing open doors which are overlapping the background with the closed door. For this screen I also need some clipboards which the player can take away.

Here’s the background with my objects:

And for a better view, with a colored layer in the back.

This is also the view I use to import the objects.

The Finishing Touches

At this point everything should be done. The drawback of my method of color mixing is that they usually lack of contrast, so at this final stage I like to experiment with image effects like satuation and contrast layers. But of course, that optional.

To finally finish this screen I removed the palettes and shaped the left stairs a little more. Now it’s ready to go live:

By the way, that game is called AeroNuts. If you got curious, don’t hesitate to check it out

A little checklist

The last thing I’d like to show you is a little checklist which can help you planning your screens.

• Does the scene take place outside or is it inside
• Where does it take place (get some photos from flickr or google)
• Where are your light sources
• Is the scenery authentic
• Which characters are going to appear and where are they placed
• What objects are needed and what stays part of the background
• Do the colors match

And for the critical painters: Is the image exciting, does it have depth, does the composition work?

The End

Thanks for reading! If you have question, don’t hesitate to ask.

And after collecting some nice ideas and puzzles there’s still the hurdle to connect it all to one good story.

Here’s one method, that helped me a lot to get out of the writers block – it’s called “Snowflake Method”.

All in all you begin with cramming you whole story into one short sentence. After that you get 4 more sentences to mark the cornerstones. If you’ve finished all steps,  you’ll get a nice skeleton you can stick to. Also it helps you to rethink the whole thing from a whole new position. Well, see for yourself, here’s the link:

http://www.advancedfictionwriting.com/art/snowflake.php

First of all, thanks for all cheering comments we’ve recieved so far. I’m having a hard time, not to spoil even more stuff

So for now, it’s only small news from the dev kitchen

Anno 2008, AGS Forums’s KhrisMuc released a small module (btw. thanks again!), which made it possible to dissolve stuff in AGS. And in the meantime, even ShattenReyze managed to get far enough to actually have usage for that module.
Unfortunately the module never come out of the alpha phase, so I had to go back to Scriptopia, in order to rewrite this thing.

And that’s how it looks today:

Incredibly ugly ;D
But I promise, it’s much more appealing, when you see it moving.

Anyway it’s working pretty good and it can also be the base for a lot interesting puzzles.
Right now I’m thinking of hourglasses or bad guys who slowly teleport in the way of the player.

I’m pretty excited to get my hands on those new puzzles

And again, please enjoy your stay!