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.
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 )frky February 12th
simply,nice,thanks
( )react February 12th
new photoshop tutorial.. and i`m the first commenting
( )nice tut.. thanks for sharing
Markus February 12th
Omg! There are many web 2.0 button tutorials, but this one… NICE!
( )Zach February 12th
an elegant and unique solution to creating a web 2.0 style.
( )james February 12th
Very good explanation. So hot right now.
( )Simon February 12th
Great tutorial Fabio! Thanks!
( )petistovka February 12th
quick, easy, useful… thanks
( )Conrad February 12th
One of the more profound tuts to a web 2.0 button; can’t get it simpler and effective
( )Ignacio February 12th
thanks for sharing bla bla bla bla, that is a poor comment.
( )CP February 12th
Just in time for a new post for my site tomorrow. Thank you.
( )Sean Hodge February 12th
Great Tut Fabio. Really useful for web designers.
( )Nikhil February 12th
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.
( )b February 12th
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
( )Sebastian February 12th
Nice alternative for existing tutorials
( )GeminiArt February 12th
simple but good
nice work man 
( )Alberto February 12th
Very simple and useful, thank you very much!
( )Also, I love the mac-style Abduzeedo button.
giackop February 12th
good.. as always..
( )Juliet February 12th
well… a variation with a glass effect would have been good. but… its a really great tutorial
( )b00m February 12th
nice
( )Stephen February 13th
I’m not sure we should be teaching people how to create these…
( )JPH February 13th
Great tutorial. Simple and direct, an easy way to get a quality web 2.0 effect. Thanks.
( )Sam ° World February 13th
Thank you !
It can also do the same to create a logo RSS ?
( )ayad February 13th
I’ve searched the web yesterday for a tut like this and i couldn’t find any. thanx, very handy
( )matt February 13th
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.
( )tarya February 13th
Thank you very much!
( )LOL February 14th
web 2.0 lol
( )b February 14th
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
( )KG July 16th
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.
( )Shane February 14th
Nice stuff – well written.
( )a February 14th
Fabio always leaves out steps resulting in his looking better.
( )John February 15th
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.
( )doodle February 15th
Thanks for making this so clear and understandable. Great job!!
( )imakemudcastles February 16th
Brilliant.
( )Javier February 18th
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.
( )Katalog Stron February 18th
Usefull stuff. Can be used while designin web 2.0 site.
( )mamadou diallo February 19th
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.
( )Andre Coul February 21st
tres cool!!! ma fiance va apprendre tous ca!!!
( )yaar February 25th
Good job. Keep it up
( )Mickaël February 25th
Greats Tutorial ! The result is very good & 2.0 !
( )Design Submit February 26th
Following these instructions leaves someone with a black circle on top of the original.
( )Simon James February 27th
Well you can’t get any more web2.0 than those. Nice tutorial.
( )Aidan March 16th
Not bad, theres a nice online tool available to generate similar web 2.0 badges as well. google it
( )Daniel March 16th
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’
( )Alen March 25th
Wow… Great tutorial.
Thanks
( )Umarfaruk March 29th
Good i really like this explaination and it is used to my blog http://googlemade.blogspot.com thanks by Umarfaruk
( )Alex April 13th
Hi,
great Tutorial.
( )Can anyone tell me what’s the name of the font used in this tutorial? I mean the words “PSD”, “FREE”…
shellie April 15th
AWESOME. Kudos to you for that tut…helped me alot!
~Ding!
( )Harry April 17th
Simple and pretty
( )Danny May 13th
Haha just used this tutorial for an icon… Didn’t come out as well, but cool tutorial
( )Jaap lelie NL May 17th
I Like every1 single tutorial of you man, rock on
( )Web 2.0 Blog May 25th
I love those graphics, they’ll look good on my blog.
( )ekramy June 23rd
very nice work …
( )listen to radios July 24th
Very useful tutorial indeed. I like it a lot.
( )Anjum August 24th
thanks buddy
( )Josh August 27th
Some mistakes, they dont comment it or correct it, same old crap.
( )Back to find a good PTSHP tut site…………..
fun2006 September 12th
nice tut, thanks
( )Ben November 10th
@alex it’s DIN from http://www.fontshop.com, I do believe.
( )Honour Chick January 4th
wow… awesome tutorial
thxs
( )RookCreations January 22nd
Wonderful! Really useful effect for my projects.
( )Jamie Allsop March 17th
Icons are a useful and effective way of getting information to stand out and grab the users attention, whether it be to display a special offer, or a button to click through to another page instead of just linking text. I find icons really useful and where I can use them in a design I will. It would be nice to know how other people use icons in there designs and if they think they are an effective way of getting information across?.
( )ss April 17th
nice tutorial
( )scorpy September 7th
cool!
( )sap September 24th
really good !
( )