How to Create a Web 2.0 Button in GIMP

Using GIMP to Make Button Images

Web 2.0 buttons are easy to create in Adobe Photoshop. But the good news for GIMP users is that it’s equally easy to create such a button in GIMP. This article shows you how to create a simple web 2.0 button in GIMP.

Start GIMP and create a new Image with the required height and width. For this example let’s create an image with height and width as 150px and 300px respectively. Make sure you set the background to transparent while creating the new image. (Image 1)

Click on the “Rectangle select tool” and create a rectangle that is the size of the button you want. Now to make the rectangle rounded, go to Select -> Rounded Rectangle. In the option box that pops up, select radius % as 40 and click OK. Now fill this rounded rectangle with your choice of color. Here I have used the color #212121. At this point your image should look like Image 2. Deselect the rectangle by clicking Select->None.

With the “Rectangle select tool”, create another smaller rectangle inside the rounded rectangle already created. Make it rounded the same way we did in case of the first rounded rectangle. With the new rounded rectangle still selected, click on the gradient tool and create a gradient with the color you filled your first rectangle with and another lighter shade of the same color. There’s no rule here - create a gradient the way you like that fits the web 2.0 style. Now fill the inside rectangle with the gradient. Your image should look like Image 3 at this point. Deselect the rectangle.

It’s time now to create the text of the button. Click on the Text icon on the toolbox and enter your text in the text editor. Select your choice of color for the text (in this case, white) and click Close to insert the text. Adjust the text box by dragging and expanding to align it properly on the button (Image 4). That’s it, your simple web 2.0 button is ready. You can improve on it by trying different colors and effects to make it more perfect.

Images