What's new
Photoshop Gurus Forum

Welcome to Photoshop Gurus forum. Register a free account today to become a member! It's completely free. Once signed in, you'll enjoy an ad-free experience and be able to participate on this site by adding your own topics and posts, as well as connect with other members through your own private inbox!

3D Perspective layout


Zavman

New Member
Messages
3
Likes
0
Hello,

Could someone please share how this 3D effect is applied to this layout (for iPad/web) in photoshop (image attached)? Is it an action, or must it be applied manually and tediously? I really want to simulate this, but I'm not sure how. To be clearer and more specific, not the drop shadows, but the hard edges of the layout create the illusion that the layout is 3D with depth.

Thanks so much!
Zavman

clients.jpg
 

IamSam

Administrator
Staff member
Administrator
Messages
22,722
Likes
13,258
Hello.

There are several programs (software) that could have been use to create the actual layout. The same holds true for creating the 3D representation of the layout. Both could be made in Ps. And yes, even though I'm not aware of such, there could be an action available to create the effect.

There was a thread here on the forum in which this was already discussed and a tutorial was made. I will see if I can find it! If not, myself or many of our other members can walk you through the steps of how to create the 3D effect.
 

admin

Webmaster
Staff member
Administrator
Messages
4,548
Likes
970
Do a search for "Isometric Website Mockup" and you will find quite a few resources available, both free and premium.

Many these will be PSD files with smart objects that you can edit to add your screenshots, but there are probably a lot of actions available to do something similar as well. Of course you can make it from scratch if you can't find something premade that looks the way you want, but because this is a popular trend there are many premade options to save you time.

Here's one I happened to have on hand, not exactly like your example but produces a similar effect. PSD file attached that you can use to add your own screenshots.

iso-screen.png
 

Attachments

  • isometric.website.mockup.psd
    11.6 MB · Views: 3

IamSam

Administrator
Staff member
Administrator
Messages
22,722
Likes
13,258
I did find this old thread on Isometric 3D perspective effect.

The second post shows some links to some actions.

Just remember that creating the effect and creating an actual mockup that uses smart objects are two different matters.
 
Last edited:

IamSam

Administrator
Staff member
Administrator
Messages
22,722
Likes
13,258
I also want to add that a mockup utilizes the same effect of duplicating layers as I described in the 2016 thread to accomplish the "canvas wrapped" effect. The mockup that @admin added in post #3 uses 6 layers to create the "wrapped canvas" or "3D effect".

Screen Shot 2019-10-20 at 2.30.11 PM.png

The problem is that I never completed the explanation of how I created the multiple layer effect (or the mockup) since the OP never returned to the thread. If you want to know, I can expound on that explanation.
 

Zavman

New Member
Messages
3
Likes
0
Thank you both for your responses and solutions. Exactly what I needed. Big help. Appreciate it. Thank you!
 

Top