Download Source Files
When we are working on a Web design project, we quite often need icons to show commands like add, delete, or edit. With the Web 2.0 trend, the use of badges and subtle 3D has become very popular. In this tutorial, I will show you how to create a really easy and very nice 3D effect to be used in either buttons and icons or elements that need some depth.
Step 1
Create a new document and select the Ellipse Tool (U). It doesn’t matter what color you use because it will be replaced later with the Layer Styles.
Step 2
Double-click the ellipse layer to open the Layer Style dialog box. Then select the Gradient Overlay and use a blue and a lighter shade of blue for the gradient colors. For the style use Radial. Next add a Bevel and Emboss as shown below.
Tip: move the radial gradient more to the top of the circle. To do that with the Layer Style dialog box still open, make sure that you are on the Gradient Overlay section, and click and hold the button and start to move the gradient.
Step 3
Duplicate the circle layer and resize it to make it slightly smaller, like the image below.
Step 4
Double-click the new layer to open the Layer Styles dialog box. Deselect all previous effects (Bevel and Emboss and Gradient Overlay). Now select Stroke and for the Fill Type select Gradient. For the colors select white for both ends of the gradient and change the opacity to 0% for the beginning and 100% to the end.
Step 5
Select the Horizontal Type Tool (T) and create a text layer. Make sure that this layer is at the top. Now open the Layer Styles box and change the Color Overlay to white, and select Inner Shadow and use the settings shown below.
Step 6
Group the three layers and call it “Blue Circle”.
Step 7
Select the Polygon Tool (U) and change some settings as shown below to create a Star Badge. Duplicate the layer and resize it like we did in step 3.
Instead of applying those layer styles to the layer, just copy the style from the previous icon we created and paste it to our new layer. To do that, select the layer you want to copy the layer style of, right-click on the mouse (Macs: Option-Click) and choose Copy Layer Style. Next select the layer you want to add the style to and right-click again and choose Paste Layer Styles.
The only thing you will have to change will be the gradient colors under the Gradient Overlay.
Conclusion
This is one of the easiest ways to create a cool 3D style button. You can eve change some settings like the stroke’s gradient color and create different 3D styles.
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
simply,nice,thanks
new photoshop tutorial.. and i`m the first commenting :D
nice tut.. thanks for sharing
Omg! There are many web 2.0 button tutorials, but this one… NICE! :D
an elegant and unique solution to creating a web 2.0 style.
Very good explanation. So hot right now.
Great tutorial Fabio! Thanks!
quick, easy, useful… thanks ;-)
One of the more profound tuts to a web 2.0 button; can’t get it simpler and effective
thanks for sharing bla bla bla bla, that is a poor comment.
Just in time for a new post for my site tomorrow. Thank you.
Great Tut Fabio. Really useful for web designers.
Really nice and extremely useful tutorial Gj.
Sadly I have an aversion to a web 2.0 look.
However I’m sure I can find other places to use this.
Thanks a bunch.
I like the tutorial, but I’m not sure I get some of the steps. In Step 2, image 1, you have Contour checked yet in the following image it is not checked. You make no mention of it in your directions and so it throws me off.
The other thing that is throwing me for a loop is in Step 4 I deselected the previous effects, but then my image turns back to the black circle. You seem to have just the stroke where as I have the fill color. I went through all the steps and I don’t see any place where you get this to just show the stroke. Your stroke also seems to be soft and mind seems to a little more hard edge. Any help here would be great. Thanks
Nice alternative for existing tutorials ;)
simple but good ;) nice work man :D
Very simple and useful, thank you very much!
Also, I love the mac-style Abduzeedo button.
good.. as always..
well… a variation with a glass effect would have been good. but… its a really great tutorial
nice
I’m not sure we should be teaching people how to create these…
Great tutorial. Simple and direct, an easy way to get a quality web 2.0 effect. Thanks.
Thank you ! ;-)
It can also do the same to create a logo RSS ?
I’ve searched the web yesterday for a tut like this and i couldn’t find any. thanx, very handy
I agree with “b”
The part where you add the stroke to the second object is poorly explained and doesn’t result in the same effect.
Thank you very much!
web 2.0 lol
I believe that I figured out the problem to the second part of my previous post in regards to the fill color still showing up. In the authors instructions of Step 4, it tells us to create a stroke effect by switching off our previous layer effects and applying a stroke. When doing this it instantly turned my layer image back to its original fill color. This of course looked nothing like what the instructions looked like. I did a little hunting around the layer style dialog box and found that if you go to the Blending Options Tab and then click on the Fill Opacity slider under Advanced Blending, it will take away the fill color thus leaving us with just the stroke. I personally think it would be helpful to add this part to this tutorial. After all, we are being “spoon fed” correct? Not a huge deal and I’m sure people might know this if they use it all the time, but it’s important to explain these little details for the benefit of the whole community. :) I love this site and just want our tutorials to be the best quality they can be. Thanks
Ah this helped so much, I was pulling my head out on why my icon didn’t look like the picture he had and was really frustrated. Kudos to you for explaining this here. Cheers.
THANK YOU! I don’t think I would have found that on my own!
Nice stuff – well written.
Fabio always leaves out steps resulting in his looking better.
I agree with Stephen, we really shouldn’t be teaching people how to make these. I have a serious aversion to simply labeling something “Web 2.0″ because it has a gradient and soft pastel colors. It’s not that I don’t believe that web 2.0 exists, it does, but this just isn’t it. Good tutorial as always, but please be careful with just exactly what you call web 2.0.
Thanks for making this so clear and understandable. Great job!!
Brilliant.
Nice Tut, I’m really a newbie while talking about photoshop and could follow the steps really easy, the problem I have is that, the button I made is for a forum, made it big, but when scaling it down it completely mess up and looks awful (the forum standard buttons are 96 x 25 pixels), if someone can help me with it I’ll be really thankful XD.
Usefull stuff. Can be used while designin web 2.0 site.
great tutorials. well expalined and easy to follow except you may have to explain to new beginners how you got the star badge image. i figure that it be hard for beginners to actually guess the outcome. overall all great tuts and thanks.
tres cool!!! ma fiance va apprendre tous ca!!!
Good job. Keep it up
Greats Tutorial ! The result is very good & 2.0 !
Following these instructions leaves someone with a black circle on top of the original.
Well you can’t get any more web2.0 than those. Nice tutorial.
Not bad, theres a nice online tool available to generate similar web 2.0 badges as well. google it :P
Nice tutorial, but I had to change the “Fill” of the smaller, duplicated circle to 0%.
Otherwise it was black ;-(
MfG Daniel
P.S.: Keep Goin’ :-)
Wow… Great tutorial.
Thanks
Good i really like this explaination and it is used to my blog http://googlemade.blogspot.com thanks by Umarfaruk
Hi,
great Tutorial.
Can anyone tell me what’s the name of the font used in this tutorial? I mean the words “PSD”, “FREE”…
AWESOME. Kudos to you for that tut…helped me alot!
~Ding!
Simple and pretty :P
Haha just used this tutorial for an icon… Didn’t come out as well, but cool tutorial
I Like every1 single tutorial of you man, rock on :D
I love those graphics, they’ll look good on my blog.