How I became an Illustrator by discovering a new dimension

I never studied design. I am an Engineer, that too a nerdy one from one of the badass schools in India. Contrary to the stereotypes which tag engineers as monotonous and boring, my profession has the creative side to it. I am a Designer working for Swiggy, India’s largest food ordering and delivery platform.

While I have a decent sense of visuals (I mean, I know which pair of shoes to wear with which T-Shirt etc. ?? ), I am more of an interaction designer, i.e. the guy who brainstorms, builds product features, creates UI flows, analyses user behaviour etc.

Well, I do illustrate when I need to, but I haven’t reached the level where I can stretch my neck and call myself an — ‘Illustrator’ (I am improving).

However, I can handle Adobe Illustrator well. I am also aware of most of the tricks it has up its sleeve and I can comfortably draw simple, icon-like illustrations which are functional.

But when it comes to composing a scene or illustrating something aesthetically pleasing, I often find myself lacking. I find it hard to judge between what is essential and what is merely noise.

e.g. When I am illustrating a house, I contemplate a lot! “Should I draw two windows or one?”. “Should I add segments to the door, or will that add unwanted noise?”. “Should I add a chimney to make it more house-like?”.“What should I do so that the house looks more like a shop?” — These do not come to me naturally. The situation becomes worse when I have to compose a bigger, detailed illustration. I somehow fail to get the balance right.

The Discovery

After a bit of research, I discovered that by introducing the 3rd dimension, I can add the desired level of detail to a simple thing, without making it look noisy.

The two extra faces which are revealed in 3D illustrations, make it more relatable to the real-life physical object. It also increases the visual appeal, drastically!

When we look at an object in real life, the brain perceives it in a certain way and distorts it based on the distance and the angle of view. When we mimic this phenomenon in illustrations, it is called Perspective Drawing. To put it in simple words, the sections of the object which are away from the viewer appear smaller compared to the sections closer to the viewer.

Isometric Illustrations

However, there is another form of simplified 3D drawing which I learnt in my engineering school — Isometric.

This form of illustration offers a unique view, perfect for technical drawings.The only thing it lacks is perspective, i.e. every section of the object, irrespective of whether they are closer or farther from the viewer, are represented in the same size. This approach is easier and more practical to adopt.

The Trend

Of late, isometric illustrations have been frequently seen in digital products because they are simple, beautiful and functional… they just work! When I saw them first, I couldn’t believe that they were all done using Adobe Illustrator, a 2D illustrating tool. But now that I know the trick, they seem like a piece of cake ??.

I tried my hands on some; it doesn’t need a Sherlock’s eye to know that the ones to the right look more palatable.

The Trick

It’s called SSR. This can can be mastered only by attaining Nirvana.

Just kidding! ??

So, SSR stands for (any guesses?…) — Scale, Shear and Rotate. Yes, as simple as that. By scaling, shearing and rotating the orthographic projections, we can mimic their isometric counterparts.

Let’s assume we have a square and we need to bump it up to the isometric form. Here’s what we do.

Step 1 : Draw the orthographic projections

The conventional names for these views are Top, Front and Side. But for the sake of this tutorial, I will call them Top, Left and Right views to avoid any confusion.

Step 2 : Apply SSR modifications to the 3 projections

Let’s start with the Top View. Select it from the Orthographic Projections and :

1. Scale the height to 86.602% (Yes, this precisely needs to be 86.602%. Should not be rounded off to 86 or 90)
2. Next, shear the scaled face by +30°
3. Finally, rotate the scaled and sheared face by -30°

Make sure you transform them exactly in this order, or else, the results may be different.

Tada.. We have the Isometric Top Face ready!

Similarly, for the Orthographic Left and Right Views these are the transformations :

Left View

1. Height Scale : 86.602% (remains same throughout)
2. Shear : -30°
3. Rotate : -30°

Right View

1. Height Scale : 86.602% (remains same throughout)
2. Shear : +30°
3. Rotate : +30°

To sum up, here is the master-list of the transformations :

Step 3: Assemble them together ??

Now, in the last and final step, we just assemble the faces together and we are done!

Now you know everything that is needed to make detailed Isometric compositions. Can't believe it? Just give it a try! These are easier than they seem.

PRO TIP 1 : The Scale, Shear and Rotate values can be bundled together and executed in a single click by using ‘Actions’ in Adobe Illustrator. I can write about that in detail, but that’s a different story ??

PRO TIP 2 : The angle-of-view for every isometric illustration is same, because of which, any illustration that you ever make can fit into any composition seamlessly! e.g. I can simply scale down the isometric burger and place it right beside the laptop on the Isometric Desk and voila… it fits in ??

So, are you ready to discover the illustrator that is dormant inside you? By including the 3rd dimension, you have now unlocked the endless possibilities it comes bundled with!

Have fun and do post your work in comments ??

To check out more things I do and discover, follow us on Dribbble.

The original article was posted on Medium on Oct 17, 2017.