Making Video Game Art (from ink drawings)

Intigration(b)
I thought I would share a little of the process I’ve been using to create assets in The Land of Eyas. I’m a Pen & Ink artist, so unlike most digital art I actual start on paper.

The first step is to make the drawing. I use all black ink and I don’t use expressive marks – these will look strange once you get to some of the later steps.

So here is a drawing (all I’ve done it take a picture of it… it is even a little out of focus [or has a soft focus], you could scan if you want… but you will see that it doesn’t mater too much – so long as the image is flat):
Untitled-21(small)The above drawing is 3.5in x 4in, relatively small.

The next step is to make it into a format that is more easily edited, to do this I use the “threshold” tool in photoshop, you could also do this in Gimp. the result looks like this:
Untitled-21(b)Threshold gives you all black pixels and white pixels, which makes it easy now to select the background or the tree using the “select color range” tool. Threshold gives a more crisp image (it no longer looks out of focus) but it is so crisp it takes on a pixelated look… we will get to this issue later.

The real question now is how do you create a file that has a transparent background? In the game you want to see past the tree into the forest. For this you need to add an “Alpha Channel”. In Photoshop there is a tab for channels next to the “layers”. You should see “RGB” selected at first with  red, green, and blue channels below it. The red green and blue channels all look like gray scale. Transparency is another channel “Alpha channel”. to get this channel click “add new channel”. It will look black, black means “transparent”, white is “opaque”,. What you would want to do at this point is copy and paste the thresholded drawing into the alpha channel. Then you have to invert that channel if you want the background to be transparent (otherwise the tree will get cut out instead of the background – which is cool for some things). The Alpha channel should look something like this:
Untitled-21(c)If the image is too sharp and pixelated you could now blur the alpha channel, or darken it so that the tree is semi transparent like glass. Anyways, once you have the drawing in the alpha channel you can now choose what color you want the tree to be, if you paint the whole RGB channels blue than the tree will come out blue in the game. Your RGB channel does not even need to look like a tree now, it could look like this:

Untitled-21(d)Photoshop shows the channels like this:
Untitled-21(e)
So the tree is in the alpha channel so this cyan box becomes a cyan tree in the game…. well not exactly. This image here on this post is a .jpg file. You would need to save it as another file format like .bmp to have the alpha channels. The .jpg file format cannot have alpha channels. A very similar process is used for web-design, when you want to have a transparent object. In very sophisticated gaming platforms Alpha channels can be used for reflection (making part of a surface shiny while other parts are mat), they are also used sometimes to create a bumpy surface textures that react to light. This is a rather simple application of Alpha channels, that gives you a stenciled look.

The last step is to resize the tree to whatever size you want (it is best if you start with a high resolution image before reducing – it will have a less pixelated look). It will also give you some anti-aliasing.

The end result can look a little like this:
sShot(colortest)And with motion:

If you are interested in this game you can look on Kickstarter to see what this game is about:
https://www.kickstarter.com/projects/438901710/the-land-of-eyas

Keep in mind this is all early developments.

Regards,
Matthew Kiehl

Advertisements
This entry was posted in Art, Computer Games, Game Art, games, indie games and tagged , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s