Creating A Cool 3D Web Design Effect

Jan 7th in Designing, Interface by Fabio

In this tutorial I will show you some very easy techniques, using gradients and layer styles, that we can use to produce nice subtle 3D effects in our web designs.

Author: Fabio

I am a Brazilian designer living in Porto Alegre (south of Brazil). In 2003, I founded a web design studio called ZEE, with Fabiano Meneghetti, an architect and friend of mine. It's a small studio now, with 4 people working basically with web.

Step 1

Create a new document with 1000x750px. Double click on the background’s layer and in Color Overlay and choose a dark brown.

Step 2

Enable the rulers (View>Rulers) on your document and add some guides as shown below. Create 2 horizontal guides, the first at 30px and the second at 250px. After that add 2 vertical guides at 100px and 900px.

Step 3

Create a rectangle with the Rectangle Tool (U). Use the guides for reference. Rename the layer to “header”.

Step 4

Choose black for your foreground color. Select the Ellipse Tool and create the shape that will be the shadow. Make it a bit higher than the white rectangle as shown. Rename the layer to “shadow” and put it below the “header” layer.

After that, convert it to Smart Filters, apply a Gaussian Blur and change the opacity to 60%.

Step 5

With the “header” layer selected, double click it to open the Layer Style dialog box. Select Gradient Overlay. Change the gradient style to radial. For the colors I used dark reds.

Step 6

Next, select the Line Tool (U) and choose the lighter color of the header gradient and create a line. After that choose black and create another line just 1 pixel above the red line. Select the 2 lines and group them. Rename the group the "vDivider".

Go to Layer>Layer Mask>Reveal All. Using the Gradient Tool, select a Radial Gradient from Black to White and apply a mask to our group. Start the gradient from the center of the group.

Step 7

Create the menu using the Horizontal Type Tool (T). Use white for the text color. Select all links and group them. Rename the group “White Links”.

Duplicate the group and place it below the white links, change the text color to black and move the group 1 pixel up and left. That will create a nice 3D effect, exactly like the one we did with the lines.

Step 8

Repeat the Step 6, but this time create the horizontal dividers for the links. Use the line tool to draw a red line and 1 pixels to the left draw a black line. Group them and duplicate the group 5 times. Distribute the groups as shown below.

Step 9

Select all groups of lines and group them. Rename the group to “hDividers”. After that apply a layer mask, Layer>Layer Mask>Reveal All. But this time use Linear.

Step 10

Open the pattern file, or get any pattern you like. Select all and go to Edit>Define Pattern. Call it "webPattern".

Duplicate the “header layer” and rename it to “pattern”. Go to its Layer Styles and disable the Gradient Overlay and set a Pattern Overlay. Choose the "webPattern" we created and change the Blend Mode to Color Overlay.

After that apply a layer mask to the pattern layer using a Radial Gradient.


Pattern

Step 11

Now we can add the logo and the spoon.

For the text, type PSDTUTS, select a bold typeface for the PSD and a regular or light for the TUTS. Go to Layer Styles and apply a Drop Shadow, Gradient Overlay, and Stroke. That’s a very common and beautiful effect.

Conclusion

When we work with web design we have to consider file sizes, browser compatibilities and many other issues. Sometimes little details like subtle gradients or borders using 2 colors can create a very nice visual effect or unique style without requiring many hacks and adjustments.

 


Enjoy this Post?

We'd love your vote!

User Comments

( ADD YOURS )

  1. Athens January 7th

    Very Nice Tut! Simple but effective.


  2. Michael Castilla January 7th

    Wow that’s pretty cool. Very nice tutorial!


  3. Fuqaha January 7th

    my god~!

    This is surely a nice tutorial for web designers. I really appreciate it. Thanks!


  4. Juanjo Vargas January 7th

    Oh! Nice tutorial! What font you used on the title? Thanks!


  5. Aria Rajasa January 7th

    Nice and easy :D Never realize that using a feathered round shape instead of the usual drop shadow style could make all the difference.


  6. Steven January 7th

    Great tutorials. Keep ‘em coming.

    Love your stuff!


  7. Adam January 7th

    Not too shabby at all. I wish there were more tutorials for web design than the ones already posted. Keep up the good work!


  8. Stefan January 7th

    Sweet!


  9. Mark Abucayon January 7th

    That was so so nice tut. very excellent and very neat work.


  10. cinder January 7th

    so cool….


  11. Alberto January 7th

    Nice tutorial, I’m a web designer and I love the final result! Thank you!


  12. Ali Salem January 7th

    WOW man! It’s looks amazing!


  13. Jason January 7th

    Very nice. Can’t wait to try it out.


  14. Homer Simpson January 7th

    Hi. Really @ great tutorial.
    But i can’t see this image http://psdtuts.com/designing-tutorials/creating-a-cool-3d-web-design-effect/webt_s10.jpg


  15. Mohammed January 7th

    strong techniques, Thank u tons.


  16. Shane January 7th

    Another great tutorial. Cheers Fabio.


  17. giackop January 7th

    yes!!! love it!!


  18. nico January 7th

    an other great tuto!!


  19. GeminiArt January 7th

    very very nice tut ;) good work and great result ;)


  20. Machiel January 7th

    Crystal clear and giving a lot of inspiration!
    Nice tutorial with good tips !

    Glad to see you again in the new year!


  21. Gery January 7th

    Like the tutorial, its always a cool.


  22. Zenor January 7th

    Awesome ;)


  23. Tobolka January 7th

    This is great tutorial, but i have litle problem with pattern in step 10. You say “…and change the Blend Mode to Color Overlay…. “. Where is Color Overlay? Please can you help me? Thanks


  24. JBL January 8th

    He probably meant just normal overlay…I color overlay is not blending mode…I suppouse. Anyway thanks for another nice tutorial.


  25. Enes Kaya January 8th

    Really Coool, man. Thank you for sharing…


  26. Neil January 8th

    WOW!! Excellent Tut. Thanks for, yet again more inspiration.


  27. Zach January 8th

    beautiful use of gradients to make a 3D effect. i will definitely be using this. thanks


  28. apenzoon January 8th

    Hee man, i really like this tut! thnx!


  29. Bull3t January 8th

    Another good tutorial, but it assumes you have more than a basic knowledge of Photoshop; for example I don’t really know how to handle layer masks and it was only near the end when I noticed that this tutorial needed it (but didn’t tell me how to create a layer mask), so I abandoned it. Thanks though.


  30. Bart January 8th

    @Tobolka:

    Look at the picture above step 5 and notice the layers pallete. In the top left of that pallete you spot a dropdown menu currently saying: “Normal”. Pull it out and you will find color overlay. All the outer options are could blendmodes.


  31. Sean Hodge January 8th

    Very cool effect. I’ll have to find a project to use this on. Thanks.


  32. tripdragon January 8th

    Ok, but why not use this then for the site ? It’s weird to say one thing, and then follow the other.


  33. Benjamin January 8th

    Another great tutorial! Maybe I can use this on my website…


  34. ASJ January 8th

    @Tripdragon - I think it was more so to give the reader a point of reference.

    Great tutorial, it is nice to see designers using proper depth in designs.


  35. tomec January 8th

    interesing tut!


  36. Ahmed Kachkach January 8th

    Wow thanks !


  37. Joe January 8th

    Not really feelin’ this one :(


  38. Elliott Cost January 8th

    Now I’d like to know how to cut this up and turn it into a real browser compatible website.


  39. Constantin January 8th

    Really nice and simple. I love it.

    Oh and about the “You Sucjk at Photoshop ” I just can’t stop laughing about it. :))


  40. Fluid Design Lab January 8th

    Really cool tuto!! tnx Fabio!


  41. johno January 8th

    As usual, a very impressive tutorial with a stunning end product. I thought I knew PhotoShop pretty well until I started reading these tut’s.


  42. Viking KARWUR January 8th

    :) Nice One…


  43. Víctor January 8th

    I like it better w/o the pattern, but it’s great anyway.


  44. Fabio Sasso January 8th

    Thank you all for the comments. I will try to get some time to write a tutorial showing how to create the xhtml/css for this image. Maybe a header for wordpress or drupal.


  45. Jonathan Solichin January 8th

    that’s interesting. Maybe it’s just me, but isn’t the floral kind of random?


  46. Chuck January 8th

    A followup tutorial on how on creating the html/css would be appreciated! Thanks!


  47. Windadct January 8th

    Niiiice…. -

    Regarding the slice - this came up on digg a while back..

    http://ehowtodo.com/forumm/viewtopic.php?t=201

    or

    http://www.csslicingguide.com/


  48. PixlNinja January 8th

    Wow that header looks like the original one from Panic CODA Website ;)


  49. xuyingfang January 8th

    this instruction is great!
    so you use web design to design web, it looks easy to follow the instruction.
    i just can use dreamwear to do the job.
    i will try this.


  50. picaccino January 8th

    the best things are borned from the easiest ways..


  51. Spuds January 8th

    Great tutorial. Thanks for sharing.


  52. Timothy Diokno January 8th

    Love it, digg it!


  53. DEM January 8th

    vERY NICE!


  54. Erik January 8th

    Really cool, but there are easier ways to do some of the steps. Peace!


  55. b00m January 8th

    It’s good. I like it ;) *THUMBS UP*


  56. Chris Laskey January 9th

    Thanks for another great tut Fabio. I’m always amazed at the small things I pick up when reading these tutorials - in this case, adding a repeating texture where I usually wouldn’t think to. Brilliant!


  57. CK January 9th

    love this. very simple! I want to try this on a template I’m currently redoing.


  58. Josh January 9th

    Great tutorial. As Always.


  59. Ti January 9th

    I know it’s been said said before, but nice job! I love it!


  60. PekeniaVi January 9th

    Hey thanks!! that’s cool!! Awsome!


  61. Spenser January 9th

    Thank you very much for the tutorial. It should help me bring up some ideas.


  62. Grant Novey January 9th

    I love this! Thanks for the great work. Looking forward to more.


  63. bintek January 9th

    excellent tut!


  64. chrisitan January 9th

    really great tutorials on your site. thank you!


  65. phpcurious January 9th

    What else can I say … The best tut!


  66. Avasilcai Daniel January 9th

    I like it, it’s interesting how did you do it.


  67. Parrish January 9th

    This tutorial is fantastic!!!


  68. Talkingtofu2 January 10th

    KOOL


  69. emil January 10th

    great tutorial, thanks for sharing !


  70. Serta January 10th

    thanks for tutorial


  71. Kate January 10th

    WOW!


  72. CubidoN January 10th

    WoW!

    Awesome!

    CoooooL!

    thanks


  73. Didik January 11th

    It’s simple but effective! Wow! I need to do more tutorials like this :)


  74. Chip January 11th

    This one is really cool. I was looking these days for an interface idea, and I stumbled upon this tutorial. I’ll definitely use it for one of my new sites.

    It’s spectacular, just like I want my new site to be.


  75. Constantin Potorac January 11th

    You Suck at Photoshop second version is I have to say so funny. :))

    Sorry this post is not related to this tutorial but I think this guy should start writing tutorials for PSD and try maybe to win some money.

    Poor guy. :( Just Joking.

    Thank you Collis for sharing the video. It is hilarious


  76. Chris January 12th

    Another great tutorial! I’d also like to see a follow up tutorial on the html/css for this. Looking forward to it!


  77. Adam January 12th

    This is so vague at some points. Half the time steps are left out and figuring them out is almost impossible. It’s a great idea, and it looks nice, but no intermediate Photoshop user will be able to follow this without error.


  78. Walter January 12th

    Awesome. Will the download PSD work in Photoshop CS (8.0)? Thanks.


  79. Terrence Campbell January 13th

    Man, this color will match my Project Venom on Phinx FX :). thanks for the tutorial..i and a good idea with the white space ;)


  80. john January 14th

    this is great! very easy to do. Just one question… how do i make it so i can use this on a webpage and make the links work?


  81. andy stewart January 14th

    http://www.andystewart-design.com


  82. Ghada January 15th

    I really like that tutorial. Thanks a lot.


  83. Emma January 15th

    Wow, excellent work. I love it!


  84. andreic January 16th

    have tried this exactly couple of days ago, and it looks pretty much the same
    nice outcome, keep’em coming


  85. felix January 17th

    this is good information for people who want to learn…… cooooool


  86. Felix January 17th

    this is good information for people who want to learn its nice…… cooooool


  87. Hakan January 17th

    good


  88. Ben Gribbin January 17th

    Very nice, loverly concept


  89. Sparrow January 19th

    Hello !

    Very very nice tutorial, but i’dont succeed in step 10. I’dont understand very well.

    I have apply the Pattern, but I don’t know if I must change the “Blend mode” in the shadow where i apply the pattern (fx), or where all the layers are ?

    At this time, I have do this on the “Fx” shadow.

    I have try to apply the gradient but it’s not the result wanted.

    Can someone help me please ?


  90. Chamza January 21st

    Awesome tutorial, keep it up guys!


  91. tiger January 22nd

    GOOD ,I Like it!


  92. KILa January 22nd

    http://poetofzwan.deviantart.com/art/Cherished-Heart-Header-74126398


  93. Rinky January 24th

    wow..the effect is superb! thanks for the tutorial.


  94. iamonamac January 25th

    When I use the line tool (U) and choose 1px, the line is not only 1px, there is a light one over or under, it’s not a clean-looking like in your exemple or if I use a draw tool of 1px… what is the problem ?


  95. [ita]nex January 27th

    wow!
    just…

    http://psdtuts.s3.amazonaws.com/36_WebDesign/webt_s10.jpg

    it’s the exact link for the image number 10 :D

    tnx


  96. rolly_darkhand January 28th

    nice one! gives me some idea working with some of my projects…


  97. ankraj January 29th

    very good .. I liked this site.. ;)


  98. psykosis February 1st

    Great tutorial.

    1 question though.

    How do I make it lighten on mouse-over on the buttons?


  99. Mr_LeE February 2nd

    loved this one. keep it the great work Fabio.

    applied here:

    hxxp://home.exetel.com.au/mrlee/mrlee/


  100. SFW February 4th

    …Beautifull tutorial! but I’ve got some trouble with the guides…:s could somebody help me ?!


  101. sinan iÅŸler February 9th

    good lesson..

    tenx

    this work made in coreldraw not photoshop :D


  102. sinan iÅŸler February 9th

    http://img100.yukle.tc/images/1178sinaniser.jpg


  103. Nicolas February 13th

    thanks for this tutorial

    Nikco
    (France)


  104. sandeep jangir February 21st

    its really a great tutorial for the designer its very simple to learn


  105. Sid February 23rd

    very cool. I am about to try my hand at designing a web page so this will give me a great headstart. Thx a lot!


  106. Raine February 26th

    This is really cool but it seems like there is several of the steps missing? Unless I’m not getting the point of a tutorial right, there’s a lot of things that are not explained but are shown in the final product…


  107. web design cheltenham February 29th

    brilliant i was looking for some inspiration and you have provided me with just that, simple but effective.


  108. Wiz March 1st

    Thank you very much!


  109. Orama March 3rd

    Elegant and sophisticated, just my cup of tea!


  110. mrvé March 14th

    Very good tutorial, thanks ;)


  111. pk March 17th

    hi, this is a very nice tutorial but not quite useful for people who are not already super familiar with PS. for example, in step 6, we are to apply “radial” gradient. where shd we find it? i have selected the “gradient overlay” in my “layer style” but i don’t see the screen that is shown in your screen shot. so my color is still white. there is nowhere i can change the color. when i click on “blending options: default” on the top left of the layer style window, i see the window like yours, but my color box on the right hand side is white, while yours is brownish red. i tried clicking on it and it doesn’t work. any idea what i am missing?

    also, how do you the page curl in the image at the end of your article? this one:
    http://psdtuts.com/wp-content/themes/psdtuts_v2/site_images/footer_join.jpg

    thank you.


  112. Brandon March 25th

    Very Nice tutorial.

    I love the Shadow underneath the header.
    Adds alot of depth to the design.


  113. D Legal April 2nd

    Excellent Tutorial! I love designs that are nice and clean; and this is definitely one of them.


  114. LightningIsMyName April 15th

    Hello,

    Thanks for this tutorial, it inspired me and i’ll use something similar on the site that I’m building (I’m a GIMP user, not a PS user and this was still very helpful)

    ~LightningIsMyName (LIMN)


  115. SAJJAD KHAN April 17th

    wow,, great work ,, thanks


  116. David April 23rd

    cool!


  117. Qbrushes April 24th

    this is a good example how something that technically easy but to come up with the idea is whats hard :)
    good work


  118. Srinivas April 30th

    I am pretty impressed with this tute , It’s simple and grand….


  119. web support agent May 1st

    hi.. wow!! very nice.. you made it very beautiful. very simple but it looks so great. i wish you will post another tutorial. it helps a lot. have a nice day!!


  120. Photoshop brushes May 3rd

    nice wotk mate. i just tried this myself.


  121. proje May 5th

    wowww very professional. tank you.


  122. güvenlik May 5th

    this tutorial very helpful for lots of user. thnx. güvenlik görevlisi özel güvenlik.


  123. website design May 5th

    Great tutorial as usually


  124. Jason May 7th

    Great tutorial, definitely useable information. Thanks.


  125. Danny May 9th

    You guys always make this look so easy… :\


  126. Michael D. May 22nd

    It’s easy, but funny


  127. Anthony Ettinger May 22nd

    The hover link was a little difficult, but I played around with gradients, opacity and blend modes to get the effect similar (but not quite) like in the original.

    Great tutorial overall.


  128. durriya June 3rd

    excellent!!!! great tutorial. Thanks


  129. vangie June 18th

    lovely job, great help for a beginner like me, i really need it, thanks


  130. locjan June 22nd