[QUEEN OF HEARTS ...]

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

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!

In the next Photoshop CS2 lesson we'll look at turning the button into a navigational bar, complete with text and rollovers.


That's it for now.

 

---

---

Last edited by QUEEN OF HEARTS ...; 09-12-2008 at 08:30 PM..

[AYAZ]

Thanks for sharing

 

---

ALLAH FARMATA HAI :
AEY BANDEY JO HUA
WO ACHA HUA .
JO HORAHA HAI ACHA HO RAHA HAI.
JO HOGA WO BHI ACHA HOGA.
TERA KIYA GAIYA JO TU ROTA HAI
TU KIA LAYA JO TU NE KHO DIYA.
JO LIYA YAHIN (DUNYA) SEI LIYA
JO DIYA YAHIN (DUNYA) PE DIYA
JO AAJ TERA HAI PEHLAY KISI AUR KA THA
AUR KAL KISI AUR KA HOGA.
TABDEELI KAINAAT KA MAMOOL HAI
BAS TU WO JAMA KAR JO TU SATH LEI KAR JANEY WALA HAI
YANI NAIK AMAAL.

[ShArArTi MuNdA]

Thnx 4 shaying

 

[zubair725]

[SHAYAN]

Thnx 4 sharin

 

[Girl]

niceee...

 

[LAMS]

nice
thx for shairing

 

---

[maliksaim]

Nice work .............

 

[(‘“*JiĢäR*”’)]

nice....

 

---

დ∫დ→◄●♥●►↔ǺήĐằŽ~◊Ệ◊~ßάΫǻЙ↔◄●♥●►←დ∫დ

[DILSEPAKISTAN]

thnx for sharing