Isometric projection, which means having equal measurement, it is named also an axonometric projection. You may be confused about these terms, but don’t worry. 😃 In How to create isometric illustrations in the simplest way possible article we explained in detail essentials about isometric projection, how can it be accomplished, and two easy ways on how to make an isometric cube.
To refresh your memory, here are the three types of axonometric projections: isometric, dimetric and trimetric. We’re going to focus only on isometric projection and how can it be achieved.
Types of axonometric projections: isometric, dimetric and trimetric
You may wonder, what’s new in this guide?
This time, we’ll cover two ways on how to make an isometric grid. Plus, at the end of it, you’ll learn how to build correctly basic isometric shapes.
First of all, if you like depth and distortion and you want to add a realistic touch to your illustrations, it is essential to know how to build the grid. Also, take into consideration the basics of Geometric plane structures before starting.
So, we have chosen the simplest and quickest two methods, accessible to both beginners and intermediates.
The first method is the easiest one and much faster to make.
1. Create a new document of 1000 by 1000 pixels, in RGB mode.
2. The first thing we’re going click is to Rectangular grid tool. Double click it and keep the same default size.
3. Don’t forget that horizontal and vertical dividers must have always an equal value. Having this thing in mind, we’re going to add 50 dividers for both tabs.
So, the base of out grid is ready. Select it, center it and go to Transform Tab.
4. Set the Reference Point in the center and un-link the constrain width and height Proportions.
5. Modify the Height Value to 86.602% (these are percents, not pixels).
6. Then, set the Shear Value to 30° and rotate it to -30°.
Simple, isn’t it?
Follow step by step this first method here. 😃
The second method is the most common among designers, we’re not sure why.
1. Create a new document, of 1000 by 1000 pixels.
2. Select the Line segment tool, and make sure you have the stroke filled with any color.
3. Draw a vertical line, by holding Shift key.
4. Then, hold Shift + Alt keys, pressing at the same time the right arrow key. Make enough copies for our grid, you may need to zoom out.
5. Select all the lines, and Group them by pressing Control + G or Object > Group. Center the lines and set the stroke at 25 points.
6. Then, hold the group selected and double click on Rotate Tool. Rotate the lines at 60° and click on copy.
7. Having selected the layer with rotated lines, copy and paste it in place. After, right click on the lines, pressing Transform > Reflect. Make sure you select the Vertical Axis.
You can follow the second method tutorial step by step here. 😉
Building isometric grids is nice and all, but what if you want to create some shapes? Is the isometric grid really going to help you meet the expectations? Believe it or not, using an isometric grid is not the only way how you can draw isometric artworks.
We already covered the cube part in the previous article, mentioning the Geometric Technique and
a faster technique using Effect > 3D > Extrude & Bevel.
How to draw an isometric cone
A cone, for example, can be made from two shapes (circle and triangle) with the help of an isometric grid. To achieve the isometric look of the circle, follow the next steps:
1. Draw a circle (in Top view);
2. Go to Transform Tab (you can find it onWindows > Transform);
3. Un-link the constrain width and height Proportions;
4. Scale the height of the circle to 86.602%
5. Set the Shear Value to 30° and rotate it to -30°.
Then, all you need to do is to add a triangle on top of the new shape. Once you assemble the two shapes, select them, click on Pathfinder > Unite and remove the extra anchor points.
And…here it is!
Another way to obtain an isometric cone can be with the help of the Revolve option Adobe Illustrator have. A real time saver! All you need to do first is to select the Pen Tool and draw a right triangle (that has one angle, at 90°).
Turn off the stroke, then, select your triangle and go to Effect > 3D> Revolve. Click on Preview and choose the No shading option from the Surfaces tab. There you have it!
Play with the shape’s form and stretch it until you have the right isometric cone.
If you want to opt for a visual tutorial, click here to follow the cone tutorial.😃
How to draw isometric stairs
To make the grid more appealing, changing the color of the lines to #77DFF7 color should do the trick. Also, change the opacity to 60%. You can make a clipping mask to limit the grid at the size of your artwork by drawing a rectangle on top of the grid. Having the both layers selected, click on Object, go on the bottom of the list and select Clipping Mask > Make.
By the way, all these steps are entirely optional.
All we need to do is to draw a rectangle with fill using the Pen Tool, joining the anchor points. Draw the side and base of the stairs according to the position of the guide. It’s easier to follow the tutorial here. 😃
As a final touch, make sure the stair alight with the grid, so adjust the anchor points accordingly.
If you want to follow the entire video tutorial, you can find it on our Youtube channel, Isoflat.