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
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: http://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:
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!