Create a Web Layout with 3D Elements using Photoshop

Sep 3 2009 by Richard Carpenter | 72 Comments

In this web design tutorial, you will discover a way to create a sleek and professional web page layout that incorporates the 3D Ribbon design trend, as well as some other captivating 3D elements, using Photoshop.

Final Result

Here’s a preview of what we’re going to create. Click on the image below to see the full-resolution final product.

Creating the Photoshop document

1 Start off by creating a new document (Ctrl+N); enter the dimensions 1200 pixels by 1200 pixels.

Creating the Photoshop document

Making the Background layer editable

2 By default, Photoshop locks the Background layer so that you cannot edit it. To make it editable, double-click on your Background layer within the Layers Panel (press F7 to toggle the Layers Panel if it is not visible). Alternatively, you can right-click on the Background layer and choose to "Layers from Background". Once double clicked, you’ll be presented with a dialog box (as shown in the figure below). Enter a new name for your Background layer and press OK; doing this will enable us to edit our background layer.

Making the Background layer editable

Creating the background

3 Now that our background layer is editable, double-click on the layer’s thumbnail to add a Gradient Overlay layer style; use the following figure as a guide on the layer style’s settings.

Creating the background

4 Create a new layer (Ctrl+Shift+N) named "header background". Choose the Rectangular Marquee Tool (M) in the Tools Panel and then make a selection across the top half the canvas; the selection should be about 150px in height and span the entire width of the canvas.

Creating the background

5 Fill the selection (Alt+Backspace) with any color then add these layer styles.

Creating the background

6 Create a new layer (Ctrl+Shift+N) labeled "navigation background". Repeat Steps 4 – 5, only this time the selection should be about 50px in height, still spanning the full width of our canvas; the selection should also be made directly underneath the last one.

Creating the background

7 Fill the selection (Alt+Backspace) with any color then add a couple of layer styles (a Color Overlay and a Stroke layer style).

Creating the background

You should now have something like this.

Creating the background

Creating the Header

8 Create a new layer (Ctrl+Shift+N) labeled "header", get the Rectangular Marquee Tool (M) from the Tools Panel and then make a fixed sized selection that is 850px wide and 150px in height.

Creating the Header

9 Place the selection in the middle of the canvas, making sure that the bottom of the selection ends on the stroke which is applied to the "navigation background" layer.

Creating the Header

10 Fill the selection (Alt+Backspace) with any color, and then add the following three layer styles.

Creating the Header

Adding the Header title

11 Add your website title and slogan on to the left side of the header by utilizing the Horizontal Type Tool (T). The settings and color codes are listed in the figure below.

Adding the Header title

You should have something like this.

Adding the Header title

Creating the Navigation bar

12 Create a new layer (Ctrl+Shift+N) labeled "navigation". Use the Rectangular Marquee Tool (M) to make a fixed selection that’s 850px wide and 50px in height.

Creating the Navigation bar

13 Make the selection directly underneath the header, then fill with any color.

Creating the Navigation bar

14 Now, add these three layer styles to your "navigation" layer.

Creating the Navigation bar

You should have something like this.

Creating the Navigation bar

15 Use the Horizontal Type Tool (T) to add your navigation links onto your navigation bar.

Creating the Navigation bar