Easily creating variations in trees

Inkscape tutorial

One of the common problems, when I am asked for feedback on art, is the lack of variation. There is one stone tile, one grass tile, and one tree. The same objects are repeated again and again. Easily make your levels more interesting with variations.
The big advantage of doing vector art is the ease to create variations by rearranging the shapes that make up a new object.

For this tutorial, I picked trees as an example of what you can do with added detail and variation. I will try and show, how to create some simple but effective variations. In the process, I will go from very simplistic/minimal to very complex and detailed. Both styles have their place and use.

In general, more detail and variation adds to a more realistic look and feel.

2Dgameartguru inkscape toolbar

The Simplistic Approach

2Dgameartguru - spacer
2Dgameartguru - creating trees

Start with a circle and a rectangle.

Put them together and we have our basic tree. To be precise, you can use align to centre the trunk.

Duplicate the shape and scale them a little. With very little effort we have some woods.

It might not be the most artistic tree but in the right context it can work.

I have used it in some of my games in the past for the far distance. It’s easy to add some variation by rotating the trees just a little bit.
One type of tree still looks a little boring.

2Dgameartguru - creating trees
2Dgameartguru - creating trees

Let’s add a fir tree by creating another rectangle. For the triangle I use the line tool.

Mixing the two trees already gives the scene a different feel. I also changed the trunk on some of them by scaling the rectangle.

Let’s continue with the fir and add a few more triangles to give it more detail.

Two duplicated triangles and a bit of scaling later the tree is starting too look more interesting.

Scale the triangles less evenly and alter the angles to make it look more unique.

2Dgameartguru - creating trees
2Dgameartguru - spacer

Using the simple trees worked fine in this scene which is a section of the game over screen of ‘Little Viking – Dungeon of Doom’ (a puzzle game I did with Utopian Games in the UK).

2Dgameartguru - spacer
2Dgameartguru - creating trees - sample image
2Dgameartguru - spacer

Note:
In the sample images I set the colours of the ground first and use the colour picker to assign the same colour to the trees.

2Dgameartguru - spacer
2Dgameartguru inkscape toolbar

Added Detail

2Dgameartguru - spacer
2Dgameartguru - creating trees

Let’s apply the same idea to the first tree by duplicating the circle a few times…

… and then even some more. Change the colour of the trunk and add some triangles for roots.

To give the tree some simple shading add a bunch of lighter and darker circles.

Adding some more circles in the base colour ‘disguises’ the shading circles and makes it look more interesting.

2Dgameartguru - creating trees
2Dgameartguru - creating trees

The tree will look a tad more complex by adding leaf like shapes instead of circles.

Start with a circle and convert it to a path. Pull out the top node to form the leaf/drop shape.

2Dgameartguru - spacer
2Dgameartguru - creating trees
2Dgameartguru - spacer

The more detail and variation you add to the tree to more interesting and realistic it will turn out.

Note:
I like to create ‘clusters’ of objects – eg. take a few leaf objects and group them in a bunch – pointing different directions. Duplicate the group to place a lot of leaves a lot quicker. By mirroring, rotating, scaling and overlapping the groups they will look less like the same object. 

I hope you enjoyed this. It’s a great subject to play with and create unique trees and variations of trees and other vegetation quickly and easily.

2Dgameartguru - spacer

Here are some free trees from the tutorial above.
Download the zip archive
(containing 5 trees as png images and a svg file)

2Dgameartguru - spacer
2Dgameartguru - special tutorial PDF - trees

This tutorial is a 16 pages long FREE PDF step-by-step creation of the more trees. It focuses on variations to make your scenes more interesting.

Note:
The PDF can be opened in Inscape (or other vector tools) and the shapes are fully editable.
You can use the art in your personal and commercial projects as long as you don’t sell the art as is or in a bundle.


Download here!

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