"Life is too short to make bad art."

Tuesday, March 13, 2012

Basic shading - the ball

This has to be one of the most requested tutorials has to be on shading. How do you do it? Why do it? Where do I add shadows and what colours do I use? Lighting is vast area and the possibilities are shear endless. In this tutorial I tried to cover the absolute basics with one of the simplest shapes - the ball.
If used correctly light and shadow will make your scene / object look a lot more spectacular, real and visually appealing. 

Let's start with a circle - I know this must be the 100s time I have written those words - but it's still the easiest object to work from.


The result is not realistic and not overly cartoon like. If you aim for the latter cell shading with 2 to 4 colours will do the trick. To get the ball to look more realistic the highlight elements would require more work - and a Google image search for something like Christmas decoration. 

Let's take a quick look at the effect of changing light on our ball.


As the ball gets closer to the light source the effect of the light should be stronger - lighter highlights and darker shadows with the effect of the secondary light source less visible. 

One question I have been asked a lot concerns the choice of colours. The very basic shading would be by simply using white for the highlights and black for the shadows. In my opinion the result usually looks dead and cold. I prefer warmer light and my favorite shadow colours are dark purple or dark brown (with adjusted alpha). That way you get warmer tones and more lively colours. 

Then again the scene you are trying to influences  the colours of your light and shadows. E.g. an underwater scene would look very odd with brown or red shadows - you would choose a white/ blue/ green colour-scheme. A summer afternoon would have a light yellow/ gold/ dark brown or deep red palette - while a winter's day would have white/ blueish grey and black. 

Here are a few examples of the effect colours have on the shading of an object. 


In the end it's a matter of playing around, finding the right light to set the mood for your scene and then stick to it for all the objects in your scene. Have fun with it! Try to find something that enhances the mood and the atmosphere you are after and don't be afraid to try 'odd' colour combinations.

Note:
If you create game assets keep changes to the scene in mind. To avoid having to create dynamic lighting - which looks awesome but is a lot of work on the coding as well as the art creation side of things - I would suggest sticking to a standard light setting (e.g. top down - that way flipping a character horizontally to walk in the opposite direction does not mean creating new assets to keep the scene looking consistent). It can also be very helpful to separate the shadows form the objects for allow jumps and walking on non-horizontal surfaces to look right.  

I hope this was helpful so far and I plan to add to this tutorial in future with some more advanced objects and more complex shapes. Enjoy!

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

8 comments:

  1. Awesome, cheers!

    ReplyDelete
  2. You rock, as always. Thanks for your tutorials!

    ReplyDelete
  3. Nunca pensei que iria achar tutoriais tão simples de Inkscape.
    Eu sou leito em edição vetorial mas por aqui já até consegui desenvolver um cartão.
    Tenho planos de criar graficos novos para um jogo open source que jogo, continue com o belo trabalho!
    Parabéns!

    ReplyDelete
  4. Thank you for the tutorials!

    ReplyDelete
  5. Hi, thank you very much for your amazing tutorials in this blog. I stopped game development because I did not know how to draw these stuff and this blog gave me a tremendous amount of hope :)

    I have one request please, you know as a programmer we do not have that gift which allows us to draw something from scratch, or even imagine a concept. So we need a guide like a real photo. Could you please write a tutorial on how to vectorize/cartoonize an existing photo? like a real face, building, or a car like the one in this photo for example:

    http://2.bp.blogspot.com/_J3_liDBfbvs/SwftYVxz45I/AAAAAAAAQMw/IsIkiQ3C5JU/s1600/2010-BMW-Z4-Side-View.jpg

    In Adobe Illustrator when I 'Live Trace' it.. it creates TONS of paths and does not look good, does not look shiny/polished. I think I have to manually trace/sketch it but when I do so I get confused about how much paths I need to draw to give each one a different colour, how to colour it, how to finish it.. etc and I always end up with a shadow photo of it! Please help, thank you very much.

    ReplyDelete
  6. Look at this amazing VW :(

    http://fc06.deviantart.net/fs44/f/2009/076/4/3/VW_DragBus_Destroyer_Carbon_by_M2M_design.jpg

    How to make a one like it based on an existing ugly real raster photo as a guide?

    ReplyDelete
    Replies
    1. Jad, the problem is the gradients - vectorizing tools can't understand gradients. They will go with similiar colours and shades and form a more or less complex object around them those. With the BMW Z4 for example it's a matter of defining the shapes manually - redrawing of them and then adding detail, shadows and highlight.
      It would make a great tutorial... I will have a think about it for sure.

      Delete
    2. Thank you very much. I will keep trying tracing/drawing it manually while waiting your tutorial please, thanks for your reply.

      Delete