Tutorial Details
- Program: Photoshop
- Difficulty: Intermediate
- Completion Time: 1 hour
Download Source Files
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 toDividers. 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.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Fabio
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Psdtuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Very Nice Tut! Simple but effective.
Total awsome…. nice
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! :)
If only we could download source
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!
thanks, mom. spoonfed more. :)
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.
hmmmmmmm nice
It’s cool. But I can’t quite follow your pace. I’m a beginner.
In Step 5 , how to add darkred?
Thank you!
woh wonderful tut. I like vry much thanks
Step 10 is not clear at all… there is no blend mode named “color overlay”
for step 10 you have to change the layer opacity to 60% and fill to 0% so that the pattern can show through
very nice
Thank you!
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…
:(
That’s it..//
Nice tut, easy and smooth effect, thanks for sharing this!
Finally! I’ve been trying to figure out the shadow effect for awhile now…thanks!
another great from abduzeedo! never used the ‘layer mask > reveal all’ before…awesome tip!
Very nice tutorial. thank you
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!
Thanx for tutorial.
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.
Great tutorial!thanks :)
Nice tutorial, is it ok if I post it on my blog?
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.
nice moderation, leave a good file out
Thanks for sharing your creative idea about logo designing.
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?
cool,Thanks
That’s cool !
yep good work,but your information a lot of skin-deep and very bad.
very nice tutorial.
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?
ignore that. im stupid. haha.
very nice tutorial but I begin in PS.
can you help me.
how create effect step 5
i do it
thx alot
Thank you very much for the tutorial. It should help me bring up some ideas.
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.
Wow, great instructions, but I am still a little overwhelmed.
thank for your tutorial
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.
Great tutorial. This is a really nice design.
I’ve learnt a lot. Thanks.
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.
Good. Thank you very much
It’s so cool !
hi this is very informative that’s surely helps the beginner. As the header is the important part of the website we will implement your tutorial to build the innovative one thanks regards.
hi this is very enlightening that’s surely assistance the beginner. As the header is the significant part of the website we will enforce your tutorial to construct the modern one thanks regards.
Nice tut.
oh realy cool so good tutorials……
hi.i have to ask something sir. if we made psd website than how we can made html format its very import for every pepple i m waitting ur rep give us full tutor 1st u made site in photoshp and after that u have to ho dreamvewer than u make html file
wow, that actually looks pretty cool! i wish i could make something like this… guess i should try it with this tutorial
cool 3D effect. Thanks for the tutorial!
I loved it, just perfect. I did one for me, more with my style :) Thanks for the tutorial – Keit, Brazil ;D