Easily creating variations in trees
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.
The Simplistic Approach
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.
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.
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).
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.
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.
The tree will look a tad more complex by adding leave like shapes instead of circles.
Start with a circles and convert it to a path. Pull out the top node to form the leaf/drop shape.
The more detail and variation you add to the tree to more interesting and realistic it will turn out.
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.
Here are some free trees from the tutorial above.
Download the zip archive
(containing 5 trees as png images and a svg file)
This tutorial is a 16 pages long PDF step-by-step creation of the more trees. It focuses on variations to make your scenes more interesting.
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.
Get the PDF for 0.99 US$