Create a Web Layout with 3D Elements using Photoshop

Sep 3 2009 by Richard Carpenter | 72 Comments

Create a Web Layout with 3D Elements using Photoshop

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.

Final preview

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

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

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

Creating the Header

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

Creating the Navigation bar

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

Making the Navigation Hover button

16 Select the Rounded Rectangle Tool (U) from the Tools Panel and set its Radius to 10px.

Making the Navigation Hover button

17 Draw out a small rectangle that’s about 80px x 50px.

Making the Navigation Hover button

18 Use the Rectangular Marquee Tool (M) to make a rectangle over the top half of the rectangle. Fill the rectangle the same color as the rounded rectangle.

Making the Navigation Hover button

19 Duplicate the shape by right clicking on the layer and choosing Duplicate Layer. Then rotate the duplicated layer 180 degrees using the Transform feature, Edit > Transform > Rotate 180o. Finally, place the shapes next to each other making sure there level; use the Move Tool (V) to move the shape around.

Making the Navigation Hover button

20 Make a selection around half of the duplicated shape using the Rectangular Marquee Tool (M). Once you’ve made a selection, hit the Del key to clear the area beneath the marquee selection.

Making the Navigation Hover button

21 Use the Move Tool (V) and your arrow keys to align the little shape next to the bigger shape, making sure they are not directly overlapping. Once moved into place, Ctrl + click your little shape layer’s thumbnail within the Layers Panel window to load a selection around it.

Making the Navigation Hover button

22 Switch to the bigger shape’s layer and hit the Del key to clear the area beneath it. Repeat the steps for the other side of the shape – and when you’re finished – you should have something like this.

Making the Navigation Hover button

Transforming the Hover button

23 Once you have your hover button you can delete the duplicated layer, and then rename the remaining layer "nav hover". Now, add these couple of layer styles to it.

Transforming the Hover button

Transforming the Hover button

24 Drag the "nav hover" layer underneath your navigation text layer. Shift the "nav button" layer behind one of your navigation links and then change the link texts color to white (#FFFFFF).

Transforming the Hover button

25 Underneath your "nav hover" button layer, create a new layer (Ctrl+Shift+N) called "nav hover extra". On this layer, create a small ellipse using the Elliptical Marquee Tool (M) and fill the ellipse with the color #A3002F.

Transforming the Hover button

26 Cut the ellipse in half by using the Rectangular Marquee Tool to make a selection of the bottom half, and deleting the bottom portion of it. Then move the half-ellipse under the rounded part of the nav button. If the ellipse hangs over the navigation, trim it some more. Once the ellipse is the correct size, duplicate its layer and place the duplicated one on the other side.

Transforming the Hover button

You should have something like this.

Transforming the Hover button

Creating the Content Area

27 Create a new layer (Ctrl + Shift + N) called "content area". Using the Rectangular Marquee Tool, create a selection 850px in width, same as our other boxes, and as high as you need depending on the amount of content your going to have; you can make it bigger or smaller later, as needed. Fill the selection with any color and then add these three layer styles.

Creating the Content Area

Creating the Content Area

Creating the Content Area

28 Drag the "content area" layer below the "navigation" layer and adjust the content area box using the Move Tool (V) so its looks like an indented line where the content area and navigation meet.

Creating the Content Area

Making the Search box graphic

29 Create a new layer (Ctrl+Shift+N) called "search field" and create a rectangular marquee selection inside the navigation area on the right hand side using the Rectangular Marquee Tool (M).

Creating the Content Area

30 Fill the selection by choosing Edit > Fill (Shift+F5) with the color of white (#FFFFFF), and then add a Stroke layer style.

Creating the Content Area

31 Inside the dummy search field, add some text inside using the Horizontal Type Tool (T).

Creating the Content Area

32 Directly next to the dummy search field, create another selection using the Rectangular Marquee Tool (M).

Creating the Content Area

33 Fill the selection with any color then add a Gradient Overlay and Stroke layer style; use the following figures for guidance on their settings.

Making the Search box graphic

Making the Search box graphic

You should have something like this.

Creating the Featured Area

Creating the Featured Area

34 Create a new layer (Ctrl+Shift+N) called "featured area" and create a rounded rectangle area using the Rounded Rectangle Tool with a radius set at 10px.

Creating the Featured Area

35 Use the Polygonal Lasso Tool (L) to create a pointed arrow on the upper left side. Fill the arrow on the same layer with the same color as the rounded rectangle.

Creating the Featured Area

36 Now add a couple of layer styles (a Gradient Overlay and Stroke) to your featured area layer.

Creating the Featured Area

Creating the Featured Area

Filling in the Featured Area with content

37 Create a new layer (Ctrl+Shift+N) called "featured border" and using the Rounded Rectangle Tool (U), create a rectangular shape inside the featured area.

Featured Area content

38
Add a subtle gradient overlay to the featured border layer. Click the layer’s thumbnail whilst holding down the Ctrl key on the keyboard to load a selection around it, and then go to "Select > Modify > Contract". Contract the selection by 10px, and then press OK.

Filling in the Featured Area with content

39 Find an image/photo that you want to use (I used an image of some flowers), open it in Photoshop, and copy the image to your clipboard (Ctrl + C). Then with the contracted marquee selection that we made in the previous step still active, go to Edit > Paste Into (Shift+Ctrl+V). The image will then be paste inside the selection.

Filling in the Featured Area with content

40 Finish off the featured area with some dummy text and titles.

Filling in the Featured Area with content

Creating the content area’s 3D Ribbons

41 Use the same method as our navigation hover buttons to create the left par, only this time create the main overlapping part much longer and horizontally oriented instead of vertically oriented (jump back up to the Making the Navigation Hover button section of the tutorial to refresh your memory if needed).

Creating the content area's 3D Ribbons

42 At the end of the ribbon (right-hand side), create a triangular shape using the Polygonal Lasso Tool (L) and use the Del key to remove the unwanted area. Finally, add a Drop Shadow layer style to this layer (use your preferred settings) and some dummy text.

Creating the content area's 3D Ribbons

43 Duplicate the 3D ribbon layer and flip the duplicated layer by choosing Edit > Transform > Flip Horizontally. Use the Move Tool (V) to position it on the right; they will serve as the headings for the sidebar content.

Creating the content area's 3D Ribbons

44 Underneath each heading, add some dummy text and maybe an image or two.

Creating the content area's 3D Ribbons

Creating the Footer

45 Recreate the hover button again (alternatively, you can simply duplicate the layers of the hover button).

Creating the Footer

46 Replace the Gradient Overlay settings using the colors listed below.

Creating the Footer

47 Merge them into one layer and rotate it via Edit > Transform > Rotate 90o CCW. Move the object on the left side of the layout.

Creating the Footer

48 Duplicate the shape again and flip it horizontally using Edit > Transform > Flip Horizontally. Move the shape across on to the other side of the layout.

Creating the Footer

49 Merge both shapes into one layer (Ctrl+E), zoom (Z) into any one of the shapes, and make a rectangular selection just like in the figure below, and choose Edit > Free Transform (Ctrl+T).

Creating the Footer

50 Select the middle anchor point and drag across to the other side of the canvas.

Creating the Footer

You should have something like this.

Creating the Footer

51 Finally, using the Horizontal Type Tool (T) add your footer information.

Creating the Footer

The end!

If you followed along the tutorial, you should end up with something like the following figure.

Download the Photoshop file

You can download the final Photoshop file (PSD) used in this tutorial to enhance your learning and to compare your own work with ours.

Please share your results!

You can share your own results on Flickr by joining the Six Revisions group and uploading your final product. Whether you’re just a beginner or an advanced Photoshop user – we’d love to see what you’ve got!

Related content

About the Author

Richard Carpenter is a freelance Web and Graphic Designer from England. Check out his portfolio here.

72 Comments

Jasmin Halkić

September 3rd, 2009

Very nicem thanks.

fred

September 3rd, 2009

It’s so nice. Thank you very much. I have a lot of ideas for next designs ;)

ArvindV

September 3rd, 2009

Cool…..

CoolerBoy

September 3rd, 2009

WoW, I was first seeing that post and commenting…
Nice work, nice tutorial.

I like this website

ei_below

September 3rd, 2009

thnks,i’m lovin it…

brum

September 3rd, 2009

nice tut, thx…

Josh

September 3rd, 2009

Very cool looking, interesting techniques used here. Thanks!

Peter

September 3rd, 2009

Awesome work!
Nice illustrated and clean design.

Love to see a coding to example.. Are you making that also?

Robbert

September 3rd, 2009

Wow, great tut – I’m really going to use it to create my own. Thx a lot!

Christian

September 3rd, 2009

Nice tut, photoshop rules!!!

Brad

September 3rd, 2009

Wonderful tutorial. On the coding end, it wouldn’t be too bad, IF I could see the final product. Once you make it you can, but I didn’t see a link to see the overall final example? very helpful tutorial for beg-intermediate.

Jon

September 3rd, 2009

Great tutorial. It’ll add some style to our designs.

richard carpenter

September 3rd, 2009

Thanks for your comments, im sure jacob will post the 2nd half (PSD TO HTML) soooon!

saurabh shah

September 3rd, 2009

Hey Richard .. nice theme tutorial … thnx for sharing…

Jacob Gube

September 3rd, 2009

I’ll confirm that Richard already finished the PSD -> HTML tutorial, we’ll be publishing it soon.

And if you have finished the this tutorial, do share your work with us here in the comments and in the Six Revisions User Group on Flickr.

Chad

September 3rd, 2009

Great work. Time to redo my site… :D

ArvindV

September 4th, 2009

I have created and added … you can see on Flickr.

Angel

September 4th, 2009

Wow, great tutorial! Now I know how to add a cool 3D effects to my works. Thanks!

Crunchy

September 4th, 2009

Awesome tutorial! Now I´m waiting for the PSD to HTML tutorial. I hope it will be published today on friday ^.^

Dusan

September 4th, 2009

It’s nice to see Photoshop on Windows (not Mac)in action. Nice tutorial

AlaskaW

September 4th, 2009

Thank you for your hard work to share this. I learned a few tricks on getting the 3D effect to stand out. I didn’t realize it was so involved or took so many steps.

xuan

September 4th, 2009

greate tutorial, thanks for shareing:)

Zábavná videa

September 5th, 2009

It´s very nice tutorial. I waiting for next posts…

Davide

September 5th, 2009

Thnx a lot. Very interesting.

I’ve shared my work on Flikr.
I’m waiting for other new tuts (PSD to HTML).

cheers

Davide aka ilgadda

massafakka

September 6th, 2009

well yeah i love it…
but how do get this baby online??? i would love to see this “second” tutorial so bad ;)

greets…

rory

September 7th, 2009

Great tutorial, I’m a web designer from the UK and I love adding 3D elements to my designs, it gives web pages a nice depth and realism. You’ve done a great job with the tabs etc a must for all designers, thanks.

Preston

September 7th, 2009

Fab tutorial – thanks for sharing…may re do the website now! :-D

j000

September 7th, 2009

Thanks a million for this great tutorial. Bookmarked it and will attempt to it later

Sam Logan

September 7th, 2009

Thanks for the incredible tutorial, this is a great layout and the 3D elements are a really nice touch.

irfanullah

September 8th, 2009

I want to convert to css and i have done every thing except i want sliding effect at hovering of the Red Image of the Navigation.

If Anyone Can Help me.

Ribbon

September 8th, 2009

Hi Richard Carpenter . You have a tutorial about psd web layout.it’s Website Layout 4 .You have Waited Psd->Html for a long time. I hope to reply me soon .

Regard.

Jacob Gube

September 8th, 2009

@Ribbon: Sorry for the inconvenience. It will be in the posting schedule soon.

Alex

September 8th, 2009

This is a great tutorial, big thanks to Richard Carpenter.

When will the second tutorial for the coding part be posted?

Davide

September 9th, 2009

@irfanullah
me too!
The same idea: the sliding effect on hovering of the red image of navigation.

Hope someone give us some help.

trudy

September 10th, 2009

wow! great tut!
thanks for the inspiration! looking foward to the coding side too! =)

sonnydesign

September 12th, 2009

ill gonna try this while im waiting for the xhmtl/css coding. Thank you

Dario Gutierrez

September 15th, 2009

Very useful!! Thanks.

Davide

September 18th, 2009

converted and published at

http://www.ilgaddaweb.it/ilgaddaweb.html

with some difference but… i like it!

thanks a lot

cheers
Davide aka ilgadda

richard carpenter

September 21st, 2009

@DAVIDE

your website displays poor in IE7, everything is messed up. Might be worth checking out.

@Everyone eles

im sure jacob will release the 2nd part soon. Please dont e-mail asking for the 2nd part…. its out of my hands.

bun

September 25th, 2009

any idea when the second half of this tutorial will be posted?

Jacob Gube

September 26th, 2009

Hi everyone, sorry for the delays in the second part – it is my fault. Richard has submitted the second part of it already, it’s undergoing the editorial process at the moment. Please stay tuned and email me if it’s been taking a while.

Here’s a sneak peak (the working demo): 3d-elements-web-template.html.

Again, apologies for the delay.

Davide

September 29th, 2009

@richard carpenter
thnx for your interest. Soon i’ll check out.

cya
Davide aka ilgadda

RJC

September 29th, 2009

Very nice tutorial. I like the ribbon technique as it is easier than another method where it required you to mess around with anchor points.

Overall, easy to follow; only thing missing was instructions for the search button part. Other then that, will there be an HTML tutorial; perhaps using Javascript so the hover moves?

One opinion is that the ribbon where there is a triangle cut stands out a bit too much from this layout; I think solid or rounded like the navigation hover may have looked better.

Thanks!

Vinh Khoa

October 24th, 2009

Great tutorial. But I have a small problem at the final steps with the ribbons, I’m still new to PS, sorry if this is just a newbie question: how could you duplicate the left ribbon to the right ones without distorting the image?

I tried to flip it horizontally and then use Ctrl + T to resize it but then the triangle and curved ends are distorted, they don’t keep the same angles anymore. Can anyone show me how to only resize the middle part of the rectangle but leave the ends instact? Thanks.

syahzul

November 4th, 2009

this is what they always say, “sharing is caring”. thank you very much for the great tutorial!

Stephan

November 13th, 2009

Thank you very much for sharing this! I recently used the style for a client.
This is the Site: http://imosolar.de

Jacob Gube

November 13th, 2009

@Stephan: Awesome job! If you have time, post a screen shot of your work in the Flickr group!

Emmanuel Olowosulu

November 15th, 2009

Wow! Superb work and detailed instructions… good job.

Belinda

December 9th, 2009

I love this look! I modified the colors and some other things and used it on my portfolio :-)

Kamil

December 24th, 2009

i think you made an error at (search)part. the size says to put 850 pk for width which is too large for the search button it should be 50px and 40pk. just a notice

Chris

January 9th, 2010

Great tutorial – I have learned a lot from it, Thanks!

Chris C2

January 22nd, 2010

I agree, excellent set of tutorials.

shakil

March 20th, 2010

good idea. how talent u r. really good

Rahul

April 15th, 2010

Thank You So much Six Revisions and Richard Carpenter

iJieZhang

April 17th, 2010

very good.
thanks!

designables

June 12th, 2010

Thank you so much for the tutorials. I am a web development student, who has learned so much from your tuts. This tutorial inspired the design I used for my web site: http://www.designables.net. I used the same transformation technique but stretched horizontally instead. Please let me know what you think. This was my first time going through the complete process: designing/splicing in Photoshop to coding & uploading in Dreamweaver. I played with the code until I figured something out for rollovers. I look forward to seeing your coding explanation.

kamal

July 9th, 2010

thank u so much sir i’m very happy

David Wheatley

July 24th, 2010

Great tutorial, the 3D elements really make the design….

Hit

August 5th, 2010

Please, code it

Raghvandra Kumar

September 4th, 2010

This is really a very nice article….

Preston

January 18th, 2011

Thanks for the tutorial Richard – it’s definitely useful reading for all budding web designers out there

Steven

March 3rd, 2011

Very well explained tutorial, I like the design elements of the website.
Though I prefer CSS layouts,
It can be useful sometimes to design a website in photoshop and try converting the PSD to XHTML/CSS.

siammore

March 21st, 2011

i love your ribbon color :)

bluerosedtu

May 1st, 2011

thanks a lot!

Sharon

May 3rd, 2011

Nice tutorial. Very creative layout.

kurtz

June 7th, 2011

cool tutorial, I am so clear to to do myself after read it, thanks for creativity..

Simon

July 12th, 2011

Great insight. I have wondered how to create the look of paper folding back on it’s self (I cheat and customise stock graphics at mo). Time to have a crack in CS5.

Thanks.

azgi

August 17th, 2011

thx u so much, it really helpfull for me as a beginers

azgi

August 17th, 2011

thx u so much, it really helpfull for me as a beginers.
is there psd to html/css converter?

Sirwan Afifi

October 2nd, 2011

hi, Very Very Nice Thanks

Leave a Comment

Subscribe to the comments on this article.