Shading Rocks and Stones

Inkscape Tutorial

How to create rocks and stones? Why does my shading look like clouds?  These were some of the questions posted. I came up with a few options to shade stone in Inkscape. Resulting in, what I hope is a helpful tutorial.  I wrote a basic tutorial on shading earlier that might be helpful as well.
(I am still reworking the space tutorial. It’s not been forgotten.)

The common mistake when creating shading is using ‘pillow shading’, where the shading is same in all directions, same amount of darkness and distance to the edge. It will look smooth but unbelievable for anything harder and more edgy than clouds or pillows.
In this tutorial I use three different styles of shading:
– through interpolation,
– with lighter and darker shapes [cartoon shading] and
– using transparent gradients
Note:
I forgot to use the easiest of all for the rounded rock, which would be a radial gradient. Gradient shading [linear or radial] can be very effective but tends to look off as soon as the shapes become more complex.
2Dgameartguru - spacer
2Dgameartguru inkscape toolbar

Let’s get started…

with a simple rounded rock, pebble, boulder, whatever you want to call it.

2Dgameartguru - spacer
2dgameartguru - shading rocks and stones

Let’s start with a circle.

Convert it to a path and move the lower nodes in and make the side ones to corners.

Create a copy and scale it down for the lighter shade of the rock.

Colour the rock shapes and use the interpolate to create a smooth gradient. (Extension/ Generate from Path/ Interpolate)
The higher the step count the smoother the ‘gradient’.

Add a lighter copy of the small shape with gradient transparency for more highlight…

2dgameartguru - shading rocks and stones
2dgameartguru - shading rocks and stones

and some lines as veins to make it visually more interesting.

When creating a group of rock keep the direction of the light in mind.

Another way to shade the rock is by using less shapes for harsher edges.

Deform the inner shapes to form some roundness.

Adding another shadow shape to give the edge more depth.

2dgameartguru - shading rocks and stones
2Dgameartguru - spacer

Note:
For the veins I used the freehand draw tool, with a white stroke that I ended up putting into a clip to match the shape of the pebble.

2Dgameartguru - spacer
2Dgameartguru inkscape toolbar
2dgameartguru - shading rocks and stones
2Dgameartguru - spacer

Duplicating and scaling the rock allows for easy variations. By adding darker shades or colour the look of the rocks can change dramatically.

2dgameartguru - shading rocks and stones
2Dgameartguru - spacer

I used the same shapes in different colours and scaling and rearranged them to form unique groups.

2dgameartguru - shading rocks and stones
2Dgameartguru - spacer

When working with outlines in your art style, add an outline to the biggest shape. Colour it darker than the shadow shape.

2Dgameartguru - spacer
2Dgameartguru inkscape toolbar

Rock Shape Variations

Another shape commonly used for rocks is a lot more edgy and clear cut. I worked mainly with the straight line tool for this one. The shading of the rocks and stones is mainly done with transparent gradients. You can also start with the square, make it a path and add nodes to it, if you find that approach easier.

2Dgameartguru - spacer
2dgameartguru - shading rocks and stones

Using the straight line draw a rough boulder shape.

Colour it and make two smaller and lighter duplicate copies.
Define the light direction and move the lighter shapes accordingly. Adjust the nodes to create a lighter top and darker sides.

Add more shapes for added detail.

Create the highlights at the top and at the edge using the straight line tool.

Shading the elements is easiest by choosing a lighter/ darker colour and adjusting the opacity.

2dgameartguru - shading rocks and stones
2dgameartguru - shading rocks and stones
2Dgameartguru - spacer

As with the rounded rock it’s all about variation. Copy your initial rock and modify it. Move elements, add or remove details, change the colours and the size.

Another way to shade the rock is by using less shapes for harsher edges.

Deform the inner shapes to form some roundness.

Adding another shadow shape to give the edge more depth.

2dgameartguru - shading rocks and stones
2Dgameartguru - spacer
2Dgameartguru inkscape toolbar

Sharp Edged Stones and Rocks

This style gets shaded with a gradient. A shading colour is going from full colour to full transparency.

2Dgameartguru - spacer
2dgameartguru - shading rocks and stones

Nearly the same principle applies when creating more complex formations.

Using the straight line tool draw the rock shape and make a mental note about the light direction.

Still using the same tool add shapes that create to top of the rock.

Use a transparent gradient in the fill to hide the bottom edge of those shapes.

A duplicate of these shadow shapes creates another edge to the rock.

Additional shading might be needed to define cracks and gaps in the formation.

2dgameartguru - shading rocks and stones
2dgameartguru - shading rocks and stones

and some lines as veins to make it visually more interesting.

When creating a group of rock keep the direction of the light in mind.

Add detail like small cracks more highlight or texture to make it more interesting.

Putting all the variations [in this case just seven different shapes] together allows you to create interesting and unique rock combinations for your environment.

2dgameartguru - shading rocks and stones
2Dgameartguru - spacer
2dgameartguru - shading rocks and stones
2Dgameartguru - spacer

Shading Rocks and Stones Conclusion

I hope this tutorial on shading rocks and stones made sense. Ultimately, enough sense to enable you to create and shade rocks and stones on your own. Enjoy doing it, bend some vectors and have fun!


Get the source files [svg and pdf] for this tutorial for free!