Graphics made simple

Follow this in case :

  • You don’t have particular skills in drawing stuff
  • You don’t have the biggest imagination
  • You have a cartoon design as target
  • And you want to design your game yourself and make a coherence between all sprites ?

First of all, install InkScape and learn how to use it. I advise you reading the excellent 2D Game Art for Programmers from the beginning.

1 – Find the no-inspirational model

Ok, that’s ugly, but pretty to begin.

Example : I want to do some buildings for a 2D plateformer.

  1. I search in google image for buildings
  2. I select some pictures with a good orientation
  3. I save them in a buildings folder

Here is my selection (For this example, I select completely different type of pictures) :

2 – Think to your game aspect

The goal is to make your sprites as one global thing. To do that you must have a clear output in mind. To help you define the global aspect of your game, here some questions to answers :

  • Border or not ?
  • flat or gradient ?
  • Colorful or pastel or event black’n’white ?

3 – Vectorize the first one

To do that I follow these steps :

Open your building image as a linked image on inkscape

This will help us to have the target image as background.

File -> Open -> Image.png -> choose embed or link (link will update the background picture if you work on the original png)

inkscape-link-image

You will have the image as background. Add a new layer and work on it.

TIPS : To make it easy to hide the background you can also make a layer for your background image

inkscape-link-image2

Start with big shapes

Create a layer name “Building A” for example and give it an opacity of 50.This way you can create your buildings and always see the background.

ScreenShot002 use this tool to make one big shape. Give it one color near the one of the picture.

TIP : To make your graphics easily consistent, use only the inkscape palette

shapes

ScreenShot002 use this tool once more to make the shadow/lights shapes. Give it one color near the one of the picture as always using inkscape palette.

ScreenShot003

ScreenShot002 use this tool again to make the details.

If you have a repetitive object make the first one using shapes then group them (select, then CTRL+G). then duplicate your group using ALT+D.
This way update the first instance will update all the other shapes.

ScreenShot004    ScreenShot005

Reset frequently the layer opacity to 100% to check the final result

ScreenShot006

Make all the shapes you need to realize the first working sheet

And you can duplicate them to see a first look of the result

ScreenShot007ScreenShot008

 

4 – Ask your entourage

We are not designers. We can’t be certain of the quality of things we’ve made.

  • Does the building clear ?
  • Is it cute ?
  • Is it original ?

Perhaps they will answer something like

Oh, the backgrounds building seams “Sad”, try a more fun color. And add big cartoon strokes ! Yes !

And That is the VECTOR MAGIC ! Particularly if you use ALT+D as I said, You can answer to you friend : “sure, 1 second” and show him this :

ScreenShot009

5 – Make your world

Now you’ve found your style, you can follow the same routine with other buildings…

See you soon for next steps !…