• Choose a category
• All
• Classic-Fiction

A true 30 degree line will create a blurry pixel line, where a 26.56 degree line will create a clean two pixel "brick".

Tips to Draw an Isometric Projection in Adobe Illustrator

I spend a lot of time moving between graphics programs and while some illustrators will choose a single application and stick to it (which is great), I like to get the most out of the tools available to both vector and raster. I find that the ability to set custom guidelines in Adobe Illustrator is a big plus when it comes to drawing isometric icons. It doesn't take much time or effort to set them in place, and if you save a copy for future working files, you will only have to do it once.

This quick exercise will start you thinking about perspective in icon design and how lighting is applied to a three dimensional object. This tutorial is a good introduction to Guides, Pathfinder options and Object Styles in Adobe Illustrator.

You Will Need:

A suitable drawing application. This tutorial uses Adobe Illustrator, but any vector based graphics program is fine to use.

Setting Guides

Adobe Illustrator lets you set any line that you draw as a guide line. This is especially useful when you need to draw perspective. Remember that we're drawing what I like to call, “Icon Style Isometric Projection” at 26.56 degrees, rather than the traditional 30 degree isometric projection. Select the Line Segment tool (backslash) and Alt + Click onto the artboard, this will open a dialogue box where you can input the line settings. Set a length that's larger than the width of the artboard, in this case it's 48px wide, so I've chosen a 100px line. Then, in the angle, set the line to be 26.56 (icon style isometric) and click OK to create the line.

Set the line segment tool to create a line longer than the artboard at an angle of 26.56 degrees.

Position the line at the top left corner of the artboard and copy it (command + C then command + V) position the copy of the line on the bottom right corner of the artboard.

Select the Blend tool (W) and click on the first line, then click on the second line. This will make a blend between the two. With the two lines selected, double click the Blend tool icon and set the spacing to specified distance, 1px. Click OK, then go to Object > Blend > Expand to convert the blend to lines.

Set the blend options for the lines.

With the lines selected Option + Click on the artboard with the Reflect tool (O), set the axis to vertical with an angle of 90 degrees, click Copy.

With both set of custom lines selected, go to View > Guides > Make Guides. Once the lines are converted to guides, they will only show up on the layer that you have made them on.

A quick way to toggle the view of the guides is to lock the layer that they're on and create a new layer above the guides as the art layer. From there you can show and hide the guides by turning the guides layer to visible and invisible.

Create the guides.

Building and Coloring Isometric Vector Shapes

Start by drawing in the first side of the cube. Select the shape and Reflect it (Option + Click the area on the artboard where the two shapes will join, Set the angle to Vertical then click Copy.)

To make the top with the same angles on each side, draw a triangle in the space between the two sides of the cube and reflect it horizontally to make the top. Select the two sides of the shape and merge them together with the Unite option from the Pathfinder panel.

Draw the sides and top of the cube using the custom guides to position the lines.

You should have a cube consisting of three sides.

Select the Cube and hold down the Option key to drag a duplicate of the cube to the right, and repeat the same step to make a duplicate at the front. Color the three cubes with a bright tone over the entire shape. I've used bright tones or red, blue and yellow. Use the HSB color sliders to make pure hues without any dark tones.

Color each cube a bright tone.

Add