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.