Photoshop Tutorials -- Creating Pill-shaped Glass Buttons

Creating Pill-shaped Glass Buttons with Photoshop



It may be due to the new "look" of the various computer operating
systems, but whatever it is these glass buttons are everywhere and in
just about every shape. This Photoshop CS2 tutorial will demonstrate
how you can create glass pill-shaped buttons as seen in the figure
below.

Pill-shaped Glass Button

NOTE: This Photoshop lesson was created using Adobe Photoshop CS2, but the same results can be achieved in just about any version of Adobe Photoshop.



The techniques used in this lesson will enable you to create,
and easily re-create the glass button in any color so that you can
match the buttons with your Web site's color scheme.



Some of the techniques and tools used in this Photoshop CS2 web graphics lesson are:

• Making selections with the Marquee Tool
  
• Using Layers
  
• Creating Adjustment Layers
  
• Using the Gradient Tool
  
• Creating Cast Shadows
  

Creating the Pill Shape



To get started choose File, New... and enter 250 pixels for the
Width and 150 pixels for the Height. Set the Resolution to 72
pixels/inch and set the Color Mode to RGB and 8 bit. Set the Background
contents to Transparent and click OK to open the new file.


TIP: While you have the
"New" dialog box open you can enter a name for your file. I usually
leave that for later when I first save the file, but we all work
differently.



After clicking OK you'll see the new file. All that will be visible is
a gray and white checkerboard pattern (see figure 26.1). This pattern
signifies the layer's transparency. A quick glance at the Layers
palette (the Layers palette is, by default, located along the right of
the Photoshop main window, towards the bottom) will show you an icon of
that transparent layer (which can also be seen in figure 26.1. You can
see that the layer is named "Layer 1". Double-click the name in the
Layers palette and rename the layer "Background".

figure 26.1

Set the foreground/background colors to the
default black & white by pressing the 'D' key. To set the
foreground color to white, simply press the 'X' key to swap the
foreground/background colors.



Select the Paint Bucket Tool from the Toolbar and click anywhere in the image to fill the background layer with white.


NOTE: Because I'll be
displaying my glass buttons against a white background here at
grafx-design.com I'll fill the background layer with white. If you're
using a different color for your web pages, then you may want to use
that color to fill the background layer.




Create a new layer by choosing Layer, New, Layer... In the dialog box that appears name the layer 'Button Shape' and click OK.



You should now have two layers... the white background layer and a new transparent layer above it.


To create the button shape, select the Elliptical Marquee tool. It's
the top left tool in the Toolbar, though you may have to click and hold
over the tool's icon in the Toolbar if another tool is visible in that
spot.


With the Elliptical Marquee tool selected click-and-drag from
near the upper-left corner of the image... as you drag the mouse hold
down the SHIFT key. Doing so will give you a perfectly round selection.
Keep dragging until you have something that resembles figure 26.2.

figure 26.2

Release the mouse and select the Paint Bucket
Tool. Press the 'D' key to go back to the default background and
foreground colors. With the foreground color set, click in the selected
area to fill it with black. You should now have a black circle towards
the left side of your image.


To create a black pill shape from the circle, hold the CTRL
and the ALT keys and tap the right arrow key. As you tap the key you
may notice that the filled circle is being moved along the image and
that as it does so it leaves a copy of itself behind. After you've
tapped the key enough times you'll have a pill shape (see figure 26.3).

figure 26.3

This black shape will be used as a template to help create the button and its shadow.


Creating the Button's Colors




Create another new layer by choosing Layer, New, Layer... Name this new Layer 'Glass Button'.



The new layer will be active and you'll still see a circular selection. Choose Select, Deselect to get rid of the selection.


While holding down the CTRL key, click the Button Shape's icon in the
Layers palette. Doing so will select the filled area in the layer... in
other words, a selection that matches the size and shape of the
black-filled area of the Button Shape layer will be created.



This selection can now be filled on the new layer while leaving the button shape untouched for later.



Select the Gradient Tool. You may find it hiding under the Paint Bucket Tool in the Toolbar.


With the Gradient Tool activated click the 'Click to edit the
gradient' pulldown in the Gradient Tool's Options (it's just below the
main menu and it should resemble the previously used gradient, or a
black to white gradient). Doing so will bring up the Gradient Editor
(see figure 26.4).

figure 26.4

There are enough controls in this dialog to warrant their own
tutorial, so for now you'll have to simply follow along and use just
enough knowledge to get through this project.


Along the bottom of the dialog box is a gradient with sliders
along its top and bottom. The top sliders are for transparency (we'll
see how this works when we add the highlights layer) and the bottom
sliders are for colors. You can use the sliders along the bottom to
blend one color into another, in other words creating a gradient effect
from one color to another. Creating the glass button requires three
colors. The top and bottom will share the same color and the middle
color will be a darker shade of the color used for the top and bottom.


There will already be at least two sliders along the bottom.
Double-click the one at the left to bring up the Color Picker dialog
box (see figure 26.5).

figure 26.5

In the Color Picker dialog box set a color for
your glass button. I'll use cyan by setting the RGB values to 0, 255
and 255 respectively. Click OK to set the color once you've selected
it.



Repeat the process for the rightmost slider, setting it to the same color.


Click just below the gradient bar at its middle in the Gradient
Editor. Doing so will add another slider. Double-click that new slider
to set its color. Choose a darker shade of the color you used for the
ends. You should now have a gradient that resembles the one you can see
in figure 26.4.



Click OK to close the Gradient Editor.


Click near the top of the selected area and, while holding down
the SHIFT key to make sure the gradient is applied at 90 degrees
instead of tilting to one side or the other, drag the mouse to the
bottom of the selected area. Release the mouse button to fill the
selected area with the gradient you created.



You should now have something that resembles figure 26.6.

figure 26.6

This is a great start on the glass button. The
next step will use the transparency factor of the Gradient Tool to add
a highlight and its reflection.



Add some Highlights

To add highlights, giving the shape the
illusion of being both reflective and refractive, the transparency part
of the Gradient Tool will be used. The highlights, like the other parts
of this image will reside on its own layer. Choose Layer, New, Layer...
and name the new layer 'Highlights'.


The selection should still be active, but it needs to be
smaller, to shrink the selection choose Select, Modify, Contract... and
enter 5 pixels for the value.



Select the Gradient Tool and click the 'Click to edit the gradient' pulldown again to bring up the Gradient Editor.


This time remove the middle color slider by
clicking-and-dragging it off the dialog box. With the middle slider
gone, set the two ends to white by double-clicking each in turn and
setting the color using the Color Picker dialog box.


With the colors set add another transparency slider at the top
by clicking near the middle at the top of the gradient. Set the Opacity
for this slider to 0 and set its Location to 70%. Click OK to close the
Gradient Editor (see figure 26.7).

figure 26.7

While holding down the SHIFT key click-and-drag
from the top of the selected area to the bottom. When you release the
mouse you should have a highlight and its reflection in the button (see
figure 26..

figure 26.8

Select the Move tool from the Toolbar. It's the tool in the upper-right corner of the Toolbar.


If you don't see the bounding box and its handles around the
selected area, make sure there's a checkmark in the "Show Transform
Controls" option.


Using the Move tool drag the top and bottom of the highlights
until they almost meet up with the top and the bottom of the glass
button (see figure 26.9).

figure 26.9

Make sure that you don't drag the highlights
right up to the top or bottom, though, Leave at least a little of the
underlying 'Glass Button' layer visible to define the button's shape.


At this point the button itself is pretty much complete. You
could easily create a series of these with different text and you'd be
good to go. I'd like to add a cast shadow and the ability to easily
change the color scheme, though. Follow along to see how that's done...




Add a Cast Shadow

Duplicate the Button Shape layer by dragging
its layer icon to the "Create a New Layer" icon at the bottom right of
the Layers palette (the icon resembles a small page with a bent
corner).


Drag the Button Shape layer below the Background layer in the
Layers palette. Doing so will keep it out of sight but preserve it for
future use, if needed.



Rename the copied layer to 'Cast Shadow'.


With the 'Cast Shadow' layer active select the Move Tool and
use it to move the black shape down and to shrink it down a little as
seen in figure 26.10.

figure 26.10

When you're happy with the placement and size double-click the shape to apply the changes.



To soften the shadow choose Filter, Blur, Gaussian Blur and set the Radius to about 4.0 pixels.



To make the shadow less opaque, turn down the Opacity setting in the Layers palette. I set the value to about 50%.




Change the Button's Color Scheme

To make this graphic more
useful, in terms of color scheme it would be cool if it were possible
to easily change the color of the glass button without affecting any
other area of the button including any text that might be used. Here's
how that can be done...



Activate the 'Glass Button' layer by clicking its icon in the Layers palette.


Choose Layer, New Adjustment Layer, Hue/Saturation... in the
New Layer dialog box that pops up make sure you set the "Use Previous
Layer to Create Clipping Mask" option. Doing so will assure that the
color changes only affect the glass button layer. It's almost like
magic


You can play around with the color settings by changing the
Hue (which color), Saturation (how much color) and Lightness (how dark
or light the color is) sliders. When you're done click OK. Figure 26.11
shows the glass button in several colors.

figure 26.11

At any time, even after saving the file (it
must be saved as a .psd file, though), you can now go back and edit the
color of the button by simply double-clicking the Hue/Saturation
adjustment layer... It's not almost like magic, it is magic, I tell
ya... it is!