Designing Explosive Expressions

Inkscape tutorial

This tutorial started out with some illustration request. I got a little carried away with the facial expressions I could add to a simple bomb. As a result, I thought I might just share the fun. It turned this tutorial on “Designing Explosive Expressions”.
Like most of my tutorials this one starts with basic shapes – circles and squares and simple lines. If you are new to the tutorials it might be helpful to read from the beginning. Check out the basics. Even though they are not in a special order some of the skills used here have been explained in a more detailed way in earlier posts.
2Dgameartguru inkscape toolbar

Designing a Cartoon Bomb

2Dgameartguru - spacer
2Dgameartguru - explosive expressions

First of all, let’s start with a black circle and a smaller rectangle.

Secondly, Add a curvy line for the fuse. This lines just has 4 nodes and a medium thickness for the stroke.

Convert the lines to paths (Path/ Stroke to Path) in order to add a stroke to the fuse.

Move the objects in place and add some curve to the top rectangle to match the curve of the main shape.

In order to make the bomb look interesting I chose two lights with the primary light in a bright orange colour.

2dgameartguru - explosive expressions
2dgameartguru - explosive expressions

In order to do this, (rather plain shading which will be mostly hidden by the detail added on top of it) duplicate the black circle and scale it down. Give one a gradient fill from a orange to transparent and duplicate it with a grey gradient.

Repeat the duplicate, scale and gradient fill on the rectangle shape.

Create another duplicate of the circle, scale it down even more than before and duplicate this circle to use the 2nd circle to cut the white shape into a crescent. With 50% transparency it gives a nice shine.

Add a rotated duplicate of the crescent in grey in the lower right and some detail to the fuse.

2dgameartguru - explosive expressions
2Dgameartguru - spacer
2Dgameartguru inkscape toolbar

Adding Expression

2Dgameartguru - spacer
2Dgameartguru - explosive expressions

With the basic bomb done it’s time to add the facial features.
Let’s start with some cartoony eyes made up of a few circles.

Add another circle for the mouth. ‘Squash’ it and move the central nodes down.

Add a duplicate with 50% transparency below.

Add another circle to give the eyes some ‘sockets’. Deform the nodes to make it look like raised eyebrows.

A duplicate of the shape in a grey and put behind the black original makes it show on the black base.

2dgameartguru - explosive expressions
2dgameartguru - explosive expressions

Change the colour of the base of the eye to a dark yellow with a lighter duplicate inside makes them look less harsh.

Create a rectangle for eyelids to add expression to the eyes. Move the nodes to fit the ‘socket’ shape and the angle of the slant.

A lighter copy of the mouth shape brings some depth to the lips and shows them better on the dark back-ground.

2dgameartguru - explosive expressions
2Dgameartguru - spacer

Finally, with the basic elements in place it’s a matter of working out the expressions you are after… Adding different mouth shapes, squinting or enlarging the eyes.

Note: 
I will add a page or two with the facial expressions here soon. For now I want to finish another tutorial I have been dying to complete first – a cartoony helicopter to take me back to one of my favorite jobs (doing the (pixel) art of HeliAttack 3 in 2005).  

I hope you enjoyed this as much as I did. Honestly, I really missed doing tutorial art and writing these little posts.

2Dgameartguru - spacer

Download

Get the art (png files) of this tutorial for free!

As a special treat to make up for the long time between tutorials I uploaded the explosives as PNG-images in 256×256, 128×128, 96×96 and 64×64 pixels to be used freely in your projects.

2Dgameartguru - spacer