Are you a beginner to isometric designs? Then this post is for you.
We'll show you how you can create your own isometric grid using Adobe Illustrator. We will be using Adobe Illustrator's ‘Rectangular Grid’ tool and a method for creating an Isometric perspective called the ‘Scale, Shear, and Rotate Method’, or SSR.
Open a new document in Adobe Illustrator (Ctrl + N/Cmd + N) as we will be creating this image for an email, set your image width to 600px (full width) and set the height to 450px.
As we are designing for email, set the colour mode to RGB.
In the toolbar to the left, select the rectangular grid tool, which is within the line segment tool, just click and hold on the line segment tool icon to bring up the other options.
Using the Rectangular Grid Tool, click in your artboard to bring up the tool options.
You can set your own parameters for your grid in this dialogue box. We’ll set our grid to 600px x 600px and have 50 Horizontal Dividers and 50 Vertical Dividers (the more dividers you have, the more segments you will have in your grid and the easier it will be to create more details with the grid later on, but don’t go crazy or your guides will end up too confusing).
This is where we begin using the Scale, Shear & Rotate method mentioned earlier.
We start with scaling the grid. Select your grid and in the top toolbar go to Object > Transform > Scale which should open a new dialogue box.
In this box select the ‘Non-Uniform’ Option and set the vertical scale to 86.602% and leave the horizontal scale set to 100%.
Next, we will shear the grid. With the grid still selected, go back to the top toolbar and go to Object > Transform > Shear which will again open a new dialogue box. Set the shear angle to 30 degrees, and make sure the axis is set to horizontal.
Finally, we rotate the grid. As with the last steps, keep your grid selected and in the top toolbar go to Object > Transform > Rotate and in the dialogue box, set the rotation angle to -30 degrees (that’s minus 30).
Now we will convert the grid into actual guidelines. Select your grid and in the top toolbar go to View > Guides > Make Guides (Ctrl + 5/Cmd + 5).
You’ve now created your isometric grid, you can use this to play around with creating isometric illustrations for use within your email marketing collateral. Here are some more examples of what you can create using the isometric perspective:
Don’t want to create your own guides?
Download this pack of pre-made guides which are free to use. The files should be compatible with Adobe Illustrator CS2 onwards and the file includes sizes perfect for email marketing as well as A4 and A5 sizes for print.