For over eight years I’ve been creating flat interface designs for web, game, and other applications. Though depth is usually something I try and create when working with any design, there hasn’t ever really been a virtual medium that could take advantage of it. VR is changing that pretty abruptly. In fact, VR almost requires that you utilize depth in interface designs. But there is a problem - the tool most widely used for creating these interfaces, namely Photoshop, isn’t designed to work in 3D. It does however have some 3D capabilities that can be helpful when creating these kinds of interfaces.
I want to walk through exporting 3D shapes from Photoshop to Unity for use in 3D interfaces. Unity’s primitive shapes leave a lot to be desired, and I often find myself wanting something basic that Unity or primitive packs from the Asset Store just don’t provide. I’ve just started working with Photoshop in this way and so there is definitely more to uncover here. But if you’re like me and feel at home in Photoshop but don’t have much experience using 3D software, then this will be helpful for you. It may also be a quicker way of creating 3D shapes even for experienced modelers.
* UPDATE - I found a better way to create a 3D model from a 2D graphic using 3D Builder which I describe in my blog post From 2D to 3D with Windows 10's 3D Builder. Photoshop probably still has a place in this workflow, but I recommend using 3D Builder instead to create the initial 3D model.
Create a 3D shape
The first thing you’ll want to do is create some kind of basic shape on its own layer in Photoshop. A rounded square doesn’t usually exist as a primitive in 3D software but is something that interface designs use a lot, so I’m going to go with that.
The next step is to turn that shape you made into a 3D object. To do that go to 3D -> New 3D Extrusion from Selected Layer.
Photoshop will then ask if you want to switch to the 3D workspace. I would recommend doing that since the tools for working with 3D are pretty different.
Photoshop now takes the form of something more familiar to those who have worked with 3D modeling software or a 3D engine like Unity. On the right you get a new 3D tab which shows the 3D scene objects, and the Properties window shows properties specific to the 3D object you have selected.
You will also notice at the top that there are 3D controls. These allow you to change the position, orientation, and scale of the 3D object.
Lastly, take a look in the bottom left of the workspace.
These controls let you change the scene camera’s position, orientation, and depth. You’ll have to click on the button itself and then drag around to perform the action. If you click anywhere else in the workspace, you will be changing the 3D object’s properties, not the scene camera so be careful with that.
Go ahead and get a nice ¾ perspective so we can actually see the depth of the new 3D object we created. Your scene should look something like this:
Modify the 3D shape
Now let’s focus on getting the shape looking the way we want in 3D. This will all be done through the Properties window. I won’t go over every feature here, just the ones necessary for getting a good looking basic 3D shape into Unity.
Let’s start with the Shape Preset in the Mesh tab of the Properties window.
This will give you some presets for different types of shapes that you can create from your object. The presets can give mixed results depending on the shape of the object you’re applying them to. I would suggest trying different presets and playing with the settings to see if you find any you like. If you want to go back to your original object, just click the Reset Deformation button.
I’m not going to apply any shape presets to my 3D shape, so let's move onto the Deform tab.