The difficulty in designing web graphics is not so much in the actual execution of the design, but more in the planning of it. At the same time you want the graphic to be eye-catching, yet smooth and small enough so it doesn't dominate your layout. This tutorial will teach you how to create a graphic that does just that.
Step 1
Let's start our new document by setting the background color to #303030. Then create a circular shape using the Ellipse tool (U), keep holding Shift while dragging outwards to create a perfect circle. Start dragging from the center of the canvas while holding down Alt. This way the shape is centered around the initial position of your mouse. Fill this shape with #bcbcbc, and name the layer "ring 1."
Step 2
Duplicate the "ring 1" layer. Then use the Free Transform Tool (CMD+T) to re-size the circle slightly, so that it matches the one created previously. I've named this layer "ring 2."
CTRL + Click on the "ring 2" layer to create a selection around the smaller circle. Then navigate to select > modify > expand. Then use an expansion radius of 3 pixels. Go back to the "ring 1" layer and hit the Add Layer Mask button in the layer palette, as illustrated below. This cuts out the part that is covered by the "ring 2" shape.
Step 3
Next apply layers styles to both "ring 1" and "ring 2" layers. Follow the instructions in the image below. A gradient overlay is generally used on the 'outer shell' of a web graphic to give it depth. It can be used to inset an image when contrasting gradients are used. This is an old technique, which is not necessary for our image. Furthermore, inner glow, when used with dark colors will create a sort of 'inflated' look. It gives the illusion of a shadow being present all around the shape, thus causing the shape to rise up from the canvas.
Step 4
Select "ring 2" again, and on a new layer drag down a gradient. Set this layer to hard light.
Step 5
On a new layer, create another ring and apply the same layer style as was used on "ring 2" (see step 3). I called this layer "ring 3." It may seem unorthodox to stack the same elements over and over again, but the layered effect is a time saving technique used to create something complex looking.
Step 6
Duplicate the "ring 3" layer and call it "fill." Our icon is going to be blue, so fill it with #446fce. Then change the layer styles, as shown in the image below.
Step 7
Duplicate the "fill" layer. Then set the fill to 0% (Not the opacity). Then call it "highlight ring," and apply the layer styles shown below.
Step 8
Create a new layer, call it "highlight brush." Then set it to soft light. Next, using a soft white brush gently tap the top of the blue part until it starts to light up.
Step 9
Go to the custom shape tool. Then at the top, select the arrow that I marked in the image below. Drag this arrow out while holding shift for a nice even shape. Rotate it, so that it faces downwards, use free transform (ctrl/cmd + t) to do this. Then duplicate the layer, move it up a bit (you can use the arrow keys), and again use free transform to make it slightly smaller. Hold shift when making the element smaller so that it retains the correct proportions.
Step 10
I merged these two shapes and called the layer "arrows." Next, add the following layer styles to this layer.
Step 11
Time to add the gloss, I called this layer "glossy". First, I drew out a shape. Then I set the opacity of that layer to 30%. Next, I ctrl/cmd + click on the blue layer. Then I select the circle outline. Hit the mask button (like in step 2), and everything outside of the selection is masked away. Use a soft black brush on the mask, and go right along the edges to soften them up. This is a matter of taste though.
Step 12
Lastly, let's add a shadow on a new layer below all of the other layers we just created. Use a soft black brush and tap in such a way that just the edges of each brush stroke are visible. Our final image is below.
Conclusion
What have we learned in this tutorial? We've learned to stack elements upon themselves to create depth. We've learned to use layer styles to create depth and 3d shapes. We've learned that simple objects can be turned into complex images easily. We've learned that simple glossy effects should be used properly. Don't abuse them. Web 2.0 is much more than just gradients. Enjoy, and thanks for reading!
Related Posts
Keep reading with more great tutorials and articles!
Enjoy this Post?
We'd love your vote!
User Comments
( ADD YOURS )mausyo June 18th
first ?
Zach LeBar June 18th
second?
Kobi June 18th
Excelent as usual
Carlos June 18th
Cool icon! Looks very nice!
Grum June 18th
Seventh!
Johan June 18th
<3
drew June 18th
this is tut is very simple and great for a beginner. although it is very simple, it still produces a great product! great work, arik.
LOSWL June 18th
mausyo and Zach Lebar, please stop the infantile behavior and start placing real comments in the post!!..how old are you guys anyway? (if you are under 5 year old disregard my comments)…..anyways….great way to construct an icon, thanks for the tut!! :o)
Scott Lowe June 18th
8th?
Clemson June 18th
Nice simple tutorial.
Kim Dolleris June 18th
Looks great!
thx for sharing!
Ryan June 18th
Cool tutorial, though the edges are a little rough on the icon. Sizing it down for proper use should take care of that.
Duluoz June 18th
1999 anyone? Could you have used anymore gradients for that faux, not even close to realistic, plastic-y look? Looks horrible.
Ben Griffiths June 18th
Nice and straight forward, thanks
kailoon June 18th
back to glossy again? Hmm….
Andrew June 18th
Nice tut, thanks!
ed burns June 18th
Step 2 has one slight oversight.
Where it says:
Go back to the “ring 1″ layer and hit the Add Layer Mask button in the layer palette, as illustrated below. This cuts out the part that is covered by the “ring 2″ shape.
It should read:
Go back to the “ring 1″ layer and hit the Add Layer Mask button in the layer palette (then press the keyboard combo of “CTRL + i” to invert the selection), as illustrated below. This cuts out the part that is covered by the “ring 2″ shape.
For a beginner like me this was a little confusing. If you do not press CTRL + i all you will be doing is making “ring 1″ 3 pixels larger than “ring 2″
Btw, I love this site!!!!! This site is a dream come true! It is so great to learn how the masters do it!
ed burns June 18th
Correction to my comment above. I also had a slight oversight. Instead of “CTRL + i” it should be “CTRL + SHIFT + i” or you can go to Select > Inverse.
Cheers!
FrankCrank June 18th
a fundamental tut -imho
btw when you are going to publish my EXPLOSION tut bro!!!
Danny June 18th
Awesome download button!! Definitely bookmarked!
Tim June 18th
wow. more glossy buttons. Umm, Thanks.
Brent Nelson June 18th
cool
Alex June 18th
19th???
goldenthunder June 18th
wow thats beautiful.
Shane June 18th
a feast of layer style goodness - thanks for posting!
james June 18th
looks awesome!
MONSTER June 18th
Like candy.
ed burns June 18th
I’m confused by step 5?
How were you able to duplicate the outer ring? I think that step was left out. I am a beginner so I can’t figure out how to duplicate it. Any help is greatly appreciated. Thanks!
Constantin Potorac June 18th
I like the way it turned out and the process. Really clean work.
ed burns June 18th
Never mind i figured out how to do it. I guess I have a lot to learn!
D.T June 18th
An interesting procedure. Helpful!
jason June 18th
i’m stumped by your logic at step 2.
“Duplicate the “ring 1″ layer. Then use the Free Transform Tool (CMD+T) to re-size the circle slightly, so that it matches the one created previously. I’ve named this layer “ring 2.”"
why on earth would i duplicate the layer and resize it slightly so it matches the first one? this makes absolutely no sense whatsoever. if it’s resized (larger or smaller…you didn’t specify) it won’t be the same size. if it’s suppose to match the layer it was duplicated from you shouldn’t have to resize it at all because it would be an exact duplicate. am i supposed to resize it larger and then just undo so it goes back to match what it was or what?
remember, when writing tutorials you need to be incredibly specific because we’re all stupid and can’t read your mind.
Nayr June 18th
Well from the looks of it jason some of us are a bit slower. If you read on just a bit more you see that you are duplicating two rings then you are expand one of them to make the bolder ring. Instead of criticizing his writing skills maybe you should look at your reading ones first.
Hyder June 18th
Nice tutorial.
But glossy design is on it’s way out.
ZaFaR June 18th
Nice tut, thanks!
Colin Williams June 18th
“But glossy design is on it’s way out.”
I wish inept designers making such remarks were on their way out. $10 to the first person who can explain to “Hyder” (as in ‘hiding behind a lame alias’?) in what context this technique is applicable.
Patrik June 18th
556-783+400-32-111th?
Ali June 18th
Testing Gravatar.. the tutorial itself I’m not too fond off, not that its horrible, but the rings around is very old skool design, reminds me of the days html was around, I don’t think people should have an html look anymore.
MD June 18th
Nice result!
yup June 18th
this is poorly drawn. the details are off/weird.
Mark June 18th
@ Ali . . . wtf???
Mody June 18th
The end result looks very bad and outdated in my humble opinion, but the techniques are helpful. I guess using different colors would make it much more attractive.
Oh and to First, second, third, whatever retards: Why the need to show the world that you’re f****** worthless?
Joefrey Mahusay June 18th
Great as usual.
Bogus June 18th
I really don’t get why you pay this guy $150 for this hard to understand tutorial. It is VERY confusing.
The first two steps, you don’t even explain if the circular eclipse tool should be on a SHAPE layer, PATH layer, or a FILL Pixels. Then you go on and don’t even say if we should create a new layer or not on that.
What the hell are you trying to say? DO NOT PAY THIS GUY… wow is this very confusing. As you can see the other frustration from other comments here. If you want to write a tutorial, MAKE SURE IT IS SPECIFIC……and you are getting paid for this.
Qbrushes June 18th
not really good, the colours are off and the button style is hardly used these days.
Ali June 18th
@ Mark.. ?
My mistake if you didn’t understand what I wrote, you see I wrote that right after I woke up, anyway long story short I meant that tutorial icon looked outdated considering how modern web design is based on strict xhtml/css & web 2.0.. It looks like something I would’ve seen many years ago when html was common practice. It just looks like something that shouldn’t be used anymore, and I think the rings around it actually makes it look worse, I’d say it’ll look better without the additional rings around it.
Just my thoughts.
jerry June 18th
Last so far !!!
D. Carreira June 18th
Great! Thanks!
David Carreira
Diesel June 18th
Not bad. Techniques that I already know but good for a refresher. Thanks.
Sean Johnson June 18th
a good tut for something that’s sooooo 1998 thou?! are people REALLY still making buttons like that ?
Arik June 18th
@ Bogus
Look at the screenshot for a second, see a solid filled shape? Now use your brain for a second, will a path layer create a solid filled shape…if I would want you to create a path layer, I’d tell you to that and THEN to fill the shape with the color by specifically saying that you should right click and use the fill option.
Although I encourage you to write your own tutorial and show me how it’s done, that would be very helpful.
As far as this being outdated, look the current standard of web 2.0 graphics generally means that you create a rounded rectangle, fill it with a gradient, add a shadow and put up some text. That’s the basic look. I agree that this look is 2003-ish but AGAIN. Don’t see this as something that you can smack somewhere and go all ‘oh wow that looks good’. If you are going to create an interface using elements such as these they will have to match.
Furthermore, especially for the ‘new guy’ I think it’s important that people see how looks were created back in 02-03. It used to be a totally different approach to design and a totally different outcome, even though we’ve stopped using the trend (and moved on to something that looks horrible on most sites imo) we had back then, it still doesn’t mean that designers shouldn’t know anything about it, in fact if it weren’t for those cheesy glossy buttons back in the day I probably wouldn’t had learned how to properly use a lot of tools even though I don’t create those effects anymore they were very useful in my learning process.
Arik June 18th
And thanks to Ed and Jason for pointing out the mistakes.
styxzdesigns June 18th
very nice indeed =D
Kathi June 18th
Sorry, but this looks awfull….
Bogus June 19th
I think the final product of this tutorial looks pretty damn good. That is why I tried to create it in Photoshop right away but couldn’t understand the instructions that well. I will try again though. But this button is DAMN SEXY.
andrioglu June 19th
sorry, step 2 is too confusing, explain better please. (i’m not a pro, but still)
like the result though
Johan Munk June 19th
Nice tut, although I’m not too fond of the look of the button, I think it’s a nice tut, showing us beginners how to use a bunch of tools.
Thanks
yeah June 19th
Boo Hoo…let me complain about the FREE tutorial.
I think a lot of people are missing the point of a tutorial, which is to teach you techniques and strategies. You dont necessarily need to put glossy buttons all over your site. And if its not a technique you care to learn, why not just skip the tutorial?
Nouman Saleem June 19th
Though it seems like people don’t appreciate the tutorial due to the outcome, however it does include some very useful techniques and its great practice!
Nice one
ed burns June 19th
I am new to sites like this one and I am also new to photoshop so I am puzzled as to why there are so many rude people leaving such nasty comments. I for one really appreciate everyone involved in bringing these tutorials to newbies like me. If these rude people find these tutorials so basic then why the heck are they here? If they are so great at everything they do, then why don’t they have a website just as outstanding as this one?
I have never before paid for a design tutorial website and I can sincerely say that I would have paid more to have access to such talented designers and to read up on how such works of art are made.
Urbalist June 19th
I must admit , step 2 was pretty hard to understand. I’m pretty stumped, I think I’m gonna show this to my teacher. Perhaps he can give me a few answers about how to approach this.
anon June 19th
web 2.0 is about code…
Zach June 19th
Man am I glad, that we’re actually discussing design in the comments now! I was getting so tired of the “great thanks” comments. As far as this being outdated, sure I can see that a bit. But so what? This is a tutorials website, it teaches you techniques that you can apply elsewhere, while still creating something that looks awesome. If you really wanted to go all Web 2.0, what are you doing on PSDtuts? Go to CSS/XHTML tuts, better yet NETtuts. Buttons are easy to make in CSS, this is better for icons and things of that nature. If you can show me a way to create a circle in CSS using strictly code and a bit of text fine, otherwise shutup. Images in HTML is pre-2.0. To summarize, this is a free tutorial site, teaching you Photoshop techniques that you can use in your own, “2.0″ designs.
Also, someone tell David Carreira his site is linked in his gravatar.
Just messing with ya David.
Jim June 19th
I love this site, but I gotta say that this is about the worst tutorial I’ve seen here. Not only is it overly confusing, it’s not even necessary because you can achieve the same effects with 2 built-in layer styles and skip most of the tut in the process. That’s on top of the fact that as far as the Glassy Orb style goes, this isn’t the easiest, nor the best looking tut I’ve seen out there.
You can get better, more realistic results using gradients in Illustrator.
Martin June 19th
Confusing tutorial, but a fine insight in some good techniques.
Is there any mentionable reasons as to why the tutorials in here are not video tutorials? If i could see what the author was doing i didnt have to sit and guess my way through half a tutorial.
Also, a video tutorial allows the viewer to see how the artist has his or her way with certain concepts, soft brush techniques for shadows and highlights for example.
Lamin Barrow June 19th
Cool icon.. Thanks for the tut.
Jasiya June 19th
Nice tut.
But I am really confused with the step 2. I cannot understand this step. Could you please explain?
soup June 21st
i’m sorry, but this is garbage, when i have the ring layer 2 there, i cannot do the “select, modify, expand” because modify isn’t lit up as a usable option, so even though it does look cool, it’s garbage
Martin June 23rd
@Soup
ctrl (or cmd) click the part of the layer, in the layers palette, that holds the circle shape to activate the selection. Then you can modify it.
godonholiday June 24th
the colours dont add up?
the blue up to step 11 is different from that in step 12?
Bogus June 24th
nevermind, you didn’t answer me back, so my conclusion is, THIS TUTORIAL SUCKS. Hard to follow and understand.. nothing works. Most steps are confusing. 0/10
NatalieMac June 24th
I really appreciate the fabulous tutorials that are presented here. I’m really improving my Photoshop skills and making my life as a web developer easier.
Regardless of the final design produced here, this tutorial taught some helpful and useful techniques, but overall was confusing and difficult to follow. There is a lot of information missing that makes it hard for people not already proficient in PhotoShop to follow without lots of trial and error and resorting to the Help menu. Also, some explanation on all those layer styles, why they’re being chosen, and what they’re accomplishing would be helpful too.
I look forward to more great tutorials.
Creekjumper June 25th
I found I had to inverse my selection, before I added the layer mask, in order to produce the correct results.
Paul Parson June 27th
You do have to inverse the selection to achieve the demonstrated result. However, the screen grab provided is correct. So, an observant reader might have caught that detail, especially since you would have just gotten the opposite effect.
Regarding the glossy icon effect itself, I don’t believe any of these tutorials to be ‘plug and play’…you’re missing the point of a tutorial. They are not to copy and slap on your site, but rather to teach techniques that can be applied to a variety of creative and original designs.
That said, I hope that we (readers/contributors) don’t see regurgitated ‘tuts’ like you see on many other sites, where content/originality/explanation/grammar go out the window. Thus far, I have seen a lot of great stuff on this site. And hope it continues.
But is it not the community that helps keep accountable those that contribute? Of course. So don’t waste an opportunity to comment with “this tutorial is crap!”…but critique it…constructively.
Nilson saavedra June 27th
nice looking botton, great effect, i like, maybe use it for flash bottons
Avantisimo July 1st
I have CS3. That might be the reason for me this is dificult cause I am just a beginner…
chris July 1st
i found that this is a really confusing tutorial… i really like the theory and end product though…
maybe a few more steps (even if they are obvious to some more advanced users) would be a good idea in future?
Ben July 2nd
Thanks for the Tutorial.
I enjoyed it very much
Gevi July 3rd
come on! i’ve seen a gazillion of these icon tutorials, do something that challenges yourself.
Nocturnal July 3rd
Thanks for putting everything on one page.
Erica July 14th
very cool!
victor July 17th
reminds me of kindergarten
“if you got nothing good to say, say nothing at all”
redplague111 July 18th
@jeoffrey mahusay < mediocre
Bill July 19th
Personally, I am really fond of Glossy Buttons.
That’s why I am making one….dozen….
Leejin July 22nd
Seriously….
Some of you “professional” designers are ridiculous.
Quit being so self righteous and do not post comments.
I appreciate the people taking the time to make these tutorials.
This particular one was simple, and effective.
Great Job, and Thanks!
Frost August 11th
Great looking icon, I’ll have to do the tutorial and see the outcome.
Unfortunately for me, I have a bad habit of reading comments before I do a tutorial to look for any missing areas or sections throughout the tutorial that people had already found to have mistakes. Once again they have, and will no doubt make the tutorial easier to follow. It’s a common mistake and you should not let these morons get to you.
As for the rest of you “perfect” designers.
The first person to make the remark that the icon made here was outdated, just got through reading that from some other post, on some other site.
The rest that followed, did exactly that. You followed. All you will ever be is mindless sheep that follow what another person says because it will make you on top of your game right?
Who are you to say this icon is outdated? Do you make the rules, do you set the trends? This man is helping thousands of people by posting a tutorial, and the only thing you do is come here and criticize him. Well guess what? You are here too, you found the tutorial and clicked on it just like the rest of us. Get off your high horse and quit trying to be the professional, all knowing, web guru.
In closing, the only thing that has become outdated is people like you who try to push your opinions that you got from the last site you read.
Again, thanks for the tutorial and keep up the good work.
Neeraj Lodhi September 3rd
Great! Thanks!
flyhighguy September 13th
Hey im a complete novice. Whenever i try to fill in the circle at the start with #bcbcbc it says ‘Could not use the brush tool because the content of the layer is not directly editable’ This happens for everything aswell not just the brush tool! Can some1 help? Cheers
Daniel Braha October 6th
Thanks!
Daniel Braha October 6th
Very helpful — thanks!
t4noc4po October 15th
It lacks of information. Not a good tutorial. You supose a lot of steps that a complete newbie doesn’t know.
Maybe instead of being sarcastic, rewrite it so everyone can follow it.
Besides my pov, there are very good technics that could be use in differents other things
Thanks Arik
Senshi October 24th
This is a good tutorial with good effects but it’s a little carelessly written, some important steps that beginners will need to understand it are left out. For example, the instruction in Step 5 includes none of the information needed to actually create the ring shown, simply writing “create another ring” is not enough here. The errors that users pointed out soon after the tutorial have also not been corrected, which strengthens the feeling the the author does not really care about what he is writing very much. The effects and techniques are still useful, it’s just a pity that the author didn’t put a little more effort into it.
Nick November 10th
I agree that the end result is pretty poor. It definitely does remind me of the old days of the web. I was looking for icon tutorials on the web and it took me here, and I was VERY suprised to see that PSDTUTS was the host of this tutorial, in a bad way.
But, I’m not claiming to a pro.
Brian November 14th
Let’s all comment on how the finished product of a free source is poor and so outdated!? Screw everyone that is blinded with stupidity!
Idiot Check List:
- Nick
- Senshi
- t4noc4po
- Duluoz - It’s really easy to make stupid comments!
- Hyder - Stop ‘hyding’ behind stupid comments!
- Bogus
- soup
- Martin
- Jim
- anon - Web 2.0 in not about code. Read a book!
- Kathi - Stop being a tag-along
- Sean Johnson
- Ali - What the hell man?
People with an understanding art and design:
- yeah
- Mark - Kudos to you
- Colin Williams
Kovi November 22nd
this is very good tutorial, i try it inspire
osCommerce Templates December 5th
Nice
Balamurugan December 9th
Excellent
francisa December 30th
coooooooool
newe1344 January 3rd
heh….the comments are as entertaining as the tutorial. web 2.0 is still up for definition, so I encourage all you “know it alls” to stop criticizing and start writing tutorials showing how you are defining the trends of the future! If you can’t do that, then I suggest following more tutorials like this one…
Add Your Comment
( GET A GRAVATAR )Your Name January 8th
Trackbacks