Creating Clouds

Inkscape Tutorial

This tutorial is a quick answer to a request about how to make clouds. I have a lot of other tutorial series to finish but this one seemed like a nice little task while enjoying my last day in London.

So… let’s get started with circles… :) Keep in mind that this is just one way to do it and you might prefer hand-drawing them or using the pen tool and creating the curves manually.
I quite often use these ‘quick clouds’ for layered backgrounds – usually with a few layers of mountains, trees or even city skylines on top.

Let’s get started

2Dgameartguru - spacer
2Dgameartguru affinty toolbar
2Dgameartguru creating clouds

When doing clouds in the background of an illustration or game screen you rarely want it to be too detailed as that would cause the background to stand out more.

Here’s a sample from a game I did a while back. A gradient sky with some basic clouds.

Those clouds are really quick and easy to create by starting with a circle. I changed it to an outline with no fill for better visibility.
Duplicate the circle and vary the size.

Note:
If you work on a coloured background you might as well start with a colour fill and no stroke.

2dgameartguru - making clouds
2Dgameartguru creating clouds

Select all the circles of the cloud shape and convert the objects to paths.

Combine them with the Path/ Union [Ctrl+ +] to create just one editable shape.

Select the nodes at the bottom of the cloud.

Delete those nodes to give the cloud a straight bottom.

Change the fill to a white with some transparency [e.g. Alpha of 200] or a gradient with the lower part being fully transparent.

2dgameartguru - making clouds
2Dgameartguru - spacer
2Dgameartguru affinty toolbar
2Dgameartguru creating clouds

As always variation is key. Play around with the shapes and don’t stop with one cloud shape and copy it all over the place.

It’s easy to adjust this style to go for a more detailed and shaded look.

Instead of using a gradient towards transparency at the base try a light grey with a tad of the sky colour in it for the bottom of the cloud [e.g. RGB 220/ 220/ 240 with a blueish sky].

Note:
Angle the gradient a little bit to avoid the lines showing in the gradient when printing or exporting to bitmaps.

2dgameartguru - making clouds
2Dgameartguru creating clouds

Create a duplicate of the cloud shape and fill it with the shading colour with gradient towards a transparent base.

Scale it down a little bit and bring in the nodes that do overlap the original cloud shape.

Create smaller clouds for variation and added shading using a gradient to full transparency to easily stack them inside the cloud shape for added shading.

Offsetting a lighter shade and a darker one on top creates additional highlights and volume for your cloud.

2dgameartguru - making clouds
2Dgameartguru - spacer

Variations

With these basic steps, you can create a huge amount of variations. Try altering the colours, the angles, the number of circles or directs the clouds are pointing to create atmospheric skies.

2Dgameartguru - spacer
2Dgameartguru affinty toolbar
2Dgameartguru creating clouds

Colours can easily work in reverse with a lighter sky and darker clouds.

Try changing the colours for a more alien background with a purple sky and dark clouds or sunset feel in orange with the clouds going dark red.

To add more wind and a more dynamic look to the clouds you can work with more elliptical shapes on one side of the clouds.

2dgameartguru - making clouds
2Dgameartguru creating clouds

There are a lot of approaches to creating clouds.

The one on the left consists of a whopping 550 circles with high alpha that create the shading by being stacked on top of each other.

You can try different angles of clouds to guide the viewers focus or frame the illustration with big clouds on either side.

Try playing around with the idea of this tutorial to find a style you like best.

2dgameartguru - making clouds Show

I hope this will help with the creation of clouds and improve your backgrounds. I had a lot of fun writing it – even with all the other tutorials on my mind and still not being as fit as I would like to be.

Note:
I am still without my main work machine and the better microphone making it hard to record a video tutorial. The laptop I am working on is just not perfect with its extremely high resolution.  Who would have thought I would complain about that one day? 3000x2000px is just too much for my old eyes. :)