first ?

second?

srry i couldn’t help it

Excelent as usual

Cool icon! Looks very nice!

Seventh!

<3

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.

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!! )

8th?

Nice simple tutorial.

Looks great! thx for sharing!

Cool tutorial, though the edges are a little rough on the icon. Sizing it down for proper use should take care of that.

1999 anyone? Could you have used anymore gradients for that faux, not even close to realistic, plastic-y look? Looks horrible.

Nice and straight forward, thanks

back to glossy again? Hmm….

Nice tut, thanks!

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!

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!

a fundamental tut -imho

btw when you are going to publish my EXPLOSION tut bro!!!

Awesome download button!! Definitely bookmarked!

wow. more glossy buttons. Umm, Thanks.

cool

19th???

wow thats beautiful.

a feast of layer style goodness – thanks for posting!

looks awesome!

Like candy.

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!

I like the way it turned out and the process. Really clean work.

Never mind i figured out how to do it. I guess I have a lot to learn!

An interesting procedure. Helpful!

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.

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.

Nice tutorial.

But glossy design is on it’s way out.

Nice tut, thanks!

“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.

556-783+400-32-111th?

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.

Nice result!

this is poorly drawn. the details are off/weird.

@ Ali . . . wtf???

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?

Great as usual.

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.

not really good, the colours are off and the button style is hardly used these days.

@ 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.

Last so far !!!

Great! Thanks!

David Carreira

Not bad. Techniques that I already know but good for a refresher. Thanks.

a good tut for something that’s sooooo 1998 thou?! are people REALLY still making buttons like that ?

@ 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.

And thanks to Ed and Jason for pointing out the mistakes.

very nice indeed =D

Sorry, but this looks awfull….

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.

sorry, step 2 is too confusing, explain better please. (i’m not a pro, but still)
like the result though

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

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?

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

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.

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.

web 2.0 is about code…

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.

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.

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.

Cool icon.. Thanks for the tut.

Nice tut.
But I am really confused with the step 2. I cannot understand this step. Could you please explain?

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

@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.

the colours dont add up?

the blue up to step 11 is different from that in step 12?

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

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.

I found I had to inverse my selection, before I added the layer mask, in order to produce the correct results.

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.

nice looking botton, great effect, i like, maybe use it for flash bottons

I have CS3. That might be the reason for me this is dificult cause I am just a beginner…

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?

Thanks for the Tutorial.
I enjoyed it very much

come on! i’ve seen a gazillion of these icon tutorials, do something that challenges yourself.

Thanks for putting everything on one page.

very cool!

reminds me of kindergarten “if you got nothing good to say, say nothing at all”

@jeoffrey mahusay < mediocre

Personally, I am really fond of Glossy Buttons. That’s why I am making one….dozen….

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!

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.

Great! Thanks!

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

Thanks!

Very helpful — thanks!

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

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.

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.

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

this is very good tutorial, i try it inspire

Nice

Excellent

coooooooool

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…

That’s g8.

Well this is an extremely sweet icon but I love how you are a horrible teacher.

Although people have fixed your mistakes, you don’t bother fixing them in your tutorial.

The 2nd layer was impossible to find out because you didn’t even MENTION inverting the layer mask which is obviously not common sense.

You talk in different persons (Ex: 1st person, 2nd person) so it gets confusing. You expect us to know what you did exactly. I followed everything you said and my picture is messed up. My circles are wider on the side than top. My arrows are blue instead of white.

“First, I drew out a shape.” – Um you’re supposed to tell US to draw a shape not tell us what you did.

“Next, I ctrl/cmd + click on the blue layer.” – Which freakin one is “the blue” layer. Be a BIT more specific PLEASE???

“Then I select the circle outline.” – The circle outline. Which layer. Which circle. The 1st one. Oh no I know the 2nd one. But wait there’s 3 circles. WHICH FREAKIN ONE

“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.” – Just read this part. Does it make any sense to you?

If you don’t know how to make a clear, easy-to-follow tut, don’t make one at all please.

Um im not sure who design this first… but this icon is being used on the Citrix.com website main page to download Citrix Server app… Did citrix get permission? Or was this tutorial mimicking that button ? Just thought i should let you know….

@arick @all
when is someone
gonna write a tut that doesnt involve lots and lots of layer styles

all photoshop seems to be is layers styles how about some other techniques
cheers

thank you for learn

hey it looks awesome but i cant find the stupid shape in cs4 gimme link

oops i forgot to set to all

Can’t follow in step 1. The writer should follow his instruction once more after the wrinting is completed. Bogus !

There are so many things wrong with this tutorial I don’t even know where to start. You’ve missed out some vital steps and if they are followed it will look nothing like what you have created, which is ashame as it is a very nice looking icon put more thought into tutorials in the future. I wouldn’t recommend this tutorial to anyone, if you’re reading the comments 1st and come across this one, just don’t bother with this, I’m going to attempt to write a fix and will post the link here.

very very nice worked. thanks

really good…

lol @ Davion. If you don’t even know where to start you better learn english first. I followed this tut and figured out myself. I came up with exactly the same as the final image.

Thanks Arik for sharing this.

Very Good.. Thanks

I really need some help on step 2. I use Photoshop CS2 and I am just starting out.

End product looks great and I’d like to make it.

Thanks

really nice work..
thanks..

Omigosh. I got stuck here and there and kept trying to figure out what the (gazillion) steps were to get to where you are. I finally gave up and I don’t blame my own laziness, but you’re inability to create a tutorial.
If it’s a tutorial, it should have missed so many steps. Call it a guide. Think a bit.

In step 1: “Fill this shape with #bcbcbc, and name the layer “ring 1.”

Do you rasterize here? That’s the only way I can complete the step. I’m pretty sure that’s wrong, but don’t know how to do it otherwise.

very very nice worked. thanks

Great tutorial, clean, easy to follow steps. Thanks