Illustration Teardowns: Soulful Isometrics

Some Isometrics are so passé, but not these babies…they got soul!

Illustration Teardown—Peeling Away the Layers—by Rob Levin

In the spirit of UX Teardowns, I’ll be looking at illustrators that catch my eye, and try to analyze what makes their work so compelling. Please note that all illustrations hereinafter, unless stated otherwise, are the express work of the artist I’m reviewing; I do not take any credit for their works! Also, I will try to be careful to post links back to the artist’s site — so if you click their image it will link through.

The Contenders

Tom Haugomat shows us that isometrics don’t have to be birds eye view. Look how compelling this bug eye viewpoint is, but, when we look for the underlying grid, it’s good ole’ 45° (and I see a 30° in the other direction e.g. see the balcony 2 by 4 wood support shadows. Without taking it in to an editor I’m going to just guess; the fact is, he might have eyeballed it and it’s fine as long as it feels right:

Beautiful “Reverse Isometric”

Observations

Here are some noteworthy characteristics of this gorgeous isometric illo:

  • As mentioned, it’s primarily on a 45° grid.
  • He uses a sort of monochromatic area by area to add local, highlight, and shadow colors. But it’s more triadic overall as blue and red are primaries on the color wheel.
  • He has a very nice positive/negative inversion thing he does. Look at the white on blue, and then the blue on white. It’s sneaky cool, and I’ve also noticed this in Malika Favre’s work (I’ll definitely dedicate a whole teardown on her stuff soon).
  • Texture, hand drawn juxtapose to pen drawn lines give it that “soul” I personally like.
  • As with most isometrics, vertical lines are always available and he utilizes these beautifully.

Kotryna Zukauskaite aka Kata has a definite editorial style to her illustration work—each illo tells a story. Her style is a combination of smart and playful. Let’s get the the isometric:

Clever concept and gorgeous texture and color on this isometric by Kata

Observations

  • I’m eyeballing, but this one looks to be on a 30° grid (whether it’s primarily left upwards to right, or opposite, doesn’t really matter).
  • You can see this illustration started from a conceptual sketch, and the concept is probably one of it’s biggest strengths. Ultimately, we’re looking at a ton of rectangles pieced together, but it’s the concept and the poor soul-sucked business man that bring this through.
  • When the shapes are less interesting, spruce it up with color!
  • Texture: Find your own way to apply this, but, note it’s essentially a slightly lighter, or slightly darker color on the shape. For example, look at the file sleeves; light texture on darker blocked in color shape. Whereas, the fronts of the drawers have dark texture on light.
  • How? Command-click on a layer in Photoshop, and sprinkle that texture as desired. I’m going to leave the challenge to you to find and figure how how to make textures themselves 👊

David Doran is an amazingly talented illustrator that combines smart concept with gorgeous craftsmanship:

Observations

  • To my mind, what’s really lovely about this illo, is the way he’s taken the overt harshness of the isometric’s inherent grid (which is really hard to avoid, and makes you run the risk of having a sort of cliche illustration), and sort of subdued it with the illusion of a transparent glass cube (ok, I’m definitely giving my personal take on that one). But, once you get past the cube and desk, he offsets it with purposely hand drawn feeling irregular shapes.
  • Obviously, there’s a lot of texture.
  • Remember I mentioned verticals are a go? So are horizontals—notice her legs? Notice the random squares (also perfectly vertical and horizontal if you’re evaluating the lines they create).
  • Notice the plant in the upper left? Depending on your interpretation, it’s flat or straight on. This is a neat effect—where the primary perspective is isometric but then flat objects are mixed in. Very stylish if you ask me!
  • Oh, same with the waste basket on upper right!

Mark Boardman describes his work as atmospheric and you can see why in this moody isometric which feels like dusk to me:

Granada—by Mark Boardman

Observations

  • What makes this isometric interesting to me, is that it has such a high horizon line, that it takes away some of that cliche isometric birds eye feeling that becomes tiresome. One might argue that it’s more a single point perspective illustration with the vanishing point at upper left. Whatevers! It’s got a strong underlying grid :)
  • It’s nice that the grid-directed illustration gets broken up by the mountains and clouds, and some of the organic shapes like the lamp, the chairs and tables under the triangular umbrellas, and the triangular tops of some of the buildings.

How do you generally make an isometric illustration?

This isn’t a howto tut, and nor is the teardowns series intended to delve in depth on techniques per se, but, I’ll leave you with some work in progress shots I snapped off of the illustration I did for the top of this article. Essentially, I recommend using Object — Blend in Illustrator or some other vector tool, to set up the grid to the degrees of your choosing, and then copy that in to whatever you like to illustrate in (in this case I was using Photoshop for that):

Simple two-way isometric grid and foundation sketch
You can see I used the grid to block in the sea and sky quickly, and ensure my more organic elements felt right on the grid. You can see I hadn’t quite got the yellowish plant situated yet :)
Although it’s still pretty crazy looking, you can start to see how it’s all coming together. Notice that my reference sketch had a ridiculously wide right side of the phone; no law that chains you to your rough sketch…just make corrections as you go! You can see that I’ll later have to play around with where the peeled back can thingy comes out of the phone vs. the original sketch reference too.

I would never claim that my illustration is on par with these champs of illustration (but hey, it ain’t bad, right!?), but, hopefully the process shots will give you an idea on how you’ll want to approach something like this. If you DO need step by step instructions, just google “Isometric tutorial” and you’ll find a trillion hits for that.

Next in series: Jessica Brilli. Previous in series: Marcus Allen Miller

Also, you may like one of my other illustration teardowns.

Rob Levin does technical things by day and illustration by night. You can view his work at https://www.instagram.com/roblevintennis and https://www.behance.net/roblevin