Classy Glassy Buttons pg 3: Production Graphics with Wendy Peck at webreference.com

Classy Glassy Buttons: PhotoShop Glass Buttons

There is no denying that glass and plastic buttons are becoming very popular. Some sites feature single glass buttons to draw visitor attention to a special area of the page, while others form the entire navigation system for a site.

Glass buttons can add a lot of color to a page without carrying heavy visual weight. Take a look at the button at the left as compared to the filled shape below. The glass button is brighter and adds more life to the page, but the filled shape takes up a lot more "space.". Although the text is exactly the same, it is clearer on the glass version of the button.

Creating these buttons is very quick and easy in PhotoShop, without using filters. I prefer methods without filters when doing tutorials, since so much of graphics productions is has common methods. By working through the steps to make a glass button, you are learning to add dimension and transparency, a skill that can be taken to your next project.

Selections and graduated fill
The technique to create anything glass involves three elements. The first is selection, the second graduated fills. The third is seeing, and is the most important part of the exercise.

Glass has highlights, and matte areas and distorts any images that are seen through it. PhotoShop's ability to fill from a color to transparent is perfect for the task as we will see. If you are interested in shapes other than what we touch on here, study where the light hits – take an object under a very strong light and turn it around, watching where the clear highlights are and the muted areas that seem to absorb the light. Also, pay attention when you see glass design on the Web. It only takes a few spots of light to imply glass, a few more to imply texture in the glass.

Of course, the first task in creating an object in PhotoShop is selection. Glass objects are rarely square, but you can use the Action included on the previous page to create rounded rectangles. If you want one or more of the edges to be flat, first create the rounded rectangle shape. With your SHIFT key held down, add the square edge as shown here. Save the selection. See saving selections in the part two of the Masks tutorial.

Settings for Gradient fills. Create a custom fill by clicking on Edit and following the settings below.

Creating the fill that will be almost transparent and provide see-through shaping for our buttons.

Graduated fill
Before you start, you will have to decide the direction for the light. Since glass takes all shaping from reflection, the light effects must be consistent. In the sample we are working on here, the light direction is from the top.

Note: To create the basic button shape, we will use a fountain fill that is close to fully transparent. The foreground color is set to black, even though we need a light gray for the start of our fill. We will reduce the opacity of the entire fill to achieve the gray. Although with a white background, the look would be similar if setting the color to light gray and using full transparency, we would lose the transparent quality that will be valuable when we want to change the color later.

Select the Linear Gradient Fill tool as shown here. Double click on the tool to open the Gradient Fill window and create the settings as shown at the left.

Click on the Edit button to open the Gradient Editor, a portion of which is shown at the left. Make sure Foreground to Transparent is selected, and black is set for the color at the left. Click the Transparency radio button to select. With this option active, the changes you make to the slider bar affect transparency. Click on the key below the Adjust slider to make it active. The Opacity window should become active, and will probably state 100%. Change this to 20%. This tells the fill to start with an opacity of 20% - in other words, almost see-through. Click on the key at the right and change the value to 0%. The example below the values is a preview for the effect you have created. (The small diamond at the top of the adjust example is used to change the center point of the transparency.)

Gradient fill is applied straight down since the light source is directly from the top. .

Gentle stroke added to button to define shape. We will remove parts of the stroke later, but since it is on a separate layer, that is easy.

Create a new layer.

Click and drag from the top of the selection area, and holding down the SHIFT key to hold a straight line, drag to just before the bottom edge of the button. Although we do want a little color at the bottom, we do not want it right across, so will add it later.

This is our basic fill, but we have to add some highlights and dull areas to turn it into glass. We are working with transparent buttons here, and will often want to add an outline to define the outer shape.

Create a new layer. Make sure the original selection is active, with the foreground set to black. Choose Edit>Stroke. Reduce the opacity of the layer to lighten the color. (It is easier to see the results if you use CTRL H to hide the selection border, before you apply the stroke.) Again, we are working with transparency rather than colors to create our effects so new colors or patterns can show through the button.

The bottom half of the rounded rectangle selection is removed.

Our button now has some depth.

Add highlights
Make a new layer. Draw a new rectangle selection near the top of the button. This highlight will provide the shaping for the top of the button – the thickness. Run the rounded corner Action again to provide a little shape. To duplicate this highlight, create the rounded rectangle, and with your ALT key pressed to subtract from a selection, draw a rectangle marquee over the bottom half of the rounded rectangle, as shown here. Feather your selection by one pixel and fill with white.

See how the shape is starting to pop out. Experiment with the highlight – make it wider, narrower, less bright (fade fill) more feathered, no feather, leave the full rounded rectangle. You will start to understand how adding the highlights adds the shape.

We are almost there ...

Light does not play into glass in an orderly way. To add a little realism to this button, we are going to add an area in the middle of the button that will suggest the see through quality, (this will also be enhanced when we add text).

Create a new layer. Make a rectangular selection and choose Select>Feather and a value of 20. Fill with white. The steps are shown on the left. (Note: For fast downloads, I have converted all the working samples to GIF files – some of the subtle shading is lost.)

Compare the final sample here to the sample immediately above. Although we did not add much color, the sample here has more dimension.

We also want to add a little color to the bottom edge. Because the light is coming from the top, this will not be as strong as the top color and highlighting. Create a new layer and reload the button selection. Select the Linear Gradient tool and start outside the selection to click and drag into the corner, or bottom of the selection. This will add a hint of the fill within the bounds of the selection. (You may wish to turn off selection borders for a clear view.) The goal is to add uneven hints of color.

To finish the look you may want to do any/all of the following: Select the stroke layer, select the stroke and using the eraser in Paintbrush mode, "paint" away some of the border. Select the corner/bottom layer and blur several times, or use the smudge tool to blend the color. Add highlights with the paintbrush or airbrush set to a very low opacity (advise a new layer for this). In short, finish it by eye.

Carry on to the next page to add text and color to the button.

Next page

Classy Glassy Buttons Tutorial Index

Classy Glassy Buttons Start
PhotoShop Rounded Rectangles
PhotoShop Glass Buttons
PhotoShop Glass Buttons 2
PaintShop Pro Rounded Rectangles
PaintShop Glassy Buttons