September 10, 2010

Using GIMP: Web 2.0 Buttons - II

In a prior post, I posted an easy way to make those three dimensional reflective buttons that are typical of the new Web 2.0 interface elements. GIMP, is a great tool to create those nice and shiny buttons. The other method was relatively quick, and this one is a tad more involved.

I am using GIMP 2.6.10 for the tutorial. For earlier versions, the main difference is the difficulty in selecting with rounded corners. Step by step tutorial with pictures after the break


Step 1 - Create new image

Begin with a 200 x 50 pixel canvas with a transparent background. Having a transparent background allows you to save it in formats that support transparency. You could also start with a background that matches that of your site.

Step 2 - Select colors

Pick the color of your button as the foreground color. Click on the foreground color palette on the toolbox and pick a color. Bright colors work go well with the 2.0 motif. Next you need to pick a slightly lighter version of the same color as the background color. To do that, click on the background color palette, pick the original color as the foreground, and using the sliders for saturation pick another color that is close to and lighter than the foreground color. The picture above shows the foreground and background colors.

Step 3 - Create the button and color it

Use the rectangular select tool. Check the "Rounded corners" option, with a radius of about 8 pixels. Drag and create a selection of the desired size. Next fill it using the Blend Tool. Make sure you select the Gradient from foreground to background (FG to BG). Drag from the bottom of the selection to the top of the selection to create a gradient that lightens towards the top. Play around with length of the drag for your desired effect.

Step 4 - Create the main reflection

Select the rectangular tool, with the "Rounded corners" option. Drag and create a selection, just inside the button at the top, going down to about two thirds the height of the button.

Click on the foreground palette, and select white. Now create a new transparent layer using the menu option Layer > New Layer. Switch to the Blend tool, and change the Gradient option as foreground (FG) to transparent. Fill the selection by dragging from the top of the selection to the bottom, using the "Ctrl" key to constrain the line to be perfectly vertical if required.

In the Layers dialog window, select the recently created layer. Decrease the opacity down, depending on how shiny you want it to be. I decreased opacity down to about 50%.

Step 5 - Create the fill light reflection

A filler light is typically used to balance the one-dimensional nature of a single light source. To get this effect, use the rectangular selection tool (with the same rounded corners) to select a thin selection just above the bottom of the button.

Create a third new transparent layer, using the menu Layer > New Layer. Using the Bucket Fill Tool, and white as the foreground color, fill the selection with white.

Step 6 - Balance the fill light

With the recently created third layer selected, apply a little blur. Select the menu Filters > Blur > Gaussian Blur. Apply the blur with a 5px radius. Next in the Filters Dialog Box, reduce opacity to about 20% to make it lighter than the main reflection. The layers dialog should look like in the picture.

Step 7 - Add text and save the button

Now using the text tool, add the desired text as a new layer. Next merge the layers, using the menu Image > Merge Visible Layers. Save the button as a .png file to preserve transparency. But be aware that if you do, you may have compatibility issues with some early versions of IE. Alternately you could add a desired color layer and save it as a .jpg file. But here is how it looks.

There is an alternate simpler way to get a similar effect, check out that tutorial.

No comments: