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!
* Adobe Photoshop (Any version can do)
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.
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:
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.
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