Today, I am playing with Adobe PhotoShop again. I spend my time trying to figure out how to create a glossy button using photoshop. After testing here and there, I manage to create a simple glossy button within half an hour but the time to create this post is 3 hours.
It is quite simple to create a glossy button but the steps are quite long to do it. You could read more about how I create the glossy button in the later part of this post and I will guide you step-by-step to create your own glossy button too.
How to create glossy button Step-by-Step Guide:
Step 1:
Open your Adobe Photoshop and then click on “File”>>“New”. Create a width 400 pixels and height 400 pixels workspace.
Step 2:
Create a new “Layer”.
Step 3:
Select the Rounded Rectangle Tool and draw your button on the workspace.
Step 4:
After drawing your button, right click on your button and choose the “Blending Options…”.
Step 5:
Step 5 is the most important and the longest step, so please be very careful to follow properly.
i) Select the “Drop Shadow” and make the adjustments like the picture below.
- Opacity: 35%
- Distance: 0px
- Spread: 0%
- Size: 7px
ii) Select “Inner Shadow” and make changes according to the picture below. - Opacity: 20%
- Distance: 0px
- Choke: 0%
- Size: 85px
iii) Select “Bevel and Emboss”. Then, make changes according to the picture below.
- Depth: 100%
- Size: 0px
- Soften: 0px
iv) Now, select the “Gradient Overlay” to make changes to gradient and colors.
Change the colors to:
- #000099 at 0%
- #6666ff at 100%
Step 6:
Your button now will look quite nice in gradient blue. Now use your mouse pointer to point at the “Shape1”. Hold “Ctrl” and “Left Click” to select the shape. Your shape will now look like below.
Step 7:
Create a new layer again.
Now, select the Rectangular Marquee Tool.
Then, use the marquee tool to draw on the workspace like the picture above.
Select the paint bucket tool and make sure the color is white #ffffff. Look at the picture above.
Fill the selected area with the white color. Then, change the opacity to 15%. Your button should look glossy now.
Step 8:
Now, create a new layer for the words in the button.
Select the “Text” tool then draw on the workspace to type your text for the button. Move the text and place it at the proper place within the button
Congratulation, you have created a glossy button of your own using Adobe Photoshop.
