Are you looking for glossy button design for website, similar to the image below ? Then you can design glass button by yourself in simple steps using photoshop.
Glass button image sprite for website
In this article, I will use Adobe Photoshop to create glass button sprite. Image sprites are purposely used by CSS developer to design mouse over image, function smoothly and efficiently. Here is the tutorial to design glass button image sprite for website in photoshop.
Step 1: Create Simple Button Base
To start from scratch, Open Photoshop and create new image canvas with approximate pixels for width and height. If you want create transparent website button then choose Transparent in Background Contents, or you can stick with White background as well. (Refer to the screenshot below)
Step1-1 Create New Image Canvas
Create a new layer and name it as button. On the button layer, select Rounded rectangle Tool and give it a desired radius, for instance I give it 20px in this example. Now left click and draw out a rectangle on the canvas. (Refer to the screenshot below)
Step1-2: Draw Rounded Rectangle base
Now that we have created base for the button, so we now proceed to our next step 2 to add glossy effect.
Step 2: Apply Glass Effect to Button
In order to add glass effect, create another layer and name it as a glass. Select the marquee tool and draw a selection over the lower half of the button. (Refer to the screenshot below)
Step2-1 Select Marquee Tool
Now select the Fill Bucket Tool and with white color #ffffff and opacity level adjusted to 18%, fill the selected area. And it should look something like this.
Step2-2: Fill lower half of the rectangle
Now right click on the button layer, open Blending Options and adjust the settings for the following:
Inner Shadow
Step2-3 Inner Shadow Adjustment
Bevel and Emboss
Step2-4 Bevel and Emboss Adjustment
Satin
Step2-5 Satin Adjustment
Gradient Overlay
Step2-6 Gradient Overlay Adjustment
After adjusting the blending options, the button should look like this.
Step2-7 Button with Glossy effect
Step 3: Button Text and Finalize
As in Step 2, we have created the glass button, now we have to add Text and finalize it. To insert text to the button, use the Horizontal Type Tool and add text to the button.
Step3 Adding text to the Button
After adding the text, and nudging a bit we will get the final image. In order to create another button, simply repeat step 1 and then adjust different colors in step 2 to create multiple buttons, just like below.
Multiple Glass button Designs
Here I come to the end of this tutorial, I’m sure that these glass web buttons will add elegance on your website. If you have any query or further assistance is required, post comment as your feedback.