Creating A Cool 3D Web Design Effect
In Designing, Interface by FabioIn 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.
If you enjoyed this post, your vote is always highly appreciated!!
Delicious
StumbleUpon
Float
Reddit
Mixx
Comments
Leave a CommentAdd a Comment
Note: We use Gravatars on PSDTUTS, they are little icons that appear next to your name on this site and on many others. You can get a Gravatar account for free and any other site that supports it will show your avatar too!
Athens
January 7th, 2008
Very Nice Tut! Simple but effective.
Michael Castilla
January 7th, 2008
Wow that’s pretty cool. Very nice tutorial!
Fuqaha
January 7th, 2008
my god~!
This is surely a nice tutorial for web designers. I really appreciate it. Thanks!
Juanjo Vargas
January 7th, 2008
Oh! Nice tutorial! What font you used on the title? Thanks!
Aria Rajasa
January 7th, 2008
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, 2008
Great tutorials. Keep ‘em coming.
Love your stuff!
Adam
January 7th, 2008
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, 2008
Sweet!
Mark Abucayon
January 7th, 2008
That was so so nice tut. very excellent and very neat work.
cinder
January 7th, 2008
so cool….
Alberto
January 7th, 2008
Nice tutorial, I’m a web designer and I love the final result! Thank you!
Ali Salem
January 7th, 2008
WOW man! It’s looks amazing!
Jason
January 7th, 2008
Very nice. Can’t wait to try it out.
Homer Simpson
January 7th, 2008
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, 2008
strong techniques, Thank u tons.
Shane
January 7th, 2008
Another great tutorial. Cheers Fabio.
giackop
January 7th, 2008
yes!!! love it!!
nico
January 7th, 2008
an other great tuto!!
GeminiArt
January 7th, 2008
very very nice tut
good work and great result 
Machiel
January 7th, 2008
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, 2008
Like the tutorial, its always a cool.
Zenor
January 7th, 2008
Awesome
Tobolka
January 7th, 2008
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, 2008
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, 2008
Really Coool, man. Thank you for sharing…
Neil
January 8th, 2008
WOW!! Excellent Tut. Thanks for, yet again more inspiration.
Zach
January 8th, 2008
beautiful use of gradients to make a 3D effect. i will definitely be using this. thanks
apenzoon
January 8th, 2008
Hee man, i really like this tut! thnx!
Bull3t
January 8th, 2008
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, 2008
@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, 2008
Very cool effect. I’ll have to find a project to use this on. Thanks.
tripdragon
January 8th, 2008
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, 2008
Another great tutorial! Maybe I can use this on my website…
ASJ
January 8th, 2008
@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, 2008
interesing tut!
Ahmed Kachkach
January 8th, 2008
Wow thanks !
Joe
January 8th, 2008
Not really feelin’ this one
Elliott Cost
January 8th, 2008
Now I’d like to know how to cut this up and turn it into a real browser compatible website.
Constantin
January 8th, 2008
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, 2008
Really cool tuto!! tnx Fabio!
johno
January 8th, 2008
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, 2008
Víctor
January 8th, 2008
I like it better w/o the pattern, but it’s great anyway.
Fabio Sasso
January 8th, 2008
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, 2008
that’s interesting. Maybe it’s just me, but isn’t the floral kind of random?
Chuck
January 8th, 2008
A followup tutorial on how on creating the html/css would be appreciated! Thanks!
Windadct
January 8th, 2008
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, 2008
Wow that header looks like the original one from Panic CODA Website
xuyingfang
January 8th, 2008
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, 2008
the best things are borned from the easiest ways..
Spuds
January 8th, 2008
Great tutorial. Thanks for sharing.
Timothy Diokno
January 8th, 2008
Love it, digg it!
DEM
January 8th, 2008
vERY NICE!
Erik
January 8th, 2008
Really cool, but there are easier ways to do some of the steps. Peace!
b00m
January 8th, 2008
It’s good. I like it
*THUMBS UP*
Chris Laskey
January 9th, 2008
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, 2008
love this. very simple! I want to try this on a template I’m currently redoing.
Josh
January 9th, 2008
Great tutorial. As Always.
Ti
January 9th, 2008
I know it’s been said said before, but nice job! I love it!
PekeniaVi
January 9th, 2008
Hey thanks!! that’s cool!! Awsome!
Spenser
January 9th, 2008
Thank you very much for the tutorial. It should help me bring up some ideas.
Grant Novey
January 9th, 2008
I love this! Thanks for the great work. Looking forward to more.
bintek
January 9th, 2008
excellent tut!
chrisitan
January 9th, 2008
really great tutorials on your site. thank you!
phpcurious
January 9th, 2008
What else can I say … The best tut!
Avasilcai Daniel
January 9th, 2008
I like it, it’s interesting how did you do it.
Parrish
January 9th, 2008
This tutorial is fantastic!!!
Talkingtofu2
January 10th, 2008
KOOL
emil
January 10th, 2008
great tutorial, thanks for sharing !
Serta
January 10th, 2008
thanks for tutorial
Kate
January 10th, 2008
WOW!
CubidoN
January 10th, 2008
WoW!
Awesome!
CoooooL!
thanks
Didik
January 11th, 2008
It’s simple but effective! Wow! I need to do more tutorials like this
Chip
January 11th, 2008
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, 2008
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, 2008
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, 2008
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, 2008
Awesome. Will the download PSD work in Photoshop CS (8.0)? Thanks.
Terrence Campbell
January 13th, 2008
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, 2008
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, 2008
http://www.andystewart-design.com
Ghada
January 15th, 2008
I really like that tutorial. Thanks a lot.
Emma
January 15th, 2008
Wow, excellent work. I love it!
andreic
January 16th, 2008
have tried this exactly couple of days ago, and it looks pretty much the same
nice outcome, keep’em coming
felix
January 17th, 2008
this is good information for people who want to learn…… cooooool
Felix
January 17th, 2008
this is good information for people who want to learn its nice…… cooooool
Hakan
January 17th, 2008
good
Ben Gribbin
January 17th, 2008
Very nice, loverly concept
Sparrow
January 19th, 2008
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, 2008
Awesome tutorial, keep it up guys!
tiger
January 22nd, 2008
GOOD ,I Like it!
KILa
January 22nd, 2008
http://poetofzwan.deviantart.com/art/Cherished-Heart-Header-74126398
Rinky
January 24th, 2008
wow..the effect is superb! thanks for the tutorial.
iamonamac
January 25th, 2008
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, 2008
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, 2008
nice one! gives me some idea working with some of my projects…
ankraj
January 29th, 2008
very good .. I liked this site..
psykosis
February 1st, 2008
Great tutorial.
1 question though.
How do I make it lighten on mouse-over on the buttons?
Mr_LeE
February 2nd, 2008
loved this one. keep it the great work Fabio.
applied here:
hxxp://home.exetel.com.au/mrlee/mrlee/
SFW
February 4th, 2008
…Beautifull tutorial! but I’ve got some trouble with the guides…:s could somebody help me ?!
sinan işler
February 9th, 2008
good lesson..
tenx
this work made in coreldraw not photoshop
sinan işler
February 9th, 2008
http://img100.yukle.tc/images/1178sinaniser.jpg
Nicolas
February 13th, 2008
thanks for this tutorial
Nikco
(France)
sandeep jangir
February 21st, 2008
its really a great tutorial for the designer its very simple to learn
Sid
February 23rd, 2008
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, 2008
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, 2008
brilliant i was looking for some inspiration and you have provided me with just that, simple but effective.
Wiz
March 1st, 2008
Thank you very much!
Orama
March 3rd, 2008
Elegant and sophisticated, just my cup of tea!
mrvé
March 14th, 2008
Very good tutorial, thanks
pk
March 17th, 2008
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, 2008
Very Nice tutorial.
I love the Shadow underneath the header.
Adds alot of depth to the design.
D Legal
April 2nd, 2008
Excellent Tutorial! I love designs that are nice and clean; and this is definitely one of them.
LightningIsMyName
April 15th, 2008
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, 2008
wow,, great work ,, thanks
David
April 23rd, 2008
cool!
Qbrushes
April 24th, 2008
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, 2008
I am pretty impressed with this tute , It’s simple and grand….
web support agent
May 1st, 2008
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, 2008
nice wotk mate. i just tried this myself.
proje
May 5th, 2008
wowww very professional. tank you.
güvenlik
May 5th, 2008
this tutorial very helpful for lots of user. thnx. güvenlik görevlisi özel güvenlik.
website design
May 5th, 2008
Great tutorial as usually
Jason
May 7th, 2008
Great tutorial, definitely useable information. Thanks.
Danny
May 9th, 2008
You guys always make this look so easy… :\
Michael D.
May 22nd, 2008
It’s easy, but funny
Anthony Ettinger
May 22nd, 2008
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, 2008
excellent!!!! great tutorial. Thanks
vangie
June 18th, 2008
lovely job, great help for a beginner like me, i really need it, thanks
locjan
June 22nd, 2008
are this method not making site load harder.
Furious Photographers
June 28th, 2008
Dang that is so cool! Great post and pictures for illustrations
ZaFaR
July 1st, 2008
great tutorial, thanks for sharing !