2Dgameartguru - revisiting with smooth shading - main tools2Dgameartguru - spacer
Updating and shading the dinosaur

Inkscape Tutorial

This tutorial shows the process of updating and shading the dinosaur design in Inkscape. I revisit one of the old tutorials:¬† a dinosaur based on circles and squares. It’s part of the tutorials I am updating for more polish and smoother shading. Ideally, I will continue with the stone age man from the animation tutorial. Ultimately, I hope to make a few new videos of the process to show the ease of creating the updates. For now, I want to start with some smooth shading and detailing of the dino to take the design to the next level.

Before we start

Let’s quickly look at the main tools. The most used function in these ‘polishing’ tutorials will be the clipping of elements. I love to keep things inside shapes – to group them, to restrict them, and yet be able to easily edit them. If you are unsure about the clipping or clipping groups, have a closer look at the topic [my tutorial is more than a wee bit outdated]. Another favorite of mine is the tapered stroke. Using the path effect to turn the ends of a stroke thinner. It’s very versatile when it comes to rim lights, folds, or odd strands of hair. Combine it with blurring and different blend modes (‘Multiply’ to darken and ‘Screen’ or ‘Overlay’ for highlights). Those are the key tools for this tutorial.

2Dgameartguru - revisiting with smooth shading - main tools2Dgameartguru - spacer
2Dgameartguru Affinity Designer toolbar

Shading the dinosaur

2Dgameartguru - spacer
2Dgameartguru - revisiting with smooth shading

Firstly, change the eye to a gradient on the iris. Next up is a blur on the white and added shape for some rim light.

Smaller circles in a lighter eye colour set to ‘Overlay’ give detail to the iris.

A shadow is cast by the brow and goes on top. Finally, place all shapes into the grey circle as a clip for easier layering.

Secondly, update the head shape. The base gets a few more nodes at the bottom for the teeth. Make it look more interesting and dynamic. Create a darker and slightly smaller duplicate for more contrast. Blur the shadow of the eye and set it to ‘Multiply’.

Add a shadow shape at the bottom right to give the head more depth.

2Dgameartguru - revisiting with smooth shading
2Dgameartguru - revisiting with smooth shading

A duplicate of the nostril [with a blur] adds depth along with light shapes on either side [also blurred and set to ‘Screen’]

A deformed circle makes the corner of the mouth – with a duplicate as the highlight.

Circles [set to ‘Multiply’] add more detail.

Repeat these steps on the brow. Blur the highlight, duplicate the base, set it off a little, and blur it. Darken the original’s colour a little to match the shadow’s shades of the skull.

Finally, finish it off with some detail. Place small dots/ circles on top. Set their transparency to different levels [20% – 40%] and set the blend mode to ‘Multiply’.

2Dgameartguru - revisiting with smooth shading
2Dgameartguru - spacer
Inkscape toolbar

Updating the smaller shapes

2Dgameartguru - spacer
2Dgameartguru - revisiting with smooth shading

The same process is applied to the teeth and the bumps on the head. Next, add the highlights, blur them, and create some additional shadows. These are done with simple vector shapes with a blur and set to ‘Multiply’.

Put all the shapes together after shading them. The updated head has more depth and detail.

2Dgameartguru - revisiting with smooth shading
2Dgameartguru - spacer

The updated dinosaur before and after

2Dgameartguru - spacer 2Dgameartguru - revisiting circles with smooth shading 2Dgameartguru - spacer

As usual, I enjoyed revisiting this old tutorial and it was good fun updating and shading the dinosaur design with a few easy steps. Simple edits and additions can take a design to the next level. Time polishing your assets is usually time well spent.
Hopefully, you can use some of the processes in your own creations. Have fun with Inkscape and design with passion!

2Dgameartguru - spacer

Shading the dinosaur design

Download the file here:
Dinosaur updated.zip

or check out
OpenGameart.org
for more useful assets.