Setting up Lights – Basic Shading

Inkscape tutorial

This has to be one of the most requested tutorials: it’s on basic shading and setting up lights. 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.

2Dgameartguru inkscape toolbar

Basic Setup

2Dgameartguru - spacer
2Dgameartguru - setting up light

Start with a circle and a single colour fill.
Note:
It’s a pretty flat circle.

To give it some depth add a lighter duplicate and an even brighter one for the highlight.

To make it even more three dimensional you can use the gradient tool and choose radial gradient.

Changing the location of the light source means altering the position of the gradient’s center…

or in the case of the cell shaded ball – the positioning of the lighter shapes.

Less intense lights mean less highlight and more shadow on the shape.

You can use the same colours but alter the positions of the gradient controlers.

2Dgameartguru - setting up light
2Dgameartguru - setting up light

To achieve a more shiny effect rather than a dull surface, duplicate the circle, scale it down and duplicate

again. Use the 2nd circle to cut the white shape into a crescent. With some added transparency and two highlight we have a shine.

To add visual interest a lot of the time you will find a secondary light source with a different colour. It adds interest and enhances the reflective quality of the object.

2dgameartguru - setting up light
2Dgameartguru - spacer
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. 

Changing the light

 
Let’s take a quick look at the effect of changing light on our ball.
2Dgameartguru - spacer
2Dgameartguru inkscape toolbar
2Dgameartguru - setting up light

Along with the highlight the shadow changes according to the position of the light.

The shadow ‘grounds’ the object. It’s the connection to the surface it sits on.

Without the shadow the object looks like it’s floating and kind of suspended in space.

Create duplicate shapes and colour them dark purple. Set the opacity to 25% (either in the Fill & Stroke window or in the lower left next to the colour).

Alter the nodes to deform them. Turn the left and right nodes into corners.

2Dgameartguru - setting up light
2Dgameartguru - setting up light

Try different variations of the highlights e.g. a sequence of crescents.

Different intensity of light can cause brighter highlights but also darker shadows.

A popular light effect is the ‘glass effect’ with a smooth alpha gradient on a shading shape (a smaller duplicate of the circle with a wave).

2Dgameartguru - spacer
2Dgameartguru - setting up lights
2Dgameartguru - spacer
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.

Colour

 Here are a few examples of the affect colours have on the shading of an object.
2Dgameartguru inkscape toolbar
2Dgameartguru - setting up light

A white light with a black shadow colour looks very cold.

Turning the light into a very light yellow and the shadow colour into a dark red feels a lot warmer.

Here the yellow is darker and the shadow is a purple colour.

A bright light causes the object to appear lighter and shadow gets darker…

…while less light in a dark scene causes the gradient colours to be very similar.

The light can also also reflect the setting (e.g. late afternoon in autumn with a warm orange light)

2Dgameartguru - setting up light
2Dgameartguru - setting up light

To add to the complexity of lighting an object there is the indirect light. That’s the light that bounces off the surface of other objects e.g. the white table top.

Using two light sources can make an object look more interesting…

as you add more light sources it becomes more confusing…

2dgameartguru - setting up light
2Dgameartguru - setting up light

and finally just not visually ‘readable’ anymore.

2Dgameartguru - spacer
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, PDF, AFFINIT & CDR file) of this tutorial for free!
2Dgameartguru basics - circles
2Dgameartguru basics - squares
2Dgameartguru basics - shading
2Dgameartguru basics - align
2Dgameartguru basics - picking colours