Painting the Web

Shiny Buttons:Gel, Wet, and Glass

Shiny buttons—whether "gel," "wet," or "glass"—share similar characteristics. The buttons have a three-dimensional look and are given a hard- or soft-edged reflection. Most photo and graphics tools can create a shiny button: all you need is support for layers, gradients, masking, opacity support, and a little blurring help.

Creating a 3D Button in GIMP: Shiny

A popular form of button is one that has a highlight at the top, creating a three-dimensional "hard" shiny effect, as shown in Figure 5-1.

Figure 5-1. Final shiny button with white text

To create this type of button using GIMP, first create a new image, one that's big enough to provide sufficient space to work with the new image. You can always crop out the unneeded background later.

Once the image canvas is created, add a transparent layer and use the Rectangle Select tool to create a rectangle approximately 250 pixels wide and 200 pixels tall. Check the "Rounded corners" tool option, with a radius of 40, and make sure anti-aliasing is turned on. The initial rectangle can be somewhat larger than the final button, which will make it easier to manipulate. Scale it to finished size before adding text or other images, or you can zoom in on the image without affecting its actual size.

Tip

For other editors, such as Photoshop, that support a rounded rectangle shape rather than a selection tool, you can always ...