I really like glass buttons, also known as plastic buttons or jelly buttons. I think the help to add a little glint of color or newness to a web page.

I have used several programs in the past to make these buttons. I think my favorites were made with Adobe Adobe Photoshop Elements and Corel Paintshop Pro. But I grew up and finally bought PhotoShop CS3 a couple years back & I have had some learning to do. Adobe Photoshop Elements & Corel Paintshop Pro both simplify the process of making glass buttons. There are really good pre-made styles or buttonizers built into those products. However Adobe Photoshop CS3 didn’t come with those. Yes, there are lots of styles and brushes that come with Photoshop but nothing that looked as spectacular as the other buttons.

Today, I did more work on perfecting my button & I think it turned out pretty nice. Here’s how I did it.

Step 1: Create a new image. I started with 160 px by 35 px with transparent background.

Using your Rounded Rectangle Tool and the color of your choice, create your button stage.

Use Rounded Rectangle Tool

Step 2: Use your Magic Wand to choose the colored shape. This step is done to reduce the amount of cleanup that you would have to do for the next layer.

Use Magic Wand to Choose Shape

Step 3: Add a new layer (Ctrl-Shift-N) & pick your gradient tool. Set the gradient to linear gradient, black to transparent, and drag your mouse from the top of your dotted line to about center of your colored shape to make the dark fade.

Use gradient tool to create dark fade

Step 4: Hopefully you still have the dotted line around your shape. If you don’t, then click on the shape layer and use your Magic Wand to select it. Next, go to your menu bar & choose Select > Modify > Contract and contract your selection 2px.

Contract Your Selection

Step 5: Grab your Gradient Tool again, but this time, use white to transparent. Create a new layer (Ctrl-Shift-N) & from the top dotted line drag your mouse down to about the center again. This will create a white area on the top.

Use Gradient Tool with White this time.

So far so good! Of course, my sample images are at 200% so you can see what I am doing, but the button is now taking shape.

There is one more tweak.

Step 6: Go to your layers panel and click on the white “highlight” layer. For the Blending options, you want to change the “Blend if Grey” bar as shown below.

Change Blending Option

I chose 135 because that looked best to me, but you look at your button & see what looks good to you.

So far, you have a nice looking button. But perhaps you want it to look a little more transparent. Then click on your colored shape layer. Tweak the opacity down to about 90%.

Here is what you’re image should look like.

Final Step, Final Look

Don’t forget to save your image. I like to save as a .png so that the edges blend better to whatever background button that I choose on my web page.

– More Later!

Technorati Tags: glass buttons, Photoshop