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.
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).
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.
Added Detail
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 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.
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.
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 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.
Hi Chris,
I am following you for a long time and I like your work very much. Actualy I can see that you are starting to make these 99 cent tutorials and I like them too. An now my wish: Can you please make such a tutorial for spaceships and/or spaceship interior. That will be a great thing for my next project…
best regards
Stefan
coool, i'm amazed O.o
Thanks again. Both this and the first one have helped me tremendously.
Perfect, I'm enjoying these 99c PDF's, keep up the great work
These 99c PDFs tutorials are great, I think they are better the other free tutorials. You cover more topics in these tutorials. Continue with the good work.
Hi Chris,
your free tutorials are great, I love them! and these detailed 99cent tutorials are a good idea too, they make a perfect combination!
I reply Stefan comment because i want to add myself to the spaceships or space tutorials request.
Everything related to space is good material for making fun games! Space backgrounds, different aliens, spaceships, planets, top view, isometric, side view… I'm sure it's interesting for a lot of game creators out there and sure it is a wide enough topic for several free and 99cents tutorials.
thanks for your great blog!
Noel
Hi Stefan, hi Noel…
It looks like I don't have a choice but do somethings space themed… Luckily I already did start on a spaceship construction set and have done space backgrounds in the past… ;)
It will be fun to do this again.
Spaceship Construction Set??? Sounds great, please let it be CC0, that will be awesome! You ROCK!
Chris what it the technique you used to add the gradient to the backgrounds? It looks like there is a fine mist which looks awesome. I purchased your file but it doesn't appear you included the top picture where you used the gradient technique. Or is it just you messing with the opacity? I'm messing around with it myself now but just wondering what you did specifically. thanks!
Great job and explanation.
It's a combination of alpha and lighter colours. I will write a quick mini-tutorial for it – as you are not the first one to ask. Obviously it's worth explaining.
Awesome! Thanks Chris! I know everyone else has said it, but thank you so much for these tutorials. I have zero background in art/drawing, and I can't believe what I'm able to make with your clear teaching. If you ever decide to come out with a pdf with a full course in all of this in great detail, I will be the first to buy it! I have been purchasing your pdf lessons which are a steal for a dollar. Looking forward to the lesson on the backgrounds.
Hi Chris,
is it possible for you to do something like this? Or a tutorial for it?
https://s3.amazonaws.com/ksr/assets/001/145/493/240a154e5ea28df9d8be0d9f40ef91b4_large.jpg?1381722151
May it gives you an idea of what we are all looking for^^
wish you a happy day
Stefan
I love your tutorials, a suggestion. create a pixel art special tutorial with inkscape.
Start with a circles and convert it to a path. Pull out the top …..
I'm doing something wrong .. it doesn't look like your's
mine is an egg and your's more pointed, could you tell me what I'm doing wrong?
Once you pull out the node… and create the egg, convert the node to corner [sharp point] and move the handles done. Sorry… It's something I did cover in early tutorials and didn't repeat here.
Hi,
A new reader here. Is there a list of *all* your PDF tutorials?
There's just two pdf tutorials so far – the skyline and the trees – with the next on in the pipeline.
Bought both ..Love them! keep them coming !
I bought both too. Fantastic resource and nice tricks.
I can't belive it when I see the scissors XD
Will buy more of them ;)
spaceship spaceship spaceship! i would really pay for it. Hope it comes soon, cheers :)
im jayvee (j.gipal.monleon@gmail.com) i've already buy your 0.99 USD tutorial(the tree and the city skyline ).. can you make more tutorial for 4 or 8 direction rpg style character..