Creating depth through layers

Inkscape & Gimp tutorial

This is a tutorial answering a question I received after the trees post. It’s about creating depth in your background using blur and transparency. It’s a joined Inkscape and Gimp tutorial.
2dgameartguru - creating depth with layers

Start with the scene in Inkscape and make sure you layer the file to create the different planes. Grab the file here.

2Dgameartguru inkscape toolbar
2dgameartguru - creating depth through layers

At the very bottom of the layer stack is the sky gradient.

Next up the trees furthest away…

2dgameartguru - creating depth through layers
2dgameartguru - creating depth through layers

…followed by the mid-ground…

and the foreground.

2dgameartguru - creating depth through layers

We start out with a simple 4 layer background scene. A gradient sky and three planes of rolling hills with a few trees. The Inkscape file to this tutorial can be found here. When creating your own scene make sure you change the colours slightly to make the planes stand out and be distinguishable. When exporting to png making sure you have the transparency turned on.

You can create the blur right in Inkscape by using ‘Filters/ blur’ and then e.g. a motion blur. In the filter properties you can set the effect parameters. Setting them both to the same value turns the motion blur into a even blur.

Usually, I personally prefer the ‘cleaner’ approach and keep the vectors non-blurred. The effects are added in a bitmap program for better control.

Open Gimp or the bitmap editor of your choice (as long as it allows layers and blurring) to stack up the bitmap layers.

2Dgameartguru gimp toolbar

Blurring in Gimp

2dgameartguru - creating depth through layers

Start by opening your sky background layer file in Gimp.

Import the planes into the file via ‘Open As Layers’ [CTRL + Alt + O] or simply drag them into the image.

2dgameartguru - creating depth through layers
2dgameartguru - creating depth through layers

Select the most distant plane and blur it [Filters/ Blur/ Gaussian Blur].

I chose a setting of 20px horizontal and vertical blur.

Select the next plane and repeat the blur with less pixels.

I chose 10px for the 2nd plane.

2dgameartguru - creating depth through layers
2dgameartguru - creating depth through layers


When using more layers like in the purple example the furthest layers in the background will have the highest blur values and the lightest colours (you can even work with transparency here and make the blend into the sky/ background).

This workflow does work for all sorts of layered/ stacked backgrounds – not just trees and hills. You might want to try it with skyline, houses or an industrial complex with lots of pipes. It should make for a cool effect.

Get the source art (svg and pdf) for this tutorial for free!

2Dgameartguru - creating trees
2Dgameartguru - creating depth through layers