How we make our graphics

 Tuesday, 12 January 2010   abstauber

Hurray, a new year has begun, we started working on our shadow trip again – so why not telling an inside story about Pixel Art!

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.

Filed under: News | Comments (10)


10 Comments

  1. Uwe says:
    Comment — Wednesday, 13 January 2010 @ 19:01

    Super Einblick, danke dafür. Ist sehr spannend zu sehen, wie du so an die Sache herangehst.

  2. 40 Pixel art tutorials | Garmahis says:
    Pingback — Tuesday, 8 June 2010 @ 15:57

    […] How pixel art for games is made In this tutorial game developer share steps to create pixel art background and character. […]

  3. cianty says:
    Comment — Tuesday, 10 August 2010 @ 08:46

    Sehr inspirierender und lehrreicher Post! Vielen Dank dafür. Habe gerade erst AGS entdeckt und dies war sehr interessant für mich.

  4. admin says:
    Comment — Wednesday, 18 August 2010 @ 10:15

    Schön, dass es dir gefallen hat und Danke für’s Feedback 🙂

  5. Kerstin Wagner says:
    Comment — Wednesday, 24 November 2010 @ 15:37

    WOW! Das ist ein Super Thread! VIELEN DANK!

  6. Jones says:
    Comment — Wednesday, 16 February 2011 @ 12:16

    Super Artikel und tolle Arbeit!
    Was mich noch interessieren würde, wie wurden damals bei Spielen wie Simon the Sorcerer o.ä. die
    Hintergründe erstellt bzw. animiert?
    Wie würde man z.B. einen Wasserfall in den Hintergrund integrieren oder Wellen? Sind das extra Objekte oder Teile des Hintergrundes?

    Gruß und vielen Dank!

  7. MaTachi says:
    Comment — Sunday, 19 February 2012 @ 18:26

    Thanks for sharing! Great guide

  8. sepultribe says:
    Comment — Saturday, 31 March 2012 @ 20:18

    thank you, greatly apreciated guide. can’t wait for the game to be finished

  9. Sukanta Paul says:
    Comment — Wednesday, 27 June 2012 @ 09:56

    This is really awesome tutorial.. I’m just a beginner to pixel art.

    Thanks for sharing with us…

  10. Pixel Art Tutorials – 40 Great Pixel Art Tutorials | CanvasTheme says:
    Pingback — Sunday, 2 February 2014 @ 21:19

    […] How pixel art for games is made […]

Leave a comment