HOME | EXPERTS | GRAPHICS| column 25

Classy Glassy Buttons: Glass Buttons in PaintShop Pro

Please read through the PhotoShop method for glass buttons. The method is slightly different, but the reasons for and construction of the shaping and dimension is the same for any glass object. The following is a straight how-to method.

Fill background layer with white. Create a new raster layer. Create your rounded rectangle as desired for final outer shape. To get the correct shading for the button, you will have to build a custom gradient fill. Choose the Flood Fill tool from the toolbar to open the Flood Fill Options window. Choose Linear Gradient for fill style. Click on the middle tab to edit the gradient fill. Choose Angle 180 and click on the Edit button to open the Gradient Editor.

Click on the color keys at the bottom of the sliders to make changes. Click on the left key to change the top color. Even though we will adjust transparency later, the best results will come with a dark gray rather than a black start to the fill. Click on the custom color well with the left key selected to change color. Click on the right key and choose white. Note the position of the center symbol above the slider. This controls where the color midpoint will be.

With the color chosen, set the transparency. Click on the left key and specify the Opacity as 10. Click on the right key and specify Opacity as 0. The result is shown in the lowest window.

Click OK and return to the document. Click within the selection to create the initial fill. Check results and make any required changes. Delete or undo the previous fill before filling again.

Create a new raster layer. Using the rounded rectangle selection, select an area for the highlight. Feather the section by 2 or three to blur the shape a little. Fill with white. (The samples here are shown as GIFs which is great for download time, but a little rough on graduated fills.)

Create a new layer. To add the center highlight, create a rounded rectangle selection in the center of the button. Feather the selection with a value of 20. Fill the selection with white, set to an opacity of 50%. If the fill is not smooth, try Image>Blur>Soften to blend colors.

To place an outline, it is best to create a temporary layer and create a temporary solid button to use for selecting a border. Create a new raster layer (Hint: call it Temp or something that will tell you to discard it once the outline is selected.) Load the button shape that your saved earlier. Fill with a solid color. Choose Selections>Modify>Expand and specify 1 pixel. Choose the Magic Wand tool and with CTRL key pressed, click on solid color to remove that area from the selection. You should have an outline area selected as shown at the left. Save the outline to an alpha channel. Delete the Temp layer. Create a new layer and fill the selection with black. Adjust layer opacity until you have the outline color you desire.

For the bottom shading, create a new layer. Gradient fills cannot be started from outside a selection in PaintShop Pro, so the lighter shaded areas at the bottom of the button must be added by hand. Load the button selection. I achieved the best results with the Airbrush tool set to size 30 and opacity 5, working with a dark gray foreground color. To finish, reduce the layer opacity to approximately 50% or to where the shading looks soft and realistic.

Select the Stoke layer and choose the eraser. Set opacity to 30% and remove most of the outline from the bottom and lower sides of the button.

Add text
With the Text tool selected, click approximately where you would like to place your text. Create as Floating text. To add the drop shadow, select Image>Effects>Drop Shadow. Set Opacity to 33, Blur 10, Vertical Offset 4 and Horizontal Offset 0.

That's it. Your first glass button is complete.

Add color
Create a new layer just above the background layer. Reload the button selection and fill with the color you desire. If you wish the colored button to be transparent to allow a background to show through, use a darker color than you wish to use and reduce the transparency.

The layer window for the colored buttons is shown here.

This is just a tiny sample of what you can do with glass buttons. Experiment with different shapes. Perhaps a dingbat can provide the perfect shape for your glass buttons. (See Dingbats.) Have some fun, and put glass to work on your site.

Return to start

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