Create Isometric Artwork using Adobe Illustrator
Video Games! Who doesn’t like them? When it comes to the PixelHaze team we’re addicted to our games, our Steam and Xbox libraries are filled to the brim with games upon games that we still haven’t got round to playing.
This is why it only felt right that our brand conveyed our passion for all things retro whilst not being “in your face” with it. This is where we found our love for isometric artwork.
Why isometric?
When creating our initial branding for PixelHaze, we first settled with a retro, eight-bit pixelated art style which represented our love for the 80s video game aesthetic and championed our love for a pop culture at the same time. As the business grew, we slowly began to outgrow this art style as we were quite limited to what we could create with the artists in house. It took far too long to create a simple sprite character.
We had to reinvent our art style, while still championing our core principles. Being the main art worker, I had to create artwork in a quick turnaround whilst not sacrificing quality. This is where I began looking at flat design art, which I could create inside of Illustrator. Although this looked quite good to begin with, we felt it lacked a bit of personality and blended in with a lot of other artwork seen on corporate websites online.
Evolving this, we took inspiration from some of our favourite tv shows and video games such as civilization. You can probably see the comparison between Silicon Valley (we love our references!). Using the isometric grid, you can map out your artwork easily and quickly.
PixelHaze Store - Island
The isometric styled allowed us to create minimal designs with a modern aesthetic without even mentioning or referencing video games at this blocky art style instantly makes people think of some of their favourite games. Some people might think the art style replicates that of Minecraft or Crossy road.
I’ve linked the same isometric grid below which you can download and use in Adobe Illustrator or other software.
By placing this in the background and locking the layer, you're able to draw on top, keeping everything nice and neat, respecting the grid. From there, it's up to you. You can draw to your heart's content! As long as you're sticking to that grid.
PixelHaze Academy - Island
Drawing the detail
The statues (as seen in the PixelHaze Store island above) are more complex than the blocky simplistic buildings that are usually seen in this style, however by zooming out and working on a much smaller grid. You can still build detailed shapes whilst not breaking away from the template.
One common mistake I see is when people try and replicate the art style, they ignore the grid. This tends to look good with one item alone (e.g. a building) But without the grid, making a much larger scene you'll find that your design becomes skewed and the perspective just doesn't quite fit.
Make sure you respect the grid! You’re welcome to download our isometric grid for free. Following the video above, and I’ll walk you through how you can create your own isometric illustrations. Aren’t we lovely?
