2D Game Art for Programmers: Let's get started - with circles

"Life is too short to make bad art."

## Saturday, October 15, 2011

### Let's get started - with circles

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 work flow 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.
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.

Get the source art (inkscape svg and gimp file) of this tutorial for
USD 3.00

#### 41 comments:

1. A. Banani October 23, 2011 at 3:16 AM

   Great tutorials! I love using Gimp and Inkscape and I was always looking for good 2D game art tutorials ...
   keep up the good work ...

   Reply Delete
2. Magnesus October 31, 2011 at 9:26 AM

   Those tutorials are awesome. I'm just learning how to make such graphics by analysing stock graphics and openclipart graphics. This blog will help a lot!

   Reply Delete
3. Sofia November 28, 2011 at 11:20 PM

   Great tutorials!!
   Thanks a lot
   :)

   Reply Delete
4. Yasith Vidanaarachchi December 4, 2011 at 5:13 AM

   Awesome tutorial. I just finished creating my first smiley face :D

   Reply Delete
5. Anonymous December 21, 2011 at 8:45 PM

   Thanks a lot! Great job! ;)

   Reply Delete
6. Anonymous December 28, 2011 at 8:06 AM

   I have to say the same than everyone, THANK YOU!!

   Reply Delete
7. Anonymous January 16, 2012 at 3:01 PM

   Super awesome!!! Please keep up your work! Thank you!!!

   Reply Delete
8. Anonymous February 8, 2012 at 4:13 AM

   I love your tutorials.
   How about some UI tutorials though?
   like, boxes for text, arrows, buttons... things like that.
   Just giving ideas. Thanks again

   Reply Delete
9. Bex February 14, 2012 at 10:18 AM

   Hey, great tutorials!
   I created a octopus based on the tutorial of your gimp character, I was wondering if it would be okay to use within my university coursework? Thanks :)

   Reply Delete
10. SpriteAttack February 14, 2012 at 11:22 AM

    It's ok, mate... I am glad you like the tutorials...

    Reply Delete
11. Kongu3345 April 29, 2012 at 2:23 AM

    I made my avatar with this tutorial... great tutorial, I must say.

    Reply Delete
12. Love July 9, 2012 at 12:05 PM

    awesome, you make something that seems difficult to be easy, you are my hero and savior thanks a million

    Reply Delete
13. Unknown July 19, 2012 at 2:53 AM

    This was awesome, really easy to pick up, thank you very much.

    Reply Delete
14. Shashank Sharma August 2, 2012 at 8:21 PM

    super awesome !!! Thank you so much !!

    Reply Delete
15. Jason TEPOORTEN December 11, 2012 at 6:18 PM

    Hi Chris,
    Thank you very much for taking the time to develop this tutorial.
    I certainly intend on using it to try and improve the graphics in my apps.

    Reply Delete
16. Chris Hildenbrand December 11, 2012 at 9:53 PM

    Thanks, guys... It's a sure way to make my day reading your feedback... and it makes me want to write some more...

    Reply Delete
17. jicking bebiro December 30, 2012 at 6:20 AM

    thanks,this reminds me of my older character and made me realize my mistake

    Reply Delete
18. Anonymous February 3, 2013 at 5:24 AM

    how do i duplicate the whole eye to move it the other side...without moving 1 at a time

    Reply Delete
    Replies
    1. Chris Hildenbrand February 3, 2013 at 8:36 PM

       You can either select multiple objects by holding down shift while clicking on objects or by clicking outside the objects and holding the mouse down and drawing a selection box around the objects.

       Delete
    Reply
19. Anonymous February 10, 2013 at 8:54 PM

    How do you manage to make it symmetrical? Even when looking at the X and Y axis it's still almost impossible for me.

    Reply Delete
    Replies
    1. Chris Hildenbrand February 13, 2013 at 3:29 AM

       The easiest way is to group things and align them to a base object. I suggest reading the tutorial about the aligning of objects ( http://2dgameartforprogrammers.blogspot.com.au/2012/12/aligning-objects.html ). I hope this helps.

       Delete
    Reply
20. Andhika F April 11, 2013 at 1:50 AM

    Thank you, this is really useful, of 2d character i am having the most problem drawing the head part. *bookmark*

    Reply Delete
21. Anonymous August 13, 2013 at 1:23 AM

    Thank you so much for the tutorials :D

    Reply Delete
22. Anonymous August 29, 2013 at 6:17 AM

    Hi, thanks for the tutorial. Do you have some tip on using the edit path tool? yours looks very simetrical specially on the shadows or the iluminates parts on the octopus and the red one beside the octopus. i can't deform the circle and obtain that simetrical figure related with the object duplicated.
    Best!

    Reply Delete
23. Anonymous September 6, 2013 at 9:58 PM

    Thanks for your work, nicely done.

    Reply Delete
24. Anonymous September 10, 2013 at 3:19 PM

    Hello this is kind of of off topic but I was wondering if blogs use WYSIWYG editors or if you have to manually
    code with HTML. I'm starting a blog soon but have
    no coding expertise so I wanted to get guidance
    from someone with experience. Any help would be greatly appreciated!
    my blog ... portrait drawing

    Reply Delete
25. Anonymous September 28, 2013 at 7:00 AM

    Can't quit figure out how you made the teeth fit to the top of the mouth like that.

    Reply Delete
    Replies
    1. vicklymobilim October 15, 2013 at 1:18 AM

       I think he just duplicate the mouth and scale it down a bit.

       Delete
    Reply
26. Maria Riquelme November 2, 2013 at 6:42 AM

    Tus tutoriales son geniales, gracias por la información.

    Reply Delete
27. Anonymous November 12, 2013 at 10:37 PM

    HELLO Chris, thanks for this awesome of the art tuto :) !!
    -JokerFRance

    Reply Delete
28. Santhosh Kumar November 19, 2013 at 9:17 PM

    Awesome.. It really helped me lot... Im a beginner.... Please share more.. thanks..

    Reply Delete
29. Pickle Studio December 20, 2013 at 10:10 AM

    Whoa whoa whoa, I know this is a late comment, but stumbled onto your blog and wow I always thought it was hard but this was tons of fun messing with shapes in Inkscape. Thank you for this tutorial, planning to read more.

    Reply Delete
30. Yvan Bister April 12, 2014 at 5:16 AM

    Just stumbled across this blog. What great content for beginners like myself :) awesome

    Reply Delete
31. Isaac "Atridas" Serrano May 16, 2014 at 12:39 AM

    I knew this blog from a while ago. Just today I started to follow it. Expect the results in the next LD48 or so :D

    Reply Delete
32. Piotr Słaboń June 22, 2014 at 10:12 AM

    Awesome! Thanks a lot!

    Reply Delete
33. Anuj Devasthali July 9, 2014 at 6:32 PM

    Very Nice :-) Thanks

    Reply Delete
34. Anonymous July 24, 2014 at 5:31 AM

    THANK YOU !!!!

    Reply Delete
35. Wahid Garci August 13, 2014 at 7:28 PM

    Thank you, very useful !

    Reply Delete
36. Anand Warik August 21, 2014 at 2:28 AM

    thank you. wondering how do you get pictures in your brain before making them

    Reply Delete
    Replies
    1. Chris Hildenbrand August 21, 2014 at 11:49 PM

       Anand, what brain? Joke aside, a lot of the time the image happens as I go along. I rarely have a detailed image of what I want to create in my mind. There is a rough idea and it takes shape as I start sketching, drawing or building it. More often than not I end up with a different result from what I had initially envisioned.

       Delete
    Reply
37. Marden September 23, 2014 at 3:43 AM

    Thanks for tutorial. =D
    I did two drawings, look:
    https://i.imgur.com/aAU82Zx.png
    https://i.imgur.com/W12WkAX.png

    Reply Delete

Add comment
Load more...

Newer Post Home
Subscribe to: Post Comments (Atom)