How to Create Your Own Isometric Mockup in 30 Minutes or Less

After you have create the website layout, mobile app, or web element for your design project, then you need to show it to everyone. With isometric mockup you can show your design in more elegant, attractive and unique way.

Today we will Create a Simple Isometric Mockup for your web or mobile app element design with Photoshop.

So let’s get started!

STEP 1: PREPARE THE CANVAS

In this Photoshop tutorial, I will use a template from our freebie collection, so you need to download it first here: Product View Popup

As you you can see here, there are 2 different styles product view. We will use “style1” and hide the other one with click the eye symbol at ‘LAYERS’ panel

STEP 2: RESIZE THE CANVAS

Resize Canvas size with menu “Image”->”Canvas Size…”

STEP 3: CONVERT TO SMART OBJECT

Convert “style1” group into “Smart Object”. If you still don’t know about “Smart Object”, you can read the article here: https://omahpsd.com/2013/12/how-to-photoshop-smart-object/

STEP 4: CREATE THE GUIDELINES

Create a new layer on the top of layer “style1” by click the button on ‘LAYERS’ panel. We will use this layer to create guide lines

Create a line use pencil with weight 2px and color #3dc9f7

Rotate the line to 15º

Create another line and rotate to 150º

STEP 5: REFORM THE LAYER

Now, rotate layer “style1” with the guide from line we made before

Reform the layer by click [command]+[shift]+ [mouse click on the top node] and move the mouse to the right until fit in our guide line. If you use windows change [command] button to [ctrl] button

STEP 6: HIDE THE LAYERS

Edit the smart object from layer “style1” with double click on the layer

Hide some layer and save it with press [command]+[s], and then back to your file before

STEP 7: DUPLICATE & HIDE THE LAYERS

Duplicate layer “style1” by right click with the mouse at layer “style1” and choose “New Smart Object via Copy”

After that, open that new smart object layer by double click on the layer. Hide some layer and change the background layer fill opacity, save it with [command]+[s]

STEP 8: MOVE THE LAYERS

Back to main file, move up the duplicate smart object layer.

And here the final result:

I hope with this simple tutorial, you’ll understand the main concept to build your own isometric mockup.

For the next Photoshop Tutorial, take a look here the preview of our second isometric mockup:

So stay tunes by following us on Twitter or Like our Facebook page.