Want some techniques on how to make glossy buttons for a website? This is what you are looking for! As you can see, this article is too long for this kind of tutorial but I am telling you that this is very easy. I just want to teach you the step-by-step process on how to make this kind of button. You can use this style for your professional website whether it has a white or black background.
Tip: Most of the clients want to have high-quality website designs from their designers. To make it more interesting, give them your best work by giving them the freshest idea from you. I hope that this would be a great help to you!
Okay let’s start!
Requirements:
* Adobe Photoshop (Any version can do)
* Creativity
Step 1: Go to File > New (Fill your desired width and height with the resolution of 72 and background of transparent). This time I am using 550×200. You can do like what I did.
Step 2: Use 
Paint Bucket Tool to fill the canvass with black color as your Layer 1.
Step 3: Use 
Rounded Rectangle Tool and follow this settings:
then do something like on the picture below by using ‘click and drag your mouse pointer’ to make a rectangular box. You should have something like this:
Step 4: Now double click the layer ‘Shape 1” on your layers palette and do these settings for Inner Glow, Gradient Overlay and Stroke. (click the links to view images)
You should have something like this:
Step 6: Using 
Horizontal Text Tool, type the text you want to be clicked by the viewers. I used “Add to Favorites”.
Double click the layer of your text and use this setting for Drop Shadow.
Now we are going to add something to make look like a glossy button. Hey! Getting serious? Just stay cool
____________________________________________________________________
Step 7: Select the ‘Shape 1′ layer on your layers palette and then press CTRL + click the Shape 1 layer. You should have an output like this:
Step 8: We are now going to use the 
Gradient Tool. By clicking the Gradient Editor, please select the ‘Foreground to Transparent’ preset and hit OK. Now, ‘Set your foreground color’ to color white (#ffffff). Create a New Layer. Click and drag your mouse pointer at the top to bottom of the rounded rectangular shape. You should have something like this:
Step 9: Now, we are going to use the 
Elliptical Marquee Tool by pressing the SHIFT + M on your keyboard. Do this oval position on your Gradient Layer.
Hit ‘Delete’ on your keyboard.
Now we are going to make the reflection on your button. Are you still fine?
____________________________________________________________________
Step 10: Select the layers of your button, and then drag it to ‘New Layer’ icon on your layers palette. Please see Fig. 1. And you should have something like on the Fig. 2. Then press CTRL + E to merge the newly created layers, see Fig. 3.
Step 11: We are going to transform the last layer to make a reflection effect. Go to Edit > Transform > Flip Vertical.
Step 12: Again, we will be still using the Elliptical Marquee Tool Elliptical Marquee Tool by pressing the SHIFT + M on your keyboard. And follow this settings:
Position it at the middle of the reflected layer
then hit ‘Delete’ on you keyboard.
Step 13: Set the opacity of this reflected layer to 50%. And you should have something like this:
Easy right? It’s quite difficult for some beginners but I am telling you that this is very easy if you practice your skill in Web Designing Web Designing 
Why is it FREE? You can download my original file as your pattern for FREE
Download it here!
By the way, this is my winning design in our Inter-school Web Page Design Competition at Centro Escolar University (Philippines) and I won the3rd Place.
I want to share to you my cheap design during that time. But this is not exactly my winning design because only the style was applied
Okay, thank you for listening! I hope you will apply this tutorial for your projects and I hope this is a big help for you 
I am a 
June 8th, 2011 at 11:56 AM
kainget ang skills mo sa web design. nakakainget.
Reply
August 25th, 2011 at 8:13 AM
Hi Jhelo! Why kaingget? You have an awesome blog naman
My blog is dead na, and I am planning to rebuild it again as soon as I am not busy.
Reply
January 8th, 2011 at 8:35 PM
Hi! there Ms. Sabrina..
Thanks sa mga tutorials about PS, love and it adds to my knowledge..
I’m currently a 3rd yr computer science student, and those tutorials really help me a lot..
dream ko rin kasing maging web developer at designer gaya mo, kaya nga idol kita..
hehe..
thanks!
more power..
& more tutorials, I mean more gReAt Tutorials..
Reply
January 10th, 2011 at 7:39 AM
Hey Jerome! Thank you so much! Tuloy mo lang dream mo, malayo mararating mo
Natutuwa naman ako at marami ako naiinspire kahit papaano.. Salamat ng marami! Magpo-post pa ko ng mga tutorials para sa inyo, pero as of now, mejo busy ako 
Hanggang sa muling pagbalik ^___^
Cheers!
Sab
Reply
September 19th, 2010 at 9:26 AM
Oh.
Thank you ate Sab. Makagawa nga ng button para sa site ko. Eh teka, may section ka ba dito para panu gumawa ng banner? Matagal tagal na site ko pero di ko pa nalalagyan ng banner. Hahaha. Btw, advertise kita sa site ko.
Reply
September 21st, 2010 at 8:35 AM
Thank you miniski! I hope you had included your site’s link on your name so that I can visit yours too
I don’t have banner tutorials pa kasi pero I’m planning to make them one-by-one 
see you around!
Reply
September 23rd, 2010 at 2:52 PM
Okay. I’ll wait for your banner tutorials
- Ung site ko d pa tapos. Project kc naman eh.. Kakaasar..ehhe..Forums plang..visit ka f may time ka sa forums namin..
Reply
October 6th, 2010 at 12:29 PM
The site is good! Maybe it’s better to put more design to get more interest from your visitors
No problem Sir 
Reply
October 3rd, 2010 at 2:00 PM
Hey Miss Sab, do you have any section here about designing a web page background?
Reply
October 6th, 2010 at 12:25 PM
None at this moment, but I will try to include that on the list
Reply
September 12th, 2010 at 10:38 PM
Hello. A good tutorial. Btw,pwede magpaturo panu maglagay ng commenting system sa website gaya nito? Kz project kz namin website eh xD Pra namn ma impress ko prof namin
Thanks in advace! More power Ms. Sabrina!
TwoThumbsUp!
Reply
September 13th, 2010 at 9:28 AM
Hello there! If you are talking about the comments section of this site, it is called WordPress. It is a Content Management System (CMS) that provides comments on your site as well as managing your content. Hindi ako yung gumawa, I’m just using this CMS
Thanks too! You can come back here to learn about photoshop matters 
Reply
September 12th, 2010 at 3:15 PM
I’ve read ur tutorial days ago pa ate sab, pero ngayon lang ako magco-comment.. haha! XD
aun, ang bongga nga nito ate sab! it suits to those professional-looking websites! ang gondo po ng design mo talaga…
Reply
September 13th, 2010 at 9:25 AM
Thank you Janile! You’re welcome here anytime you want
Woaah.. Thank you so much! Study harder and pursue your dreams 
Ingat ka palagi!
Reply
September 11th, 2010 at 2:56 PM
Nice tutor. thnx for sharing.
btw, nice blog and its design, too.
Reply
September 11th, 2010 at 10:13 PM
Thank you betahita! Welcome to my blog! You can subscribe to get more updates/tutorials
Reply
September 10th, 2010 at 2:47 PM
CONGRATULATION ATE SAB!!!! you dserve it!! muah!! oh btw thanks for the tutorial…Imma use it cguro for my WEBDEV next term muah!!! <3
Reply
September 11th, 2010 at 10:12 PM
Thank you Ayei! Thank you super!! It was 2 years ago pa during my 3rd year college.. Good luck to your studies
Reply
September 7th, 2010 at 6:32 AM
Cool! Saktong sakto sa paggawa namin ng websites HAHAHAHA. Thanks ate Sab dami dami!
Reply
September 7th, 2010 at 9:47 AM
Thank you Sheila! You’re always welcome :smile” If I were you, jo-join ako sa mga competitions para mag-gain ng experiences at para madaling makahanap ng work
Good luck and keep up the good work!
Reply
September 19th, 2010 at 9:50 PM
Wow! Ganun lang pala techniques dun. HAHAHA. Thanks ate Sab sa tip!
Reply
September 6th, 2010 at 11:21 PM
nice tutorial ate sab
kaya lng hnd pa rin ako makapag-deisng dahil busy sa pagha-hanap ng work ang hirap pala tsk3x
Reply
September 7th, 2010 at 9:46 AM
Thanks David! Why looking for work? Graduate ka na ba? Hindi naman mahirap.. Magsubmit ka lang ng resume sa maraming company hindi paisa-isa
Reply
September 5th, 2010 at 10:02 AM
Another very helpful tutorial, ate.
Reply
September 6th, 2010 at 10:06 AM
Thanks Betina
Keep on studying hard and keep on smiling to see the bright future ^__^
Reply