Photoshop Elements Tutorials -- Creating Pill-shaped Glass Buttons

Creating Pill-shaped Glass Buttons with Photoshop Elements

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 Elements 5 tutorial will demonstrate how you can create glass pill-shaped buttons as seen in the figure below.

Pill-shaped Glass Button

NOTE: This Photoshop Elements lesson was created using Adobe Photoshop Elements 5.0, but the same results may be achieved in other versions of Photoshop Elements.

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 Elements 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 run Photoshop Elements and choose Edit and Enhance Photos. Even though we'll be creating an image with Photoshop Elements rather than working on a digital photo, this is the correct choice.

Once Elements opens choose File, New, Blank File… In the "New" dialog box that pops up enter 'Glass Button' for the Name and set the Width to 250 pixels and the Height to 150 pixels. Set the Resolution to 72 pixels/inch and set the Color Mode to RGB. Finally, set the Background contents to Transparent and click OK to open the new file.

After clicking OK you'll see the new file. All that will be visible is a gray and white checkerboard pattern (see figure 3.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 side of the Photoshop Elements Editor 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 3.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 "New Layer" 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 5th tool from the top in the Toolbar, though you may have to click and hold over the icon in the Toolbar if the Rectangular Marquee 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 3.2.

figure 3.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 3.3).

figure 3.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 3.4).

figure 3.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 the top and the 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. To create the glass button requires three colors. The two ends of the gradient will share the same color (ultimately they will be the top and bottom colors of the pill-shape) and the middle color will be a darker shade of the color used for the edges.

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 3.5).

figure 3.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.

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 3.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 our 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 3.6.

figure 3.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 3.7).

figure 3.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 3.8).

figure 3.8

Select the Move tool from the Toolbar. It's the first tool in the in 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 Bounding Box" 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 3.9).

figure 3.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 top left 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 from 'Button Shape copy' to 'Cast Shadow'.

Choose Select, Deselect to release the selection.

With the 'Cast Shadow' layer active select the Move Tool and, while holding down the SHIFT key, tap the down arrow key three times to move the shadow shape down. Using the Move Tool, shrink the height of the shadow down a little, as well, as seen in figure 3.10.

figure 3.10

When you're happy with the placement and size click the checkmark 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 "Group With Previous Layer" 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.

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's icon in the Layers palette… It's not almost like magic, it is magic, I tell ya… it is!

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 3.11 shows the glass button in several colors.

figure 3.11

That's it for now... Be sure to check out some of our other Photoshop Elements tutorials, and remember kids, only use your grafX powers for good and not evil :)

High Quality video-based tutorials

...with over 300 different titles, all taught by professionals. Learn any application in a fraction of the time right from your own desktop. This unique method offers accelerated learning and a high retention rate. Here are a couple of topics that you might find interesting. View free demos of the courses using one of the links listed below.

Illustrating a Guitar - Part 1 It may seem to be quite an undertaking to create a realistic illustration of something like an electric guitar, but I wanted to challenge the ease-of-use of this software. Read more....

Creating Complex Shapes Drawing circles, squares, triangles , etc. is easy with a vector program. How do you combine these shapes to create something more complex, though? Follow this tutorial and you'll see how easy it can be to create just about any shape you need.
Read more....

Software Deals

Download and try out the free demos and then save 10%, 20% and more when you decide to buy!

GrafX-Design.com has partnered with some of the best graphics software companies in the World to offer you terrific savings on your favorite programs.

AlienSkin

Photoshop Plugins

We've been using AlienSkin's Photoshop Plug-ins for over a decade and they are still our favorites.