Achieving a Wood Material in Vectors

Inkscape Tutorial

This is another quick request tutorial on achieving a wood material in Inkscape. I played around with it a little and found a rather easy and quick way to create the desired effect.
In the future, there will be more requests coming. These include animals, weapons and explosions. Right now, let’s focus on wood grain and the colours to chose for your wood material.
To get a semi-realistic colourscheme to start with, I searched on the world wide web for some reference image and decided on an image of light wood.
2Dgameartguru - spacer
2Dgameartguru inkscape toolbar

Starting with the Wood Material

2Dgameartguru - spacer
2Dgameartguru - achieving a wood material

Start with a rectangle and skew it.
Click on the object to bring up the rotation-deformers and choose one of the sides to move.

Note:
Holding CTRL while skewing gives you fixed angles.

2Dgameartguru - achieving a wood material
2Dgameartguru - spacer

Create a square and assign the base colour [usually the lightest colour you picked].
Add some lines with the straight lines tool or to match them perfectly use a duplicate of the square and convert it to a path, break the right hand nodes and delete them. Only the left line will remain.

2Dgameartguru - achieving a wood material
2Dgameartguru - spacer

Combine the shapes with the Path/ Union option (CTRL + +) and add more nodes to the lines. Select a row of nodes, convert the lines to curves and move them slightly to create an uneven pattern.
Break the lines apart via Paths/ Break Apart (Shift + CTRL + K) and variate the stroke width and shape.

2Dgameartguru - achieving a wood material
2Dgameartguru - spacer

The lines just change a little from on the next. Convert the lines to paths (Path/ Stroke to Path).
Use the colour picker and assign a colour to the line shapes.
Add more variation to the lines by adjusting the thickness of the lines.

2Dgameartguru - spacer
2Dgameartguru inkscape toolbar
2Dgameartguru - achieving a wood material

There is no need to move every node as long as you achieve a less even pattern.

Blend the pattern in with the background by altering the fills alpha setting.

2Dgameartguru - spacer

Creating Variations of the Wood Material

2Dgameartguru - spacer
2Dgameartguru - achieving a wood material
2Dgameartguru - spacer

Using plain coloured backgrounds and keeping the top and bottom nodes unchanged allow the creation of seamless tiles (placing them next to each other they should connect without visible breaks).

Adding gradient shading, gloss and highlight shapes works well when illustrating a set piece of furniture, flooring or even as a tree bark pattern.

2Dgameartguru - achieving a wood material
2Dgameartguru - spacer

Here is a sample of a game I am working on. I used the elements and this technique the UI panels as well.

2Dgameartguru - achieving a wood material
2Dgameartguru - spacer
Ultimately, it comes down to your imagination. What kind of wood do you want to achieve. Check google images for samples and ideas. Pick the colours to match your game. Not always do realist colours work best. Sometimes it’s about the texture more than the colour. E.g. a red door can still have a wood texture to give it character.
Play around with the technique and enjoy creating vector art!

Get the source art (svg file) (not including the art files of the pirate sample) of this tutorial for free.