Email Design

Download 5 Free Isometric Grids and Learn How to Create Them In Adobe Illustrator


Share this post

Using an Isometric Grid

We recently released our ‘Complete Guide to Email Marketing’ and in this tutorial we will look at how to create your own isometric grid using Adobe Illustrator so that you can create a similar art style to that used in the guide, which you can use in your own email marketing material. We will be using Adobe Illustrators ‘Rectangular Grid’ tool and a method for creating an Isometric perspective called the ‘Scale, Shear and Rotate Method’ or SSR.

Image Created With An Isometric Grid

Step 1

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.

Step 1 to Create Isometric Grid Image

Step 2

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.

Step 2 to Create Isometric Grid Image

Step 3

Using the Rectangular Grid Tool, click in your artboard to bring up the tool options.

Rectangular Grid Tool for Isometric Grid

You can set your own parameters for your grid in this dialog 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).

Step 4

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 tool bar go to Object > Transform > Scale which should open a new dialog 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%.

Step 4 Isometric Grid

Step 5

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 dialog box. Set the shear angle to 30 degrees, and make sure the axis is set to horizontal.

Step 5 Isometric Grid

Step 6

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 dialog box, set the rotation angle to -30 degrees (that’s minus 30).

Step 6 Isometric Grid

Step 7

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).

Step 7 for Isometric Grid

Conclusion

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:

Images created with Isometric Grid

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.

Not read The Ultimate Guide to Email Marketing Yet? Read it here.

The Complete Email Marketing Guide Download


Share this post
Email Design
The Importance of Email Preview Text on Mobile Devices
Email Design
4 Reasons to Segment your Email Marketing Lists
Email Design
How to Create a Festive Animated Email Header Using CSS Animation