Stock images for this tutorial
Full Size Screenshots
This tutorial shows how to create a single button, modify it for different rollover states, and organize your layers for use with rollovers. The rollover states will include Normal, Over, and Click. Normal is the image’s default state, Over is the state when the mouse is over the image, and Click is the state when the user clicks the image but does not move the mouse off the image.
This rollover consists of a single button on a thin, horizontal button bar. A gradient is used to give the buttons a sense of depth.
- Start with a white canvas sized to 120 x 50 pixels. If you have a large display, this may seem like a fairly small workspace. Feel free to zoom in on the canvas (shift-plus) while following along.
- With the canvas selected, press D to reset the foreground and background colors.
- Click the foreground color box in the toolbox to open the Change Foreground Color dialog. Set the RGB values to 142/142/142 for a neutral gray, and click OK to close the dialog.
Choose the Blend tool from the toolbox.
- In the Tool Options dialog, check the Reversebox (double-ended arrow to the right of the Gradient name) and choose Bi-Linear from the Shape drop-down menu. The Bi-Linear setting will add a gradient that spreads in two directions along the line you drag in the canvas. In contrast, choosing the Linear shape causes the gradient to spread only in the direction you drag.
- Set the Opacity to 100 percent, set the Mode to Normal, and choose the FG to BG (RGB) setting for the Gradient.
- Add a vertical guide at 50 percent by choosing ImageGuidesNew Guide (By Percent). Drag down the canvas along the guide, starting one-third of the way from the top of the canvas and going all the way to the bottom.
- Turn off the guide (Image->Guides->Remove All Guides).
Creating the Button Text
- With the canvas selected, press D to reset the foreground and background colors once again.
- Choose the Text tool from the toolbox. In the Tool Options dialog, choose a legible font such as Times New Roman Bold sized to 25 pixels.
- Click the canvas to open the Text Editor. Type Store Info and complete the edit by hitting the ESC key. Don’t be bothered if some of the text isn’t visible. It will be when you center the layer.
- Use either the Move or Align tool to position the text layer on the center of the canvas.
- Turn off visibility for the Store Info layer. Click in the canvas outside the layer boundary for the previous text layer to add another text layer. Use the text editor and type Find One…, center it on the canvas, and turn off its visibility. Then add another text layer you name Searching, center that text layer, and turn off its visibility. Finally, turn on visibility for the Store Info layer.
Adding Color to the Layers
- Add a transparent layer using Layer->New Layer and name the layer Color.
- Move this layer by dragging it in the Layers dialog so it’s below all the text layers but above the Background layer.
- Change the foreground color RGB values to 5/138/30 for a bright green to use for the default button state. Drag the foreground color into the new layer. In the Layers dialog, set that layer’s mode to Grain Merge.
- Export the image as Button-Normal.jpg, using the default settings for the JPEG format.
- Change the foreground color RGB values to 6/208/44 for a lighter shade of green, and drag the foreground color into the Color layer.
- Turn off visibility for the Store Info layer and turn it on for the Find One… layer. Save the image as Button-Over.jpg.
- Change the foreground color RGB values to 208/211/10 for the yellow shown here, and drag the foreground color into the Color layer once more.
- Turn off visibility for the Find One… layer and turn on visibility for the Searching layer. Save the image as Button-Click.jpg.
By placing a colored layer between the background gradient and the text layers it becomes possible to create multiple images from a single GIMP project. All that’s required is to set the visibility and mode appropriately for each layer so the canvas shows the proper image, then export the image.
This technique could be modified so the text color changes when the button is moused over or clicked. If you try this, first create your text with the appropriate color, then duplicate the text layer and change the color of the text in the duplicate layer.