WordPress Tweaks & Tuts?

Subscribe to TheCreatology via RSS | Email

Design glass button image sprite for website in Photoshop

by Aky Joe

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

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 design glass button image sprite for website

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 design glass button image sprite for website

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 design glass button image sprite for website

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 design glass button image sprite for website

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 design glass button image sprite for website

Step2-3 Inner Shadow Adjustment

Bevel and Emboss

Step2-4 design glass button image sprite for website

Step2-4 Bevel and Emboss Adjustment

Satin

Step2-5 design glass button image sprite for website

Step2-5 Satin Adjustment

Gradient Overlay

Step2-6 design glass button image sprite for website

Step2-6 Gradient Overlay Adjustment

After adjusting the blending options, the button should look like this.

Step2-7 design glass button image sprite for website

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 design glass button image sprite for website

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.

glass button image sprite for website

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.

Similar Topics: , ,

TheCreatology Support

Got a Query? We're ready, Just Say it!

If you have a doubt or a feedback, then get-in-touch with TheCreatology Support Team now.

Start a Hangout or Email Us

Are you looking for...

  • Logo Design
  • Web Development
  • Thesis Skin Design
  • Graphic Designing
  • Virtual Assistance
Hire Us!

No Comments

{ read them below or add one }

Leave a Comment

Previous post:

Next post:

Contact Aky




Yes, I agree that all information above is valid.

Simple question, what's...