Glassy Pill Buttons: 3 Steps to Custom Navigation

Pill buttons are one of the most universally used forms of navigation, because they can be used on their own in a web page, or they can be placed in a layout and nestled right in the graphics. If there'sanything more common than using pill buttons, it's the clean look of glass used in graphics. Here, we'll learn how to combine the two using Photoshop.

You should be able to use any version of Photoshop from 7 upwards to create the glassy pill buttons described in this tutorial. The tools aren't available in Photoshop Elements, though.

Ready to get started? You might want to reference the illustration attached to this article - it lists a shorthand form of the steps, as well, but doesn't go into the depth of the article simply for space reasons.

One: Pill buttons look just like they sound they would - a pill. To create them, we start out with a simple circle. Open a new canvas (File, New) sized 200 x 100 pixels. Grab your elliptical shape tool and hold the shift key down on your keyboard while you drag the circle out - this makes the circle stay perfectly round.

You can use any color you want for this step - I'm using black - because we'll be discarding the color of this shape completely in just a moment.

Two: There are a lot of ways to produce the actual "pill" out of our circle. This is the method that I use because it's simple and produces great results.

First, click the "Move" tool. Then, with your circle layer highlighted, press and hold the right arrow key, ctrl key and alt key on your keyboard at the same time. This process will make a copy of your original circle and move it 1 pixel in the direction of the arrow key you're pressing. You'll want to stop pressing periodically to see how far your "pill" has stretched. Do this until you have a long "pill" shape.

Now, we want to put all of these circles (I ended up with 158 layers of circles) on one single layer. The easiest way to do this is to scroll all the way down your Layers Palette and turn off your background layer by clicking the "eye" beside it. Then, right-click the circle layer directly above the background. Choose "Merge Visible" and all your circles will merge on one long pill layer.

Three: We have the basic pill - now it's time to make it glassy. Again, there are dozens of methods used to make glass. This method results in a layer style that you can save and use later at the click of a button.

First, lower the pill layer's "Fill" to 0% (The "Fill" option is located at the top of the layers palette, in a drop-down that contains 100% by default - just click the arrow and move the slider down so that the percentage says 0%).

Then, double-click the pill layer to pull up the layer styles dialogue. When the dialogue opens, you will notice a series of options running down the left-hand side. These are how you move through the dialogue. First, click "Drop Shadow" and apply the following changes:

* Change Opacity to 75%.
* Change Angle to 120.
* Change Distance to 2.
* Change Spread to 0.
* Change Size to 3.

Next, click "Inner Glow" and apply the following changes:

* Change Opacity to 75%.
* Change the color to dark gray.
* Change Choke to 0%.
* Change Size to 2 px.

Finally, click "Bevel and Emboss" and apply the following changes:

* Change Depth to 400%.
* Change Size to 10 px.
* Change Soften to 9 px.
* Change Angle to -65.
* Change Altitude to 65.
* Change Highlight Opacity to 85%.
* Change Shadow Opacity to 30%.

Click OK and you'll be able to see your glassy button. Try replacing the background of your image with a picture so that you can see how the glass works on different colors. With text, you'll see that it gives the illusion of magnifying the text.

You can also add a color overlay in your layer styles to the pill and achieve even more effects. The color overlay should be set to "Multiply" mode and the opacity lowered until you get something you like. Definitely try this effect over an image if your button will be on top of something, so that you can see how the color overlay will affect the final look.

Don't forget that you can save these layer styles to use again and again. To do this, just open up your layer style dialogue again and click the "Save As" button. You will be promted to enter a name, and can now access your layer style from the Styles Palette in Photoshop.