Note: This tutorial is also available as a youtube video.
Having fun with squares
The second tutorial is another introduction to basic shapes in Inkscape. This time we are going to have fun with squares. We turn them, scale them, bend them, round them off and rearrange them to create complex shapes.
Start by creating a simple square.
Take the square, duplicate (CTRL+D) and scale it. By using the bottom modifier we keep the new square aligned.
Add another square to the design and round the edges by altering the Rx and Ry values.
Duplicate more squares to add detail. Convert them to paths ( Shift + CTRL + C ) and alter the nodes to deform them.
Add another square without rounded corners and rotate it 45 degrees.
After converting it to a path, use the node tool to elongate the diamond shape.
Duplicate it with varied sizes and rotation.
Add a lighter square at the top to create and deformed copies of the rock to create highlights.
With all the core elements in the design, we can easily create variations to make the platforms look less repetitive.
The biggest advantage of using vectors is the ability to quickly change the design. With all the elements in place, it’s a breeze to rearrange, recolour and design variations. When creating blocks, tiles or props for a game I try to make a few similar elements. It will look more interesting and less repetitive in the game later on.
A variation of the common tile is the wooden crate. Start with a square again.
After adding two smaller duplicates of the squares, duplicate them again to create boards.
Add some highlights by placing elongated rectangles in a lighter colour.
A little decor added after and we end up with a quick and simple element for a 2D game.
By combining those basic shapes it’s easy to create a simple platformer game. Add more variations to the tiles (e.g. the corner pieces or some simple plants or diamonds to pick up the game will quickly come to life).
Get the source art for this tutorial [.svg/ .pdf] for free!
The outline version might look somewhat messy. Nevertheless, it shows that the whole scene is made up of nothing but squares and deformed rectangles.
Let’s have a look at a more complex design using the same principle. This castle scene is based on square shapes rotated, scaled, some with modified nodes or rounded edges.
To illustrate this, let’s strip the colour off from the image and show the shapes as outlines. As you can see even seemingly complex scenes can be reduced to simple geometric shapes.
Get the source art (SVG, PDF, AFFINITY & CDR file) for this tutorial for free!
This concludes the second post. I hope you have fun trying to recreate some of the tutorials yourself or just play around with Inkscape, gimp & co.
…and please let me know what you think about the tutorials, tell me what you would like to see featured or would like me to change.