Illustration Teardowns: Soulful Isometrics
Some Isometrics are so passé, but not these babies…they got soul!
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.
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:
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:
- 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:
- 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:
- 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):
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.
Also, you may like one of my other illustration teardowns.