🎉 Try Slides With Friends — Zoom Trivia, Live Polls, Icebreakers & more! Check it out →
How to Make an Isometric Grid in Photoshop

How to Make an Isometric Grid in Photoshop

Isometric Designs in Photoshop

A popular mockup method to show different kind of projects (eg. an app screen) in different formats (eg. a mobile phone) is to display them projected over an isometric grid. An isometric layout is a type of orthogonal projection where elements are drawn in the same proportion on all three axes: displayed along X, Y and Z in equal measure. A good way to start designing elements in an isometric view is to use a grid as a guide to project the elements. Good news, that's exactly what you'll learn how to make today in Photoshop.​

Step 1

Open Photoshop and make a new file at any size you want. In this case, i will make mine at 1800 x 1200 px.

Step 2

Select the Line Tool (U). Be sure to have the Mode set to "Shape" and the Weight set to 2 px in the top toolbar and draw a line from top to bottom.

Step 3

Press "Ctrl+J" on you keyboard to duplicate the line layer.

Step 4

Select the Move Tool (V) and while holding Shift on you keyboard hit the right arrow key 5 times to move the new line to the right 50 px.

Step 5

Again, press "Ctrl+J" on you keyboard to duplicate the line layer and move it another 50 px to the right as shown.

Step 6

Repeat this process (duplicate + move) as many times as you want to make the vertical lines of your grid. In this case, i have made 20 lines.

Step 7

Select all the vertical lines layers and press "Ctrl+E" on your keyboard to merge them. Rename the Layer to "Vertical Lines".

Step 8

Press "Ctrl+J" on your keyboard to duplicate the "Vertical Lines" layer and rename it to "Horizontal Lines".

Step 9

With the "Horizontal Lines" layer selected, press "Ctrl+T" on your keyboard, in the top toolbar set the rotation angle to 90º and click on the "Commit Transform" icon.

Step 10

In the Layers Panel select both lines layers (Horizontal and Vertical) and press "Ctrl+T" on your keyboard.

Step 11

To complete the Isometric Grid, in the top toolbar be sure to uncheck the "Maintain Aspect Ratio" icon, set the Vertical Scale to 86,602%, the Rotation to 30º the Horizontal Skew to -30º and hit the "Commit Transform" icon.
Note: The vertical Scale has to be set at 86,602 (0.86602540378) due the scale factor: 0.5*tan(60deg)



You've successfully logged in!