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

Advertisement

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.

Isometric Mockup Photoshop Tutorial

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

Isometric Mockup Photoshop Tutorial

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

Isometric Mockup Photoshop Tutorial

STEP 2: RESIZE THE CANVAS

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

Isometric Mockup Photoshop Tutorial

Isometric Mockup Photoshop Tutorial

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: http://omahpsd.com/2013/12/how-to-photoshop-smart-object/

Isometric Mockup Photoshop Tutorial

Isometric Mockup Photoshop Tutorial

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

Isometric Mockup Photoshop Tutorial

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

Isometric Mockup Photoshop Tutorial

Isometric Mockup Photoshop Tutorial

Isometric Mockup Photoshop Tutorial

Rotate the line to 15º

Isometric Mockup Photoshop Tutorial

Create another line and rotate to 150º

Isometric Mockup Photoshop Tutorial

Isometric Mockup Photoshop Tutorial

STEP 5: REFORM THE LAYER

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

Isometric Mockup Photoshop Tutorial

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

Isometric Mockup Photoshop Tutorial

Isometric Mockup Photoshop Tutorial

Isometric Mockup Photoshop Tutorial

STEP 6: HIDE THE LAYERS

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

Isometric Mockup Photoshop Tutorial

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

Isometric Mockup Photoshop Tutorial

Isometric Mockup Photoshop Tutorial

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”

Isometric Mockup Photoshop Tutorial

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]

Isometric Mockup Photoshop Tutorial

STEP 8: MOVE THE LAYERS

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

Isometric Mockup Photoshop Tutorial

And here the final result:

Isometric Mockup Photoshop Tutorial

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:

Isometric Mockup Photoshop Tutorial

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

If you in a hurry and need to save your time, here I offer you a ready made mockup: 5 Styles Isometric Web/App Mockup for only $6!

Isometric Mockup Tutorial

Enjoy!

4 Comments

Leave Your Comment