Advertisement

Presenting Your Web Mockups With Added 3D Flair

by
Student iconAre you a student? Get a yearly Tuts+ subscription for $45 →

In this tutorial I'm going to show you how to take your flat design (as in two dimensional, not flat as in the current design trend) and add some life by mocking it up on a 3D plane in perspective. The purpose of this is to present your design in a more dynamic way, giving it more depth and visual appeal. It can be a very effective way to present visuals to clients.

There are a couple of ways to achieve this effect, such as using Photoshop's own 3D tools and creating 3D layers. I am, however, more comfortable using proper 3D software such as 3ds Max as it offers much more control over the camera, allowing you to rotate around the 3D plane with greater control over the lighting and shading. Initially it may look more complicated, but when you've done this once you'll later be able to mock your work up in a matter of minutes.

triplagent-3dmax

If you're new to 3D we have a plethora of tutorials to get you started..

The principles demonstrated here are application agnostic; you'll be able to apply them to any 3D software out there. To follow along you should know your way around Photoshop and have at least opened a 3D tool program before.

Anyways, for this tutorial I will be mocking up the design of our latest app called TriplAgent, which seems to be spreading like wildfire on those interwebs. You can see the whole design on my Behance portfolio.


1. Creating the 3D Plane

Step 1

Open up your 3D application. I am using 3ds Max 2012, but as mentioned before you can use just about any 3D tool.

triplagent-1

Step 2

I use Vray as the main rendering engine because it offers realistic lighting and shadows. Make sure you turn on Indirect Illumination, but you could also use Max's default renderer and achieve similar results.

Neutral Background

Apply similar settings as those in the screenshots.

Neutral Background

Step 3

Now it's time to create the background. Go to Create > Under Standard Primitives choose VRayPlane. A plane will appear as in the screenshot below. Just drag it to the side, it doesn't really matter where.

Rectangle Tool Settings

The VRayPlane will be the background of your scene.

Step 4

Alright, let's create the actual plane where your design will sit. Again, go to Create > Standard Primitives > Box. Under "parameters", enter the dimensions as stated below (this is the screensize for an iPhone 5).

Rectangle Tool Settings

Obviously, you can enter any dimensions you like as long as your design adheres to the same proportions.

Now we have to apply a UV map, so that the design wraps nicely around the corners of the plane. Go to "Modify" in the panel to the right and choose UVW Mapping from the Modifier List. Make sure "Planar" is selected.

Rectangle Tool Settings

Step 5

Time to apply the materials, so open up the Material Editor in the top right corner of the main toolbar. Create two VRay materials, one for your background (the VRay plane) and one for your box you just created. Drag and drop the material onto each object.

triplagent-7

Let's perform a quick render. Click on the Render Production (the teapot icon)...

triplagent-8

Kinda gray and naked, but it's a good start.

Step 6

Good job, time to put on a nice dress. We need to apply our actual mockup image as a material to the 3D object. Open up the material editor and click on the material that you assigned to the box.

Scroll down until you see the Maps rollout, then click on Diffuse > Maps > Standard > Bitmap and navigate to the folder where you have saved your design.

Note: My file was a .png with dimensions of 1136 x 640 pixels.

triplagent-9

You will now see your file wrapped around the sphere in the material slot. Click on the checkered icon and you will see the design wrapped around your box in perspective view. Don't forget to set the blur value to 0.01 to get a crisp render of your image.

triplagent-10

Hit Render...

triplagent-11

Voila! The design wraps nicely around your box. Go ahead and save this file as a png or tif. Time to change the background color and spice things up..

Step 7

There are two ways to change the background color. Either you can change the color of the material you assigned to your VRayPlane or you could change the color in Photoshop. I'll show you how to do this in Photoshop, because it is much easier to change the color without re-rendering your scene.

Let's move on. Right-click on your VrayPlane and click "Hide Selected".

triplagent-hide

We need to hide the backgound so it doesn't appear in the rendering.

Hit Render and click on the alpha icon as seen below in the screenshot. Save the image as a .png and we are done here.

Time to move on to your best friend, Photoshop.

triplagent-12

With the alpha channel we can create a mask and isolate the background.

2. Adjusting Background and Finalizing

Step 1

Take the alpha file you just saved and open it up in Photoshop. Go to Channels and select (CMD+A) the alpha channel on the bottom. Copy it to the clipboard.

triplagent-13

Step 2

Open up your rendered image that you previously saved. Again, go to the channels window and paste the alpha channel you just copied. This time we need to select the actual mask, so hold down CMD and click on the mask.

triplagent-14

Make sure the mask is selected.

Step 3

Open the layers window. Holding down the CMD key, left click on Add layer mask as seen below. The plane should be nicely isolated from the background.

triplagent-15

Removing the background and isolating the plane.

Create a new layer and fill it with any color you like. As long as it looks good. Mkay.

triplagent-16

Step 4

Now we are going to add shadows. You could keep the shadow that was in the image but let's use Photoshop's shadows this time. CMD+click on your mask again and create a new layer. Fill the selection with a dark color that matches your background. Open Layer Styles and play around with the drop shadow effect until you find something you like.

triplagent-17

Make sure the angle of the shadows looks right.

Good job, we're done! A more pleasing way to look at a 2D design, don't you think?

triplagent-18

This is what you could end up with:

triplagent-19
triplagent-20
triplagent-21

Congratulations! You're Done

In this tutorial, we've walked through how to take a 2D design and transform it into a 3D mockup with perspective. I'm guessing that many of you were a bit intimidated by the whole 3D thing, but it really is quite basic once you get the hang of it.

Some interesting next steps would be to try experimenting with different plane sizes, using different camera angles and also changing the camera lens to achieve a distortion of the perspective. You can see the whole design on my Behance portfolio, and also check out TriplAgent mobile app. Thanks for following along!

Advertisement