Gamasutra: The Art & Business of Making Gamesspacer
View All     RSS
September 22, 2014
arrowPress Releases
September 22, 2014
PR Newswire
View All





If you enjoy reading this site, you might also want to check out these UBM Tech sites:


 
2D Game Art For Programmers - Part 1 [updated]
by Chris Hildenbrand on 10/15/11 09:20:00 am   Expert Blogs   Featured Blogs

The following blog post, unless otherwise noted, was written by a member of Gamasutraís community.
The thoughts and opinions expressed are those of the writer and not Gamasutra or its parent company.

 

Introduction:

Creating your own art work is a necessity for most independent developers. Due to the budget restraints or in a lot of cases the complete lack of a budget a lot of young indie game developer can't afford to hire an artist or buy art assets.

With the help of free software like gimp, inkscape, truespace, daz studio and vue pioneer (just to mention a few) combined with a basic understanding of art creation pretty much anyone can create impressive and professional looking results.

I will try to start with some basic ideas and exercises to improve this kind of understanding. All of the examples will be based on free software. The workflow will be similar if you work with different software like Adobe Illustrator, Adobe PhotoShop, CorelDraw or others. I will try to mention the different approaches for those software packages. With the vast variety of software available at the moment and the sheer endless amount of our art creation tools and techniques it is impossible to cover everything but I will try to keep my examples basic enough to work with the software of your choice.

Let me start by clarifying some common believes when it comes to creating game at.

"I need expensive software tools to create truly professional game art."
No, you don't! There is a huge amount of free tools available that offer a true alternative. Gimp is one of the most well-known examples in the 2D realm as well as Blender in 3D field.
For the full time game artist upgrading your tools to ' industry standards' makes sense. Especially when collaborating with others using standard file format makes sharing and exchanging art a lot easier.

"Buying an expensive tool will automatically create better art."
No, it won't. It's always the artist creating the art that makes it great. Given the simplest tools like pen and paper a good artist can still create stunning pieces, while the most sophisticated tools still need a good artist to create something special.

"I can't do art. I can't even draw a stick figure."

Yes, you can. This is where modern computers to come in and allow you to create good game art without having a graphic arts degree.

"My game is good as it is. I don't need art."
Yes, you do. The independent game market is getting larger and larger and is attracting a lot more attention than it used to a few years back. In order to stand out your game should be the whole deal - have a great game play as well as rewarding and consistent visuals and matching sound and music.


Common hurdles

High Expectations:
One of the main problems facing independent developers are the expectations they have themselves. For single developers or small studios it is close to impossible to create AAA games match the quality of big studios. You should try and aim for the stars. Making games is all about that. Do the best you can and constantly push your limits and improve your skills...
but thinking realistically and adjusting your expectations to your abilities and your budget is a big step towards creating the best game you can create.

Defining a theme:
A lot of the time game creation happens with a spark. We have an idea of how the game playing might work and start creating. Creating very concrete in game art in the early stages of development can often lead to problems as the game evolves during development.
It usually helps to create a working game engine/ core gameplay before starting on the actual art work. Once you know how the game plays it's a lot easier to find a visual theme that encompasses the whole game.

Consistency:
Creating a consistent look and feel is a key element in creating a good gaming experience. It starts with the icon, the splash screen and goes all the way through to the game over screen. The most common mistakes are:
- the overuse of fonts - stick to 2 or 3 for the whole game UI [unless the font is used in images as lettering for shops/ packaging/ etc.]
- drastic changes in light and contrast - keep screens on a similar level - you can progress through the colour realm - usually starting out less colourful and getting more colourful for boss/ epic scenes
- photoshop effects - they are fun but a lot of 'artist' think the more you use the better the image will be... My suggestion is limit your use of fx to a few and keep reusing and variating them
- lighting - look at your screens and imagine the light sources needed to create the highlights, shadows of your ingame/ ui elements... It's scary how often you find lights being randomly used for objects that appear on the same screen

Losing focus:
It is only easy to get carried away with your art work as well as game play or coding. We all tend to focus on those elements we like to do while neglecting those we don't. A good example is generally the menu system/ UI. These usually are implemented at a late stage in the development with motivation at a low point. Yet they are one of the first things the player gets to see and they can greatly define the look and feel of the game.


Let's get started

The first tutorial is based on inkscape using mainly the circle tool [marked in orange in the tool bar on the left] and the nodes tool [marked in green]. 

A very similar result can be created in a bitmap tool [e.g. using circle shapes in gimp]. The work flow is a little different but as long as you keep elements on different layers it's easy to move, alter and modify.

 

The second tutorial works the same way - this time using squares:

 

The outline version still looks somewhat messy but it shows that the whole scene is made up of nothing but squares and deformed rectangles.

 

One very useful tool is the gradient fill. Let's have a look at it in the next tutorial:

 

Next we are moving on to more complex shapes with the help of combined shapes using union, intersection, difference, exclusion and division. 

 

This concludes the first post. I hope you have fun trying to recreate some of the tutorials yourself or just play around with inkscape, gimp & co.

...and please let me know what you think about the tutorials, tell me what you would like to see featured or would like me to change.

Read more in Part 2.

 



Related Jobs

InnoGames GmbH
InnoGames GmbH — Hamburg, Germany
[09.22.14]

Software Developer Flash (m/f)
Wicked Loot
Wicked Loot — Mountain View, California, United States
[09.22.14]

Lead 3D Artist
Insomniac Games
Insomniac Games — Burbank, California, United States
[09.19.14]

Gameplay Programmer - Mobile
Blizzard Entertainment
Blizzard Entertainment — Irvine, California, United States
[09.19.14]

Senior 3D Character Artist - World of Warcraft






Comments


E Zachary Knight
profile image
This is a really awesome tutorial. As a programmer who dabbles in art using Inkscape, this kind of tutorial can really help me. Thanks.

Fernando Fernandes
profile image
Dude, this tutorial is AWESOME! Thanks for posting it!

Benjamin Fremiot
profile image
This tutorial is really cool! It can really help a lot. Thanks for this great job.



Do you already have some thoughts for the next part?



A few ideas: what about teaching how to create common effects if you do it with Inkscape too.

I'm thinking fire ball, water splash, lightning or even explosions (of one of your dirt blocks for example).

Chris Hildenbrand
profile image
Thanks, guys... I am working on the next lot and it's going to be an underwater background with fish, bubbles and decor...



@Benjamin - effects will come... maybe yet not in the next lot but the one after at the latest...

Jared Hester
profile image
Seriously, very well done. If you make enough of them it might be worth it to collect them on a individual site so they don't get lost in the sea of blog posts here or any of the tutorial sites that take open submissions.



Not enough people take the time to do their tutorials well, it's great when someone like you puts them to shame.

Kelly Thomas
profile image
Good Stuff!

Please keep it up.



I took a couple of drawing classes earlier in the year and all I really took from it is that I suck using pen and paper.



It often is much simpler to just jump in and draw electronically.

Timothee Garnaud
profile image
Awsome tutorial. Thanks !!!

Gabriel Ionescu
profile image
I registered just to thank you for making this amazing tutorial. It has so much value for a lone programmer as myself and many others.

Chris Hildenbrand
profile image
Thanks... It makes it worthwhile to see it work and appreciated....

Mehran Einakchi
profile image
Nice tutorial, Thanks for sharing.

I am looking forward for the second part.

Keep up the good work.

Matthew Fairchild
profile image
My mind is blown, i always have problems with art, this help A LOT! Thank you!

Adam Bishop
profile image
Gamasutra has a lot of great content, but this is surely among the best. Bookmarked.

Chris Hildenbrand
profile image
Thanks for the praise... I will try and keep up the good work...

Laura Bularca
profile image
This is extremely helpful, and not only for programmers :) Thank you so very much!

Pieterjan Spoelders
profile image
Great :) I'm a GIMP user and to be honest i've never heard of inkscape before! I'm going to give this a try!

E Zachary Knight
profile image
Seriously, You should be using both. Inkscape is a great free alternative to Adobe Illustrator.



I use Inkscape for graphic design work and GIMP for pixel art and textures. My brother uses it to make his comic book style art as well as anything that he would use the Flash Authoring tool for.

Alexander Jhin
profile image
Thank you! Your art, clarity and speed have always amazed me the couple of times I've worked with you. Now I see a tiny bit into how you do it.

Chris Hildenbrand
profile image
Long time no hear, Alexander... I am glad you like it... and hey... it's not magic... just practice and practice and even some more practice... combine with a good portion of madness... ;)

Cody Kostiuk
profile image
Really nice tutorial, Chris. Very inspiring for novice artists even. I agree wholeheartedly that you don't need drawing skills to create attractive digital art, but I wouldn't gloss over the fact that a programmer needs to develop an artistic eye.



And, I just wanted to clarify that Milkshape is not free, but it's quite affordable.



Also, Inkscape has been toying with the idea of introducing animation tools to their application for a while now. Hopefully, we'll get to see something soon in that regard. It's hard to find a simple, free vector/bitmap art animation tool. If anyone has any suggestions, let me know. Something with "bones" is key though.



Can't wait to see the next installment. ;-)

Chris Hildenbrand
profile image
Thanks for spotting the mistake, Cody... I updated the text... It was supposed to be TrueSpace7 and Vue Pioneer...



I will show some animation techniques in the next set of tutorials - as they have been frequently requested and with a little trick I find a 'no-bones' system a lot more flexible...

Will Buck
profile image
Awesome Tutorial, thanks very much!

Dan MacDonald
profile image
I think you missed your calling, it's really to teach programmers how to do art! :)

Rey Samonte
profile image
VERY COOL! I'll have to look into this. Never heard of Inkscape before! Thanks.

Patrick Westerberg
profile image
Like Gabriel Ionescu I too registerded just to say Tank You for a great tutorial! Keep 'em coming!

Matyi Csapo
profile image
Gave my faith back, might even have art in my game after all! Now if someone would just help with the sounds too :D haha

Looking forward to Part 2!

Chris Hildenbrand
profile image
I split the posts in a more sensible way... I am still thinking of adding one or two more sheets to this one to show the use of the other 'combine' options in actions...

anthony blinco
profile image
absolutely superb work chris. i have to check out inkscape

Henry Fernandez
profile image
This is awesome!, great job, if you are planning to make more tutorials you got one fan ;) thank you very much.

Mohamed S
profile image
Great article. This is very helpful for untalented artists such as myself.

Mark Kreitler
profile image
Can't improve on what's already been said, so I'll just add my thanks.



Amazing work!

Wiliam Thurston
profile image
My wife just asked me incredulously "*you* made that?" after showing her a piece of concept art for my newest game. Thanks for the tutorials, and keep em coming!

Chris Hildenbrand
profile image
I am glad the tutorials could help... I can envision your wife's face...

Jamin Messenger
profile image
This is like the best thing ever. If I can follow along with this art tutorial, anyone can. This is one of the best tutorials I have ever read on any subject. THANK YOU!

Matt Spaulding
profile image
WOW. Chris, you are awesome. My only complaint is that you should have written this earlier. I am at the end of development of my first Xbox game (Cuddle Bear - target release date: Jan 2012). All of my artwork came from clipart I found on Google, modified in Paint. As you can image, it sucks. Animating it was worse. I went through your tutorial and remade one of my existing characters. If I wasn't so close to release I would go back and redo them all (30 of them). I guess that will have to wait until Cuddle Bear 2. With your art tutorial (and a great physics tutorial I found) Cuddle Bear 2 will be at the top of the charts for sure.



For this great demo, I offer you a free copy of Cuddle Bear when it releases. Maybe you can give me some pointers, if you don't mind. Moreover, we could work together on Cuddle Bear 2 if you want.



P.S. Do you have a personal blog or website?

Chris Hildenbrand
profile image
I do have spriteattack.com as my work portfolio (in constant need of updates and currently closed down for a much needed time out) and the blogspot blog with the tutorials and a little bit more: http://2dgameartforprogrammers.blogspot.com/.

Feel free to shoot me a line and maybe I can help out with Cuddle Bear and some 'quick fixes'. :)

tristan vincent
profile image
Hi Chris, Thanks very much for the tutorials! It seems your site where you are hosting the images "http://spriteattack.cator.de" is down right now, and so all I can see is placeholders on both the tutorials here, and at your other site "http://2dgameartforprogrammers.blogspot.com/"

Chris Hildenbrand
profile image
My spriteattack.com server was/ is down. I am changing the images over to Picasa at the moment.

Rudolph Opperman
profile image
Hey shot for the tutorial, I am working on a game with Unity and trying to create a simple 2D background and decided to go with inksacpe. The problem is when I use your method after creating a block duplicating it and scaling the block mine has a fine black border around. This makes creating curved ground a bit difficult. I read this post and it did not seem like anyone else had this problem so I hope i did not skip a step, any help will be appreciated. Thanks in advance.

Chris Hildenbrand
profile image
Hi Rudolph, I am not sure I understand. Is the black border a stroke/ outline set by default maybe? Alternative there might be gaps between the elements - snapping helps to avoid those. Could you send me a screengrab to show?


none
 
Comment: