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.
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)
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)
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)
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.
Now right click on the button layer, open Blending Options and adjust the settings for the following:
Bevel and Emboss
After adjusting the blending options, the button should look like this.
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.
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.
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.