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.
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.
Related Posts
Keep reading with more great tutorials and articles!
Enjoy this Post?
We'd love your vote!
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )Athens January 7th
Very Nice Tut! Simple but effective.
( )Michael Castilla January 7th
Wow that’s pretty cool. Very nice tutorial!
( )Fuqaha January 7th
my god~!
This is surely a nice tutorial for web designers. I really appreciate it. Thanks!
( )Juanjo Vargas January 7th
Oh! Nice tutorial! What font you used on the title? Thanks!
( )Aria Rajasa January 7th
Nice and easy
Never realize that using a feathered round shape instead of the usual drop shadow style could make all the difference.
( )Steven January 7th
Great tutorials. Keep ‘em coming.
Love your stuff!
( )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!
( )Stefan January 7th
Sweet!
( )Mark Abucayon January 7th
That was so so nice tut. very excellent and very neat work.
( )cinder January 7th
so cool….
( )Alberto January 7th
Nice tutorial, I’m a web designer and I love the final result! Thank you!
( )Ali Salem January 7th
WOW man! It’s looks amazing!
( )Jason January 7th
Very nice. Can’t wait to try it out.
( )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
Mohammed January 7th
strong techniques, Thank u tons.
( )Shane January 7th
Another great tutorial. Cheers Fabio.
( )giackop January 7th
yes!!! love it!!
( )nico January 7th
an other great tuto!!
( )GeminiArt January 7th
very very nice tut
good work and great result 
( )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!
( )Gery January 7th
Like the tutorial, its always a cool.
( )Zenor January 7th
Awesome
( )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
( )JBL January 8th
He probably meant just normal overlay…I color overlay is not blending mode…I suppouse. Anyway thanks for another nice tutorial.
( )Enes Kaya January 8th
Really Coool, man. Thank you for sharing…
( )Neil January 8th
WOW!! Excellent Tut. Thanks for, yet again more inspiration.
( )Zach January 8th
beautiful use of gradients to make a 3D effect. i will definitely be using this. thanks
( )apenzoon January 8th
Hee man, i really like this tut! thnx!
( )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.
( )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.
( )Sean Hodge January 8th
Very cool effect. I’ll have to find a project to use this on. Thanks.
( )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.
( )Benjamin January 8th
Another great tutorial! Maybe I can use this on my website…
( )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.
( )tomec January 8th
interesing tut!
( )Ahmed Kachkach January 8th
Wow thanks !
( )Joe January 8th
Not really feelin’ this one
( )Elliott Cost January 8th
Now I’d like to know how to cut this up and turn it into a real browser compatible website.
( )Mike January 27th
One logo image, with a UL underneath and a background-image with the rest of the logo side bar things properly set up to repeat-x and setting the y offset. very simple.. then just a div with a margin-top underneath for the content
( )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.
)
( )Fluid Design Lab January 8th
Really cool tuto!! tnx Fabio!
( )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.
( )Viking KARWUR January 8th
Nice One…
( )VÃctor January 8th
I like it better w/o the pattern, but it’s great anyway.
( )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.
( )Jonathan Solichin January 8th
that’s interesting. Maybe it’s just me, but isn’t the floral kind of random?
( )Chuck January 8th
A followup tutorial on how on creating the html/css would be appreciated! Thanks!
( )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/
( )PixlNinja January 8th
Wow that header looks like the original one from Panic CODA Website
( )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.
picaccino January 8th
the best things are borned from the easiest ways..
( )Spuds January 8th
Great tutorial. Thanks for sharing.
( )Timothy Diokno January 8th
Love it, digg it!
( )DEM January 8th
vERY NICE!
( )Erik January 8th
Really cool, but there are easier ways to do some of the steps. Peace!
( )b00m January 8th
It’s good. I like it
*THUMBS UP*
( )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!
( )CK January 9th
love this. very simple! I want to try this on a template I’m currently redoing.
( )Josh January 9th
Great tutorial. As Always.
( )Ti January 9th
I know it’s been said said before, but nice job! I love it!
( )PekeniaVi January 9th
Hey thanks!! that’s cool!! Awsome!
( )Spenser January 9th
Thank you very much for the tutorial. It should help me bring up some ideas.
( )Grant Novey January 9th
I love this! Thanks for the great work. Looking forward to more.
( )bintek January 9th
excellent tut!
( )chrisitan January 9th
really great tutorials on your site. thank you!
( )phpcurious January 9th
What else can I say … The best tut!
( )Avasilcai Daniel January 9th
I like it, it’s interesting how did you do it.
( )Parrish January 9th
This tutorial is fantastic!!!
( )Talkingtofu2 January 10th
KOOL
( )emil January 10th
great tutorial, thanks for sharing !
( )Serta January 10th
thanks for tutorial
( )Kate January 10th
WOW!
( )CubidoN January 10th
WoW!
Awesome!
CoooooL!
thanks
( )Didik January 11th
It’s simple but effective! Wow! I need to do more tutorials like this
( )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.
( )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
( )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!
( )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.
( )Walter January 12th
Awesome. Will the download PSD work in Photoshop CS (8.0)? Thanks.
( )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 
( )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?
( )andy stewart January 14th
http://www.andystewart-design.com
( )Ghada January 15th
I really like that tutorial. Thanks a lot.
( )Emma January 15th
Wow, excellent work. I love it!
( )andreic January 16th
have tried this exactly couple of days ago, and it looks pretty much the same
( )nice outcome, keep’em coming
felix January 17th
this is good information for people who want to learn…… cooooool
( )Felix January 17th
this is good information for people who want to learn its nice…… cooooool
( )Hakan January 17th
good
( )Ben Gribbin January 17th
Very nice, loverly concept
( )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 ?
( )Chamza January 21st
Awesome tutorial, keep it up guys!
( )tiger January 22nd
GOOD ,I Like it!
( )KILa January 22nd
http://poetofzwan.deviantart.com/art/Cherished-Heart-Header-74126398
( )Rinky January 24th
wow..the effect is superb! thanks for the tutorial.
( )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 ?
( )[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
tnx
( )rolly_darkhand January 28th
nice one! gives me some idea working with some of my projects…
( )ankraj January 29th
very good .. I liked this site..
( )psykosis February 1st
Great tutorial.
1 question though.
How do I make it lighten on mouse-over on the buttons?
( )Mr_LeE February 2nd
loved this one. keep it the great work Fabio.
applied here:
hxxp://home.exetel.com.au/mrlee/mrlee/
( )SFW February 4th
…Beautifull tutorial! but I’ve got some trouble with the guides…:s could somebody help me ?!
( )sinan iÅŸler February 9th
good lesson..
tenx
this work made in coreldraw not photoshop
( )sinan iÅŸler February 9th
http://img100.yukle.tc/images/1178sinaniser.jpg
( )Nicolas February 13th
thanks for this tutorial
Nikco
( )(France)
sandeep jangir February 21st
its really a great tutorial for the designer its very simple to learn
( )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!
( )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…
( )web design cheltenham February 29th
brilliant i was looking for some inspiration and you have provided me with just that, simple but effective.
( )Wiz March 1st
Thank you very much!
( )Orama March 3rd
Elegant and sophisticated, just my cup of tea!
( )mrvé March 14th
Very good tutorial, thanks
( )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.
( )Brandon March 25th
Very Nice tutorial.
I love the Shadow underneath the header.
( )Adds alot of depth to the design.
D Legal April 2nd
Excellent Tutorial! I love designs that are nice and clean; and this is definitely one of them.
( )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)
( )SAJJAD KHAN April 17th
wow,, great work ,, thanks
( )David April 23rd
cool!
( )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
Srinivas April 30th
I am pretty impressed with this tute , It’s simple and grand….
( )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!!
( )Photoshop brushes May 3rd
nice wotk mate. i just tried this myself.
( )proje May 5th
wowww very professional. tank you.
( )güvenlik May 5th
this tutorial very helpful for lots of user. thnx. güvenlik görevlisi özel güvenlik.
( )website design May 5th
Great tutorial as usually
( )Jason May 7th
Great tutorial, definitely useable information. Thanks.
( )Danny May 9th
You guys always make this look so easy… :\
( )Michael D. May 22nd
It’s easy, but funny
( )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.
( )durriya June 3rd
excellent!!!! great tutorial. Thanks
( )vangie June 18th
lovely job, great help for a beginner like me, i really need it, thanks
( )locjan June 22nd
are this method not making site load harder.
( )Furious Photographers June 28th
Dang that is so cool! Great post and pictures for illustrations
( )ZaFaR July 1st
great tutorial, thanks for sharing !
( )Versus July 10th
Very nice! Thanks!
( )Mauricio July 11th
Good tutorial, keep’em coming!
( )bryan July 21st
nice awesome!
hope someday u put it as a template fro download so we cna have it for our sites =D
( )MD July 23rd
nice result
( )Sawant August 10th
I got everything EXCEPT for Step 10. Can you elaborate a little on that?
In essence, the only thing my design doesn’t have is the pattern. The rest looks the same. Thanks. It was a great tutorial. =D
( )Theo August 11th
WEW!!
( )Nicki August 28th
I love this tutorial! I’ve run it with minimal problems (that darn step 10 is a tricky one), and hope it ends up in my final product!
( )Gino August 31st
that’s amazing,it give me a fresh mind!
( )mauritius September 14th
Nice tutorial…
( )Ahmed September 18th
Very Nice…
( )EmKei September 19th
So, realy nice tutorial but I more like real 3D models in any 3D programs like 3DS Max and others.. By the way.. this tutorial not bad..
( )saphirre12 September 22nd
Absolutely awesome techique . I learn a lot from psdtuts . THank you
( )Web Mahsülleri Ofisi October 3rd
good job;) thanks!
( )The Man October 12th
Total awsome…. nice
( )thetattoo design October 24th
wowww very professional. thank you.
( )ravi October 30th
very nice
( )Paresh Khatri December 27th
Hi really very nice!!!!!!!!!!!!!!!!!!!!!!!
( )website design January 23rd
Great starter tutorial. You guys should post a couple of different header design tutorials and put them together as a guide to web 2.0 design.
( )Frank January 27th
Very Nice Tut! Simple but effective.
( )Total awsome…. nice
Just Starting February 4th
In the last image, you show one of the menu items as hovered or active. Where can I find a tutorial to do that? Thanks for your help!
( )Taylor Satula February 23rd
If only we could download source
( )bill17 February 25th
this is both an awesome and easy tut. I used to make a website for a school web page design class and it turned out great!
( )depotdigital February 27th
thanks, mom. spoonfed more.
( )Jamie Allsop February 27th
Very nice tutorial. Adding effects like these to websites can really make a site that more interesting. There are many simple effects that you can add to the design of your site to give it a little depth and make it stand out from the crowd. When designing sites I try and add in as much detail as I can but it is only by doing simple effects like the ones shown in this tutorial.
( )Muhammad Ahmad March 13th
hmmmmmmm nice
( )Wordsworms March 19th
It’s cool. But I can’t quite follow your pace. I’m a beginner.
( )In Step 5 , how to add darkred?
Thank you!
insha24 March 19th
woh wonderful tut. I like vry much thanks
( )ken April 26th
Step 10 is not clear at all… there is no blend mode named “color overlay”
( )ken April 26th
for step 10 you have to change the layer opacity to 60% and fill to 0% so that the pattern can show through
( )m.udaya April 29th
very nice
( )Thank you!
doesn't work for me. May 22nd
doesn’t work for me…
————-
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.
—————
It either comes out white, or the pattern doesn’t show… and I dont have a color overlay blend mode… from the drop down menu, I do have Overlay…. but in the main effects area for the blend mode I do have a color overlay, but it comes out red… and applying the layer mask, the image still doesn’t show even after selecting the layer mask square…
( )kareemshaik May 27th
That’s it..//
( )Xtence May 31st
Nice tut, easy and smooth effect, thanks for sharing this!
( )L.A. Design Junkie June 16th
Finally! I’ve been trying to figure out the shadow effect for awhile now…thanks!
( )nszumowski June 18th
another great from abduzeedo! never used the ‘layer mask > reveal all’ before…awesome tip!
( )li June 19th
Very nice tutorial. thank you
( )Tom June 24th
Very nice, but need to be more accurate with your explanation. There are a couple holes or gaps, that tend to confuse. Specially if you are trying to follow and want to make your own design.
Very nice though!
( )Derek B July 21st
Thanx for tutorial.
( )Joy July 29th
Cool tutorial!
Do you mind if I use this as a website design?
( )Of course, it’s gonna have a different logo on there, but I’ve been trying to figure out what kind of design I showed make for a website that I’m making for a church.
Chris September 10th
Great tutorial!thanks
( )Mady September 15th
Nice tutorial, is it ok if I post it on my blog?
( )Brandon C October 9th
Great idea, but the tutorial leaves alot to be desired.
I have made a sample psd file for use in helping the tutorial for begginers.
( )Cliff October 9th
nice moderation, leave a good file out
( )Bilal October 11th
Thanks for sharing your creative idea about logo designing.
( )Donald October 21st
Really creative, however doesn’t fit the style of my website that is in designing stage, however and website is something to be designed not copied, right?
( )bobo October 25th
cool,Thanks
( )qiqiboy October 25th
That’s cool !
( )Tarık Turalp November 7th
yep good work,but your information a lot of skin-deep and very bad.
( )N-Designs November 15th
very nice tutorial.
( )Luke Wheldon November 19th
Hi, I can’t get past step 4 “After that, convert it to Smart Filters, apply a Gaussian Blur and change the opacity to 60%.”
I’ve done what you said but it’s not working. It lets me apply the blur but doesn’t show that it has done it. Do you know what might be going wrong?
( )Luke Wheldon November 19th
ignore that. im stupid. haha.
( )Jose Angel Huerta December 2nd
very nice tutorial but I begin in PS.
( )can you help me.
how create effect step 5
PonDolZa December 7th
i do it
thx alot
( )Club Penguin Cheats December 23rd
Thank you very much for the tutorial. It should help me bring up some ideas.
( )Club Penguin Cheats December 23rd
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.
( )Aspen Wedding Photographer December 28th
Wow, great instructions, but I am still a little overwhelmed.
( )wirul December 30th
thank for your tutorial
( )juan January 2nd
Could anyone tell me why is it that when I use my rectangle too it is not filled with the foreground selected. I keep getting and empty rectangle no matter what colour I choose.
( )Mark January 17th
Great tutorial. This is a really nice design.
( )I’ve learnt a lot. Thanks.
Irena January 21st
Hello I’m still only a beginner web designer, could you help me in 6 step when you do reveal all you’re just doing this for a group with shapes, nothing happens because they are in other layers. In principle, any effect does not occur, and the like would create a three dimensional effect as you, thank you in advance.
( )Davetiye January 21st
Good. Thank you very much
( )keyqin February 5th
It’s so cool !
( )