Very cool, thanks!

I LOVE IT! Great job man

Brilliant!
psdtuts.com is the very best PS Tutorials Site ever!
Thank you so much!

Great Job with this tut m8

Nice Tutorial. You should write a book!

This looks amazing, and was very easy to do, but is is possible to give a tutorial on the use of layer styles etc? I find that I don’t learn much about photoshop if all I’m doing is copying and pasting an effects layer from a premade file…

Loving the site btw

Thanks for explaining the difference between fill and opacity…

i asked myself for years

Great tutorial, as usual!

Good point Clark! You can always tell that its one of my quickie tutorials when its mostly layer styles

very nice button, i will have to update my button library now!

Thanks,
Very useful tutorial. That’s so easy.
BTW one can create Web 2.0 logos the same way.

I AM Soooo Pumped about this!

Wonderful! i love the quality of your tutorials.. i’m a new reader, and i’m staying! thanks for the help

Genious!

Thank you

very nice and useful tutorial buddy

Very nice tutorial. My one complaint which applies to the glow effect tutorial also, is the way the layer styles are handled. I like to work on a tutorial side by side and I dont feel I retain much value out of downloaded the file and copying the style.

If possible could they start to be listed in the tutorial or a hyperlink pop-up or somenthing?

Thank You and Great Work

I love it!

Lovely… another happy learner

You’ve done it again! I love your work!!!!!

i agree with some of the others. Copying the layer style doesn’t do anything for me. Otherwise this site is amazing. Wonderful tutorials.

Great Tutorial for button making.

Another brilliant tutorial! Thank you very much!

wow!
very nice ! i love your tuts

Yet another great tutorial!

Ooh man, you are just letting everyone know the secrets of the trade, and i’m loving it!

Love it… thanks!

This might be a stupid question, but I’ve not been able to figure it out on my own. Why is it that whenever I have a style aplied to a layer; like say a drop shadow and say I have its angle at -132 degrees and also want to apply another style like an inner shadow but I want its angle to be at 120 degrees, and I put the slider at 120 degrees it will automatically move also the degrees on my drop shadow angle to match the new slider movement?

I see that you don’t have this issue since the drop shadow angle and the inner shadow have completely different angles and you can move one without affecting the other one.

Im pretty sure its a dumb thing like uncheking some preference box or something, but I’ve never been abel to figure it out.

Cheers again

you just keep on pumping out these great tutorials!

Xavier, the answer is the checkbox that says “Use Global Light.” The problem is that the name is a bit misleading… it both USES the global angle set here, but also SETS it.

So, say you set a drop shadow at 120 degrees, and leave the “use global light” checked on. You have now SET the global light value as 120 degrees for all other effects.

Now if you go to something else that uses an angle, like “Inner Shadow,” you’ll see it’s still set to that angle. So UNCHECK that box, and you can now set an angle independent of the global light. But if you re-check it, you guessed it, you’ve just SET the global light for all other effects to that value.

There’s power here, because you can set up multiple effects all governed by the same little dial in any effect dialog, but it’s also quite dangerous because you can wipe out all other custom angle settings with an errant click.

Why would you make a button out of the face of a mass murderer and destroyer of Cuba. Do you even know who that image represents?

Xavier, uncheck “Use Global Light” while using shadows. Using global light will cause your shadows to be at the same angle. If you uncheck it you will be able to use different shadow angles for inner shadow and drop shadow while on the same layer.

Great site! I love it. Keep up the great work.
”
Xavier: All you have to do is uncheck the “use global light” box on all your drop shadows and it will prevent them all from changing.

Awesome these tutorials are awesome.

where do you get your gradient color combinations from? they are simply amazing. i have used kuler and a few others before but have never seen anything you’ve been using. your advice will greatly help! thanks.

Great tutorial! 10x!

Great tut once again, it creates a neat affect and I might just find a use for it on the site I keep up for news about my kids and family.

to Neil: its an intriguing picture and I understand your standpoint, but I doubt very much that he was trying to make a political statement with it. Regardless, Austrailia is a long long way from Cuba

@Neil: Sorry Neil, didn’t mean to make anything offensive, I’d always just assumed that picture was just something out of popular culture! i suppose I should investigate these things further next time!

Thanks all for the feedback, you can look forward to another huge tutorial tomrorow

VERY NICE =)
I love it …
GREAT!

It is almost like you are in my head with the tutorials that you put on this site. I have loved them all. Great Site!!!

@Neil, at the risk of sending this down a rat hole, Che Guevara does have a prominent role in pop culture, deserved or not, as that photo has taken on a life of its own, as described (and cited) in Wikipedia: “After his death, Guevara became an icon of socialist revolutionary movements and a key figure of modern pop culture worldwide. An Alberto Korda photo of him (shown) has received wide distribution and modification, appearing on t-shirts, protest banners, and in many other formats. The Maryland Institute College of Art called this picture “the most famous photograph in the world and a symbol of the 20th century.”

Very very Good.
Thanks

Nice result. Not to great as you didn’t give Cavas sizes though.

Very nice.. Thnx a lot..

Top
Very Good
Thanks

Very cool! Thank you!

its very good !!!

great tutorial but using your layer style just makes my button black and ugly more details on your specific options would be nice

Awesome cool

Bi sikime benzememiş Hem türkçe değil Ben böyle işin ta a.q. La başka çalışmalarınız varsa onlarıda yayınlayın hea

FTA: and then hold down CTRL and click on the second highlight layer to select it’s pixels.

I’ve run into this problem with another article that you wrote. I think its probably jsut my config but whenever i press ctrl and click on an item, nothing happens. Do i need to be using a certain tool? (i’m running photoshop cs3)

Hey!
Nice Tutorial!

But its really easier, if you´r working with a round shape (Ellipse Tool) and a clipping mask.

der_pate

I’m having the same problem as Alex… on step 5.

Duplicating the layer is fine, hiding the first one is fine… and I’m left with a selected highlighted area (which appears much larger that yours)…. using the arrow keys moves the selected area but the highlight doesn’t change position, let alone leave a little segment at the outer edge of the circle. Please help!

Anyway, you got a coffee from me

Can anyone tell me how, or show me a tutorial were I can create text like the text show on this tutorial. i.e. “Button Maker”

Thanks

Shaun

very nice!!!
You are so great!!

hi

very good tut!

can u put a video for this tutorial?

thanks

“Create a new layer and draw a radial gradient from white to transparent in it” how do I select transparent as a gradient color

Wow dude this is like the best Photoshop tut site I’ve ever seen!! Good job on all the tuts and keep up the good work!

Very very cool tutorial !
I’ll promote your page on my blog ^^

i liked this tut
so good

thanks a lot

we want more

this is great things but you have to specify blending option properties for drop shadow and inner shadow and whatever you used .. i think so … can you pls specify this

Great,
thx m8 best tuto ever,
gonna use it a lot!

I must be retarded but I am having trouble with step 9. I am working with the main button on the sample.psd. I have a layer with a new image between the green button and the flag layer. I am not sure about the hit CTRL and then select inverse. This doesnt appear to work for me. What am I doing wrong? Any help would be greatly appreciated!

WOW MORE TUTORIALSSSS PLS…. COOL

where is the source?????

Great Tutorial. Thank you.

This a an awesome tutorial. Thank you!

OY where do i download the style for this? thanks!

very nice tutorial, thank you!

where is the source for the layer style?
I don’t understand…

Great orz !

effing brilliant!! Trust me I’ve been tring this effect since past 2 days. I made some success but this is soo much betta!!

I love it!

*continues jumping hysterically*

好东西!!!

It´s very usefull. Easy. Thanks

Where the hell is the source?!

I really want to do this!

It’s very usefull, really. Many thanks

i love it.

gooooooooooooooooooooooood

I cant find out where to download the layer style?? Where is the download?

Great tutorial!

Nice tutorial. I love all of them.

Although… Not the use of the Che image. It’s sorta like using an image of Stalin or Hitler. Not cool.

But still, epic tutorial.

You are the one

Pretty cool.

Briliant! =D

I can’t do the step 9.. why is that?! And its the most importang thing to do in making abutton.. could someone please answer.. why can’t i invert the image?

don’t listen to these retards hating on Che. Read a book and you will find he is NOTHING AT ALL LIKE HITLER OR STALIN. Jeezus. you people should be working at burger king. it amazes me the level of ignorance. on a psd tutorial site no less. che wasn’t as bad as the usa wants you to believe. retards.

Wow!

Very cool, thanks for share great tutorial.

Very nice tutorial! Usin’ it already haha!

super

Your tutorials are awesome! Thanks for the effort!

could have used a little more detail on step 2 on the inner shadow, etc. because I need exact numbers on what i put in, you know what i mean?
none the less, this as an absolutely awesome tutorial. thanks a lot!

anyone else not able to download the source? can someone post the layer settings?
thanks

I lilke this tutorial bu I can’t download the zip with the psd file…
can you help me?

lowfialex@hotmail.com

Ok, seems nice. But could you please update the tutorial with specific layer styles? The link to the example .psd seems to be broken .. :/

Great Tutorial

from Mexico….. Thanks you

GREAT SITE!
From Indonesia Thank You!

Awesoooome !!!
Thank Youuuuuuuuuu a lot

Great Tutorial
Thanks very much!
I am learning a lot from you guy’s

Keep up the works!

Frank
Belgium

hi i have a question on your tutorial.
i’m stuck on step 4.
where is the “circular selection tool”?
is it the eliptical marquee tool?

Great tutorial, thanks so much..

love it

Please tell me wich settings you should have on the blending options

Can someone please give me the psd file

can some1 send this, link not workin anymore

or post a link even better uhu^^

Can someone please send me the source PSD file or the settings for STEP 2. The link is broken. Thank you.

ohh very gooooodddd!!

Add some perspective to the actual buttons and it will probably look really nice and realistic. The possibilities are endless. I’ll definitely try this later today.

Awesome tut!
Will try out.

Thank you!!

Plz fix the link for psd files…..i really want to learn this thank you.

Could you republish the PSD file?
The link is broken.
Thank you – Great tutorial but since you didn’t talk about the effects, I had to guess and mine doesn’t look quite right… I’d love to see exactly what you did.
CHEERS!

nice tutorial, can someone put the psd file on some rapidshare-like services? The link is still broken, thank you

Love the tutorial… It would be awesome if you could relink to the file.

These tutorials are great, but it’s not too useful to make us download a file to get the same results – by copying the layer styles. Especially when the links break. Any chance of this getting reposted?

Can you please check the link? It’s broken. I can’t download the example from that link

PLEASE! the PSD is a broken link now and I want to make buttons so bad. Can some please send that file to me? small3687@gmail.com thank you.

Great tutorial, but the link to download the source file is broken, if someone could possibly email it to me at radicalxdude@hotmail.com, that would be just keen:D

Hey! Great tuto. My button looks good, but i didn’t get that great result yet. Can anyone please reupload the psd file or maybe put here the exact settings for each effect?

Anyway, thanks Collis. You did a great job! =)

I tried using this tutorial to get through the layer styling (since PSD link is broken) and then followed the rest of the tutorial and got a decent result – still not as good as the one shown here but it is a nice alternate method in the meantime.

Thanks so much for the tutorial and file! Worked fantastically!!!

Off the hook dude!

for some reason the i cant get the invert to work on the mac using photoshop cs3
I copy an image in the back of the button ctrl click on circle and then nothing happens with the next step
any advice
cpnotebook@hotmail.com

thanks

Really nice tutorial and effect. Thanks!

I can’t complete it. I didn’t understand it very much. I think it should be a bit clearer for people like me, very newbie in photoshop.

“Start by drawing in a coloured background. I’ve used dark brown/greys here and used a subtle radial gradient. Then in a new layer draw a circle and fill it with a colour. It doesn’t matter what colour you use, I’ve used green here.”

Didn’t understand anything of that part.
bye

Can someone please guide us more specifically through Step 9?

All you need to do is hit CTRL and click on the circle layer to select that sized circle, then press Shift-Ctrl-I to invert the selection, go to the flag layer and hit delete. And you’re done! One button!

I have successfully created the circle and placed the flag layer below the circle as in Step 8 but for the life of me I cannot get past step 9. I also tried with teh source file from here but the same thing.

Please someone explain how do we make the flag “get glued” to the circle and then how to delete the remainder of the flag which sits outside of circle layer.

Thanks and I look forward to any ideas to help em complete this great tutorial.

Nicely done. I’m off to buy a button-maker machine.

Im with Valdrin. I can do it all until I get to the Shift-Ctrl-I to invert command and nothing happens. Ive tried it with both layers highlighted, each one seperately highlighted, and even tried Image/Adjustments/Invert but again nothing happens. Im kind of stuck at this point. Help please!

GG and Valdrin. You have to click circle layers small image not only the circle layer.

Lemon, thank you so much, but my problem is trying to use the Shift-Ctrl-I command. That key is associated with a different piece of software on my machine. When I invert…or is it inverse?….using the Image/Adjustment command it just changes the colors like inverting is supposed to do.
So how can I do step 9 without using that particular key command? I feel pretty dumb about this too since Ive been working with photoshop for a lot of years now and usually pick things up pretty fast. I cant find anything in the Help file for this either.
Thanks again for trying to help. Im open to any other advice you might have.
BTW, I have CS3, does that matter? Seems to me I used to be able to do this using the Group/wPrevious command but that isnt there anymore.

PSDTUTS is the very best Photoshop Tutorials Site ever.
My very favourite site. Yes. im a regular visitor too.

I added your banner in mysite. Hope you getting some hits from my site.

http://www.kishoreblog.com

how do you get a flag under the layers @ step 8? i can’t even get the flag there. >

Hi ,

Thanks is brilliant tutorial. For those of you having problems with Step 9 . . . . . . .

After alot of frustrastion I figured out how to do step 9 in CS3 which people seem to be having trouble with.Hold down on Ctrl and you then have to click on the frame with the circle in ( it not just on the layer ) , then Shift + Ctrl + I to invert selection. The click on to the flag layer ( or whaever picture you are using) and press the backspace button on your keyboard and thas it . For some reason if I try to delete the layer it doesn’t work. Hope this is of some help !

Very nice, thank you

very good.thanks

great tutorial! but where do i find the layer style? it’s tough to work on it when step 3 doesnt get me very far

Hello,

Thanks very much for your tutorial.

Please, can you tell us what font you used to do the button maker ?

Martin

Very nice. My only issue is that it’s not a “British Flag”, it’s a Union Jack!! Bloody yanks! haha!
Thanks

I love this site! My only issue with this tutorial is the layer styles. I know others have the same problem, but I need to know the specs for each style. Mine got pretty close, but I I really don’t learn anything by just copying and pasting styles. Other than that, the finished product is great! Keep it up. I always learn so much from these little tuts. Thanks to everyone who posts!

Starr

would love to see these tutorials as videos. Still good tutorials but come on PSDTUTS – let’s get these tutorials as videos man. Cheers.

thank man

Great tut thanks!

That was really usefull. Thanks a lot I’ll be using this for my current project I’m sure!

Great tutorial. I hear what others are saying about learning from doing rather than from copying layer styles, but I think it’s useful to be able to download the layer style as a starting point. So often tutorial authors throw out numbers and settings without explaining why or how they work. It’s frustrating to read, “whatever works for you,” especially when a certain combination of settings is required. Getting started with the preset layer styles makes it exceptionally easy to experiment with adjustments and it helps me learn what certain tools are for and how certain settings function together. This way, you can have the instant gratification of creating a button successfully, and then go back to experimenting and tweaking and learning. I have more patience when I know I’m working toward a finished product that I’ll be happy with.

Very well done!

I made a graphic version of a button we used to wear at my summer camp: http://www.emlocke.com/emlocke/content_images/button_ialac.jpg

excellent mate, I am a software engineer (therefore gray interfaces that just do the job) and you gave me a great insight on how to use the tool to get the desired effect! keep up the good work!

thanks very good

Just what I was looking for, thanks so much!

Great job

Thanks and this is very much appreciated!!!!

Great tutorial, I will be using the buttons for this: http://web70.www8.united-systems.org/thenextdecentblogv4-3.jpg

Does anybody have an idea how I could create the back of one button (like this: http://www.rammsteinshop.de/catalog/images/2006.08.04_19.41.17_rueckeite-buttons-340.jpg) because I would believe it would make them look even more real-looking if you woud add one only showing the backside…

Ok I “made” one from a picture I found on the web, unfortunately its “low-res” but it should work fine for webuse. Feel free to use it. http://web70.www8.united-systems.org/buttonback.png

I’m from Russia with love)))
It’s so beautiful effect!cool))

Simple and easy.Thank you!

u r work provide me a new energy level …
excellent’s works

I am very thank full to u because u provide all lerner a new working sckill….

Great tut. Collis. But in Step 2, it would be better to explain much more about Blending options. You know .. to tell us what Modes did you use, what opacity`s and more things to do to pass in Step 3 ( to make the Circle like in Step 3, with the Layer style applied ).

Thanks!

Liked it very much, thanks!

Love it. My only problem is cutting out the bg. When I hold Ctrl and click…nothing happens.

Original like usual

thansk man good tourtials

If someone could take the time out to put up their exact layer styles settings (Step 2) that would be greatly appreciated! Please and thanks!

I am having trouble with a few of the steps can someone please be a little detailed when it says change from white to transparent radial gradient….. I am new at this and want to have a better understanding…. If someone could just tell me where i change the radial gradient i would appriciate it thanks

seesamantha06@yahoo.com

Very cool. Thanks Heaps!

I love this tutorial, thanks you for sharing!!!

Nice tutorial! Thanks so much !

Great tut – thanks for the information…

Hi great tutorial! But i would like to know better the step 5 cause i didnt understant it in spite of trying to do it several times :/
And also when i put the final pattern below the circle transparent layer it shows the color i put on the button (ex. the green)
Some help?

Hey Collis. Nice one!

I did a spin-off of this tutorial on my blog. I hope you don’t mind. I have linked to your tutorial from the post though. Given you the cred.

http://thephotoshopper.blogspot.com

I’m having trouble… I’ve got it up until like the last two steps. When I shift-click-i nothing happens? It’s really aggrevating too. I feel like an idiot LOL! Any help?

I meant shift-control-i, yeah it isn’t working for me. I have Photoshop CS3 Extended if that helps?

Thank you!!! It really helped…

Yes, sean steezy, I have read a book on Che. His human rights record for conducting executions was completely contrary to his “revolutionary ideals.”

Great tutorial Psdtuts.

I think its Ironic that you have a “I love NY” button and a flag of england and also that you have the button of the man who killed thousands in cuba and a Peace sign on top haha

Absolutely Awesome! Thanks so much! This will definitely come in handy!

In our chicago website design office we make traditional buttons all the time. This is a great tutorial to do the same in an online medium.

Very good. Thank you.

Very good

Wonderful walla!
Thanks for the great tutorial.

THX FRİENDS

can you pls repeat the tutorials STEP BY STEP there something i dont understandin blending option iam a begginner sir so pls repeat your tutorials STEP BY STEP how you do that how you do this thanksss your tutorial is great but there a part we dont understand i hope you repeat it again thanxz again

not BAD . . . .. .. .. .

so easy but so effective thanks

Ok, feelin’ pretty dumb, but where do I download the soure? I think I missed something…

wow nevermind! found it lol great tut!

pEACE gOoD jOb PEACE AND pHoToShOp

errr step4 just…..how do i get that i dun get it

Hi there, pretty new to PS and everything went fine with this tutorial until steps 9 and 10. When selecting the button/circle layer and the inverting I get the button/circle and the background layer selected. Is this correct? Or should the flag layer and button be selected.
My issue is that when I delete the flag layer the flag just disappears…nothing remains of the flag.

Many thanks for some help!

OK, no need…figured out you need to rasterize the (flag) layer.

Cheers

great thank you

Clearly..

what are these buttons called ?

how do i download the source?

very nice effect

Hi this looks good but I have just tried it. I am new to Photoshop so I apologise if the answer to this is a pretty obvious one : ) Step 2 you say to download the source and right click etc. What is the source as at the moment my cirlcle has turned black and yours is still green.HELP . Many Thanks.

Hmm I have to say as much as this is a great site there are very few who want to help others who are struggling. You are lucky if you get it first time and understand it but non of us are perfect. I have read through the comments on here and only one or two people have shared any help. Why is that ???

Thanks for the tutorials

Love it! That’s cute!

NICE TUTORIAL ?? why everyone says nice when I have learnt NOTHING ! copy and paste ?? what’s that ? Could u explain step by step the effect you have done.
Thanks

Thank mah man….It is real nice and easy

My new laptop was ripped off and I hadn’t backed it up yet. Months of design work was lost along with everything else. A few long weeks of no sleep, a hard lesson learned, still a bit devastated…but thanks to PSD tuts+, I was able to recreate my work in record time. Brilliant site

PS “BACK IT UP”

WOW! I like it, and I’m learning very much

I’m sure 80% of those who commented saying “nice” never knew what they were talking about. Hmm, he said copy and paste.. Funny guy! We really learnt something!!!!!!!

Nice effect, but I didn’t like the part where you say just copy and paste the styles =/. It’s harder to learn this way.

very gud

Great! Thanks for sharing!

I don’t get step 5 at all.
Can someone please explain to the photoshop newb?
thanks

thats nice

uummm…in step 2 you didnt explain much on how to put the settings in each one/:

uummm…in step 2 you didnt explain much on how to put the settings in each one/:

Thank you very much.
Long broke a head, as it to do.

Thank You! Great Tutorial

Nice tutorial, step 5 was a little tricky as I would have assumed the first was the second the second was the first and so on, referring tol ayers by name could help with this but overall nice effect.

The step 4 is just impossible to apply…could U explain this for mac users too?……Hugs!

Excellent, I really appreciate you making this tut available. I was able to do a great poster using this technique.

Great tutorial, but step 8 i still a puzzle. “I grabbed a flag” If I place a photo and put it in a new layer underneath the green circle layer, the picture is not showing through the button. Whats wrong here?

CS3 on Mac. Step 9 does not work. Shift+ctrl+i makes the layer pane disappear.
Any ideas of how to make the flag “stick”?

Great job main thankyou

CS3 on Windows. Step 9 does not work. Shift+ctrl+i makes the layer pane disappear.
Why?

GREAT TUTORIaL, VERY HELPFUL, THANKS

THIS IS AWESOME THANK YOU!!

Simple and perfect

I followed your steps using a blue square and I got the effect alright but, the color is black instead of the blue I want. Please advise.