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
thanks for good job
Check out http://www.tann3r.me/ I used this design for my website! :)
Very cool effect.
Really nice quick and simple effect. One to consider for future designs. Great work
This one is really cool.
Thanks!Really helped.
This is an awesome tutorial!! Thank you!
hey can someone help me i cant get the pattern Printed in the banner like you can. no matter what i do i cant get it to work :(. heelp. i want this to work
This tutorial was very helpful and enlightening.
I learned alot on how simple shadowing/gradients combined with simple dark colors can create a nice 3D effect to any graphic I do.
here is my result: http://krysisfx.deviantart.com/#/d2v3mv1
really nice tutorial and design, thanks for sharing..
That’s a neat effect. Thanks for mentioning that the designer must adhere to standards in terms of browser compatibility, etc. I use Chrome and it’s rare but there are some designs and sites that don’t work with it and most of the time I just don’t try a different browser – I will just leave.
in step 6 the line goes under that rectangle and i don’t know why. could you help me plz?
The gradient part is not very well laid out. Could someone help clarify the steps to replicate that?
wow ,,
so easy so beautefull
thanks
I tried to follow along but somehow wen i create the line… in the middle its blue… and not red entirely. what am i doing wrong? thank you
where do i find the blend mode color overlay ?
Pls help i alreday finished it but this is what i cant do !!!
So Easy….It’s effect really like 3d…
Thnnxxxx a lot
amazing and v easy ..thnx
like other Premium Tutorials, there are way too many missing Steps missing in this tutorial, would be great if each Step is mentioned as detailed as possible.
Example:
mention hexadecimal values, (size, position in pixels), and (numbers) in each Layer Style setting.
i think this tutorial is overrated…Why post partial of the tutorial … a big waste of time!!!
thank’s. very nice tutorial
Hello, very helpful post and great post.
Thanks.
Hey I cant see the images? Please reup the images to another hosting company..
Um, there are quite a few step that are not well explained. Like for example, in step 3, you say use the rectangular tool, but how do you create the white in the back ground. What are the exact steps to create the white area.
awesome tutorial! i realy love it!
now how to make this become alive?
any tutorial on jQuery or Flash implementation of buttons please
I was looking for a cool idea for a banner/nav bar scheme. This was a great idea. Thanks for sharing it!!@
awesome tutorial. i realy love it!
Very confusing tutorial, lots of steps not properly explained. Please expand on the gradient overlay part in particular.