"Life is too short to make bad art."

Friday, February 17, 2012

Creating a character with outlines

Here's one request I have read a few times now: 'How do you make a character with outlines?'. It's not much different from any other character creations you just add a little more difficulty and a few problems to work around. 

The main problems I see with a lot illustrations using outlines are: a) the inconsistent line weight (different thickness of the stroke for different elements on the screen). It's a little more complicated and takes some thought to design the screen balanced. My advice is to keep it either keep it all at the same thickness or use a thicker brush for all the focus elements (eg. characters, logo, UI elements) and create the background with a thinner stroke. b) the colouring of stroke vs. the colour of the shape. c) the line weight does not correspond with the illustration. You might have noticed it in comic books, illustrations or animated cartoons - the stroke is not consistent in thickness. It starts thinner, goes thick and ends thin again giving it more of a brush feeling. If it's done right it really enhances the image but it's a time-consuming art. Simply using tools in Adobe Illustrator or Corel Draw to create dynamic brushes usual ends up looking wrong.  

All those problems aside. Let's start with something simple.In this tutorial we will do a little piglet with a plain black stroke that stays consistent throughout the elements. In one of the next tutorials I will cover more complex and modified outlines.

The last two steps show one of the main problems with outlines - the overlapping of elements creates lines we don't want to see. You could just combine the snout and the head. Simply making it one object would result in problems animating it afterwards. This becomes even more visible in arms and legs. I prefer just adding shapes to cover those overlaps.


The tail might not the usual corkscrew design you see in a lot of pig illustrations - it was one of those cases of thinking you know how it looks versus the way it looks. In the end I checked on Google images [the best invention since sliced bread] and had a look at real piglets and found this cute little tail more appropriate.


And the last step - I forgot to add it to the tutorial pages - (remember I am fresh off the vacation) is a cover shape for the legs to join them with the body. 

I hope you enjoyed this tutorial. Get out inkscape and start creating!

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

buy

6 comments:

  1. Hi SpriteAttack, I have been happily following your tutorials since a while, and have been able to reproduce all your great examples. I have learned lots thanks to you!, thank you very much for your awesome work! :)

    But I have 1 little question, I am not sure of what is best to decrease the final kBs of my art (to use it in a game): trying to keep its vertices low OR trying to use more basic shapes like circle, triangle, etc?

    How do/would you do it if you want to make complex vectorial characters, while keeping them low on resources, to be able to use them directly as vector graphics in the game?

    Thanks! You are the hero.

    ReplyDelete
    Replies
    1. ah!, emmm, and what about the bezier curves from the vertices? are they heavy on resources?... I mean, am I better having less Vertex and more Bezier or the other way around?

      Greetings.

      Delete
    2. Hi there...

      To be honest I never really bothered about the size of the vector files (well... unless I use them in flash and outlines turn into a zillion nodes). I really don't think that file-size can be an issue but by trying to keep the number of vertices low you are on the safe side - basic shapes still require vertices and you might be able to do shapes better by hand than rely on a huge number of basic shapes.

      As far as Vertex vs. Bezier goes I did a quick test in Inkscape on some simple shapes and there is a difference but again it's minimal. I would always put the look first and concerns about the file-size second.

      Good luck with your game!

      Delete
  2. wow u finally answered my call !!! animal characters :) thanks spriteattack :) ive been eagerly waiting for ur new art ..and i check ur blog pretty much everyday :) ur blog is a game programers heaven :)

    ReplyDelete
  3. Hi spriteattack, absolutely love your blogs.
    Soo usefull now Im writing and illustrating my own childrensbook

    ReplyDelete
  4. Awesome tutorials Chris! I need some thoughts on a dragon? Any Suggestions?

    ReplyDelete