Using GIMP: Web 2.0 Buttons - I

Web 2.0 has adopted its own distinctive style for interface elements, dominated by those three dimensional, reflective buttons. Using GIMP, it is easy to create those buttons. This is the first of two ways to do it - a relatively simple method. I will post a slightly more involved method later.

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

I started 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 arc and add the light gradient

Select the Ellipse Select Tool, and draw a wide selection broader than the button itself, to end up with an arc across the front of the button.

Next select white as the foreground color. Add a new transparent Layer. Then selecting the Blend tool, and set the Gradient option from foreground (FG) to transparent. Starting at the bottom of the arc, draw a line up vertically.

Finally, ensuring that the newly created layer is selected, change the mode to "Screen" to ensure that the gradient is clipped to the non-transparent portion. Then play around with the Opacity till the button starts to look like the way you want it to.

Step 5 - Add in the text

Using the text tool, add in the text into a new layer. And you are done. Flatten the image using Image > Merge Visible Layers. Then save it for web. I saved the button as a .png image to preserve transparency. But if you choose a PNG, be aware of compatibility issues with old versions of IE. Voila! An easy to make 2.0 button.

In fact this method of using an arc to suggest reflectivity and depth can be used with any shape - squares, hexagons or even circles. Simple enough to do, and very easy to overdo.