How can I create and batch this 3d planes effect?

Question

I am originally a programmer, so I don't have much experience in Photoshop. I have always wondered how to display all layers as multiple 3D-planes (see below).

Do I have to use a plugin or macros? I want to accomplish this so that I can have clean document of my (game's) UI design plan. I have over 20 layers.

Answer 1

Use transformation tools on the entire piece making sure to SCALE DOWN then rotate/skew/perspective/distort whatever you'd like to get it into a nice position.

Now just go layer and by layer and move each one up on the space.

I'm sure there is a way to do it with Actions and Batches but you'd have to write it. The fastest way I, a non-coder, would do it is create an action that moves layer up X pixels. Then select all layers but the bottom and click the action. Then select all layers but the bottom TWO and click the action. Then all but bottom 3 and so on.

Answer 2

TL;DR After Effects is your friend, here. Sort of. As it has a more "real" 3D space to do this in.

This is a long and dangerous journey, so save your very important working document to a unique location, and start working on a copy of the doc so you can't possibly damage the original.

Photoshop, as I'm sure you've found, does not have the kinds of versioning control you may be accustomed to from programming.

Not even close!

Now, the trick...

Of the 20 layers you have, find out which ones you can put together. Merge them together. 20 Layers is excessive. If there's any chance you can compress that a little it will be much easier to see what you're doing.

Then rasterise all your layers. That's a right click over the name of the layer, and then choose the appropriate rasterising. This will be different for different types of layers.

Once that's done you can save this entire file out as a .psd file (the native Photoshop format) somewhere easily accessible.

Now open After Effects.

Create a new Sequence (After Effects terminology for a timeline) with the kinds of physical dimensions you need. Don't be concerned by the landscape stylings of an animation package trying to present to a TV, you can use very long portrait orientation documents (sequences) in After Effects, and essentially treat it as a static design editor with a timeline of layers.

For 20 layers you're probably going to need a tall document, something like 1000 wide x 3000 high.

Import that .psd file with all your layers, as a composition.

Open it up (it will come in as a sequence in the Project panel, double click it to open it up.

Select all those layers, copy them, head back to your vertically tall sequence, past them in, drag them all to the middle, scale if needs be...

And create a camera.

And change to the view of that camera, so you're looking thought it.

Now rotate that camera until it's looking at the .psd as you see the bottom layer in your existing document, using the "Unified Camera Tool" (only Adobe and programmers can make naming conventions like this)

Now you're going to need to change all the layers to 3D objects... by selecting them and choosing the Layers menu, where you'll find an option to make them 3D.

And then, slowly, painfully, and with great joy... change the Z position of all those layers to what you want to get the message across.

+++++++++ This might also be possible in Photoshop by texturing planes, but you're going t be butchering your document to do that, and its not something Photoshop was explicitly designed to do, so probably incredibly painful in there.

See here:

http://helpx.adobe.com/photoshop/using/essential-3d-concepts-tools-photoshop.html

You do bring up an interesting point... if Photoshop is the defacto standard (now that Fireworks has been taken out the back paddock and shot in the back of the head) for creation interfaces and elements, why isn't there an automatic way of annotating their layering for communication with the recipients?

Probably because Adobe don't care about end users using their software, only their cheques.