#4 Inkscape – Creating trees in Inkscape 2 –

Creating trees in Inkscape 2

Option 3: create trees with the automatic tree creator within Inkscape.

In Inkscape you’ll find awesome methods to create all kinds of random stuff.
One of these is creating random trees.

Just take a look in Extensions > Render > Random Tree…
When you select this option, the following screen appears:

Trees - Random tree window
Play with the initial size and minimum size settings and check the option ‘Live preview’ in order to see which tree Inkscape creates for you.
If you don’t like the tree Inkscape created, just uncheck and check ‘Live preview’ again and Inkscape will draw another random tree.

Example:

Trees - image 1

Select the tree (F1) and add a stroke of 35px (or whatever value you like) to it: menu fill and stroke, tab ‘stroke style’ and change the value to 35px.

Trees - image 2

Then give the tree a color, for instance 008033ff.
One thing to notice: the tree consist only of a stroke, so when you want to change the color of the tree, select shift (to change the stroke color) and then select the color you prefer.
If you change the color manually (in the fill and stroke menu), remember to select the tab ‘Stroke paint’ to change the color instead of the tab ‘Fill’.
Trees - image 3
Inkscape might be responding slow now. If this is the case, convert the image to a path by selecting the image (F1) and the select Path > Stroke to path.

Now we will start using a new tool, the pen tool (select the icon or hit Shift-F6)

Trees - Icon pen tool

To use this tool, simply click on the canvas and let go. Then place your mouse on a new position and click again. Do this until you have something like the shape below.
Note: start at the point left (within the red rectangle), then click the other points. When you return to the first point, put your mouse above it and it will turn red. Then click and you will have a nice closed shape.
Trees - image 4

 

Now select the shape you just created, hold Shift and then select the tree.
Head up to Path > Division and you will see the result as below:
Trees - image 5

 

Now click the trunk and change the color to any (trunk) color you like:
Trees - image 6
While selection the division tool, the bottom of the tree (the leaves) doesn’t look like it should.
To fix this, select the leaves part and select Ctrl-d (this makes a copie of the selected item and places it on top of the item, which of course means you can’t actually see it).

Having this copie selected, flip it vertically (V or icon below).

Trees - Icon flip vertically

At this moment, the tree even looks worse but we’ll take care of that!

Trees - image 7
Select the lower half of the leaves (the copie you just made) and start stretching it.
You can stretch an object by first selecting it. When you have selected it, arrows appear on every corner:

Trees - image 8
When you grab one of these arrows, you can change the dimensions of an object. Hold Ctrl while changing the dimensions in order to maintain the aspect ratio.
Try moving around the object to create a better looking tree. You can also use the arrows between the corners to change the dimension of an object.
Don’t worry if you still see some white ‘gaps’ like in the image below: we’ll fix that.

Trees - image 9
To fill the white gaps, simply draw around them with the pen tool as we did before when separating the trunk from the tree:

Trees - image 10
Now click the object (rectangle) you just created and change the color to the color of the rest of the leaves. You can do this with the ‘fill and stroke menu’, tab ‘Fill’ and enter the color code in the RGB box.
However, you can also do this by using the ‘pick colors from image’ icon (F7).

Trees - Icon pick colors from image
Make sure the rectangle you created is selected. Then click F7 and click somewhere on the leaves. Your rectangle will then be filled with the same color.
Also remove the stroke: to remove the stroke, make sure the rectangle is still selected and while holding Shift, click on the red cross in the bottom left corner (as we did before).

Trees - image 11

 

So far for creating trees.
It’s a good idea to save this file because we will be using it in the future to create an even more realistic tree!

 

#3 Inkscape – Creating trees in Inkscape 1 –

Creating trees

There are several way to create trees with or without Inkscape.

Option 1: an automatic tree creator.
Head to this site to create random trees which can be saved as PNG files.
This site helps you to create random trees which look very realistic. One disadvantage is that the PNG’s you create are quite big.
If you’re developing a game for a website, this shouldn’t be a problem. If you’re developing a game for a smartphone, it’s always wise to keep images as small as possible.

On the right hand side of this website you can choose which leave textures, flowers and wood texture you want to use.
You can select multiple items; for instance choose two or three leave textures which makes the drawing a bit more realistic.

Leave textures

Flowers

Wood texture

You can also add your own images of leaves, flowers or wood texture or add a URL to an image by clicking the +-symbol.

On the left hand side you can adjust several settings before creating a tree:

Parameters creating random trees

TREE
Width
: width in pixels of the image canvas in which the tree will be drawn
Height: height in pixels of the image canvas in which the tree will be drawn
Size and complexity: the overall size and complexity. Can be slow when generating so increase by 1! Lower = younger tree, faster to generate. Higher = grown up tree, longer to generate.
Shadow amount: quantity of shade in the tree. Lower = less shade, faster to generate. Higher = more shade, longer to generate
Shadow strength: how dark shadows are. Lower = light shadows. Higher = dark shadows.
Shadow size: size of the shades. Lower = concentrated shades, faster to generate. Higher = more diffuse shades, longer to generate.

BRANCHES
Length: branches length. Lower = shorter. Higher = longer.
Sub-branches length: branch shortening factor with each sub-level.  Lower  = branches keep getting shorter. Higher = child branches are the same size as their parent.
Angle mean: average children angle relative to their parent. Lower = child branch grows parallel to its parent. Higher = child grow perpendicular to its parent.
Thickness: lower = thin branches. Higher = bulky branches.
Sub-branches thickness: how thinner child branches are relative to their parent. Lower = thinner children branches. Higher = children have same thickness as their parent.
Curvature amount: how curly branches are. Lower = straight branches. Higher = curly branches.
Curvature noise: how chaotic curly branches are. Lower = normal curved branches. Higher = chaotic curves.

LEAVES
Leaves scale: general leaves size. Lower = small leaves. Higher = large leaves.
Leaves scale variation
: how much leaves can deviate from their normal size. Lower = all leaves are the same. Higher = leaves have very different sizes.
Leaves density
: general quantity of leaves. Lower = few leaves, faster to generate. Higher = more leaves, slower to generate.
Leaves local density
: how packed leaves are. Lower = loose leaves, faster to generate. Higher = dense bunches of leaves, slower to generate.
Leaves lighter
: some leaves can be drawn lighter than the others. Lower = few light leaves. Higher = more light leaves.

When you have selected and edited one or more of these items, you can hit the button ‘Draw tree’ in the upper left. Not satisfied with the result? Just click the button once more.
If you’re satisfied with the result, click ‘Save tree image’ just below this button. You’ll then be directed to a new page with your freshly drawn tree on it. Right click and choose ‘save image as’.

Some examples:

Tree 1

Tree 2

Tree 3

Option 2: create trees in Inkscape manually.

You can create (simple) trees manually by combining some circles and rectangles.

First create a rectangle (F4):
Color: c87137ff
Make sure the rectangle has no stroke by holding shift and clicking the red cross down in the left corner (beneath the toolbar).

Tree trunk

Create a bunch of circles in different sizes (F5), hold Ctrl to create perfect circles.
Color 008000ff
Make sure the circles have no stroke by holding shift and clicking the red cross down in the left corner (beneath the toolbar)

 

Tree circles

 

Then place all of the circles together with the select tool (F1): make sure they overlap like so:

image047

Select all of these circles by ‘surrounding’ them with the select tool (F1) and click Ctrl + G.
This will put all these circles in one group so it’s easier to move them and change the color.

image048

Move the group above the trunk of the tree until you’re satisfied with the result.
Make sure this group is ‘above’ the trunk by selecting the group and clicking ‘raise selection to top’ in the (second) command bar:

Raise selection to top

Simple tree

Your simple tree is finished now. In future blogs we will make these trees look more realistic by adding shades, tree roots etc.

The third option, creating trees with the automatic tree creator within Inkscape, will be discussed in the next post.

Enjoy!