How to create an isometric illustration

Among the many styles of illustration, isometric illustrations have been standing out a lot these last few years for the uniqueness it can bring to a composition. 

Isometric illustration, or isometric projection, is a technique that is intended to produce illusion of depth and perspective without distorting the object’s main dimensions. It’s a projection in which the three coordinate axes (X, Y and Z) appear equally reduced and the angle between two of any of the axes will always be 120 degrees (“isometric” means “same measure” in Greek).

In other words, it’s a simple way to represent a 3D element with a 2D illustration. All three visible sides of the object are represented equally, with highlight, midtone and shadow depending on the direction of the light, giving the illusion of depth.

On Gravit Designer’s Welcome Screen, leave the Width and Height fields empty and click “Create!” to create an infinite canvas.

With nothing selected, you can see the Grid options at the bottom of the Inspector panel on the right. Toggle the Isometric grid.

Gravit’s Isometric grid can be have its size and angles adjusted by editing Size, Angle 1 and Angle 2.

For this tutorial let’s leave Size at 5, Angle 1 at 21° and Angle 2 at -21°.

With the Isometric grid set up, it’s up to you to create anything following the grid lines. For this tutorial, let’s create a living room.

Don’t forget to toggle “Snap to Grid” on the Snapping options (clicking the small arrow right next to the magnet icon) at the toolbar. You might want to toggle off the options “Snap to Full Pixels”, “Snap to Shapes” and “Snap to Pages” for this illustration as you don’t want your Snapping going too crazy, focusing only on the Grid.

Let’s start by creating the walls. Select the Pen tool (P) and create a rectangle following the Grid so that this rectangle is in the correct perspective.

Create the second wall and also the floor with the Pen tool, following the same perspective. Add some color, but don’t worry about choosing a final color palette yet.

Time to start creating some details for the living room, like a window and some furniture. You can check some images for inspiration on what to create. Start by adding a window to the left wall with the Pen tool.

Because of the perspective of the illustration, you need to add the depth illusion to most of the elements. In the case of the window, this means showing the inside of the wall that would show at the bottom and at the right side.

Tip: the Isometric Grid doesn’t have to be toggled on all the time. As long as you follow your main lines, you will get the right angle. You can turn the grid on now and then as a guide to check the inclination of your paths.

Next let’s add a couch. This couch is just a series of rectangles following the grid perspective and scheme of highlight/midtone/shadow shown earlier.

Place the couch properly as if it were with its back to the wall of the living room. You can add a little more details by adding wooden feet to the couch. Using the Pen tool, create small lines and set the ends

Continue reading

This post was originally published on this site