Creating a Web Button in Gimp

 This is quite a comprehensive tutorial on how to create a web button in Gimp, and since there are many styles of web buttons, I will first show how to create the standard shiny Web2 button, then a simple matt effect button. I will then use the matt web button to show how to make a rollover button using CSS rather than javascript.

Creating a Shiny Web 2. Button

1/ Open Gimp and create a new transparent layer to a size that suits the button for your website. The buttons here are large to make the images clearer for explaination purposes.

2/ Choose the Rectangle Select Tool from the Toolbox then draw out the shape of your button. Make sure the rounded corners option has been selected and you have added the size of the curves for your button. Something between 15-20 should be good.

3/Once you have drawn you button use the Bucket Fill tool to fill it with colour, then add another transparent layer.

4/ From the Select menu click on Shrink and choose a setting of around 2, then click OK. This will create a clean edge for the button.

Adding Gradients

5/ Now select the gradient tool. With white as the foreground colour select the FG to Transparency gradient. Using the image below as a guide, add the gradient to the active layer. You can tweak the opacity of the gradient if it looks too stark.

6/Create a new layer and select the Rectangle Select tool again. In the upper half of the button draw a rectangle as in the image above. Now fill it with same gradient you used earlier so the new selection looks similar to the image below.

7/ Add another layer and using either the Paintbrush or Pencil tool draw a straight line towards the bottom of the button, using a size of brush that looks natural for your button. Now select Filters > Blur > Gaussian Blur and in the window that opens add a blur of around 12. Now click OK and your button should look something like the image below.

Adding Text

8/ Select the Text icon from the Toolbox and click on the button image. In the window that opens type in the text for your button, With the text window still open, you can select the size, font and color of your text in the Toolbox panel. When you are happy with your text click OK.

9/ To give the text more definition you can add some shadowing. Select Filters > Light and Shadow > Drop Shadow. In the window that opens set the X and Y offsets to 0, and the blur radius to around 10, then click OK.

10/ To add more definition to the button, make the original button layer the active layer and then select Drop Shadow from Filters again. With the same settings for the text click OK.

Creating a Matt Button

Fashions change in web design and matt buttons are appearing more and more. They are simpler to make than shiny buttons too.

1/ Follows steps one to four above.

2/ using the Gradient tool with the same settings as above, add a gradient that suits your button. You can tweak the opacity of the gradient as well as giving it a Gaussian blur. However, if you do add a Gaussian blur as well as a drop shadow to the button it will tend to have an out of focus appearance. One or other of the effects is advisable.

Creating Rollover Buttons with CSS

To create your rollover button you will need to create an image of two buttons with one placed directly underneath the other. The lower one will be what is shown when a cursor hovers over the button.
The purpose of stacking the buttons as one image is that it helps to avoid flickering when the cursor is placed over it, as well as keeping down the number of images you need to add to your website.

HTML code for the Button

The HTML for the button is one simple line of code:

<a id="wugallery" href="#" title="Wu Gallery"><span>Wu Gallery</span></a> 

The link is given an id so that it can be styled with CSS. When creating your own button, you will naturally give it its own id, and add your own title. The text between the span tags is what search bots will see, but will be hidden in regular browsers.

The CSS code

#wugallery{
  display: block;
  width: 100px;
  height: 25px;
  background: url("wugallery.gif") no-repeat 0 0;
}

#wugallery:hover {
  background-position: 0 -25px;
}

#wugallery span {
  display: none;
}

The width element in the code should be the same width as the buttons, but the height is half the image of the two combined buttons. The URL segment is the path to your button image. Run your cursor over the button below to see how it works in practice.


That is essentially all there is to creating rollover buttons with CSS. To create more than one button is simply a matter of giving each button a unique id in both the HTML and CSS code, as well as changing the URL path for each button.