Rollovers

Stock images for this tutorial

• N/A

Full Size Screenshots

[Show as slideshow]

A web page rollover consists of two or more images that are usually the same size and shape but may be different colors or contain different content. They appear in the same location but at different times. One of the images is displayed when the page is loaded. When a visitor moves his or her mouse over the image or clicks the image, JavaScript or CSS code replaces that image with another.

As CSS is more widely supported by web browsers, fewer web designers are using JavaScript to animate their rollover images. It’s far easier to code CSS than it is to write JavaScripts. JavaScript does offer a few more bells and whistles, however, including button up-and-down states, special images that appear when the mouse is moved over or away from areas on the web page, and even custom-programmed events.

Rollovers are typically used to indicate that an image functions as a link. CSS even allows you to create text links that change characteristics depending on mouse movements. This is a more efficient way of providing feedback because text can move across the Internet faster than images. That said, most CSS- and JavaScript-based rollovers still use images.

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 tutorial focuses solely on developing the images for rollovers, specifically as their use relates to the use of GIMP layers. There are plenty of other tutorials that explain how to write CSS or JavaScript code to achieve these simple web effects. I’ll leave coding issues to the more advanced and suitably motivated web developer.

Getting Started

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 ImageGuidesNew 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.

Further Exploration

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.