• Choose a category
• All
• Classic-Fiction

Play with the color sliders until you get the color you want. Because you made the changes on a new layer, you can always remove or hide the layer to return to the original. (Or have several different color layers so you can play with various options.)

Figure 4-8 shows an example of this technique using an image of a glass of orange juice by Graur Razvan Ionut I found at FreeDigitalPhotos.net. The original image contained only the picture of orange juice, but I duplicated the juice glass and changed the color of the second glass to look like coffee. Of course you’ll need to see this effect online or on the CD-ROM, because the color change will not be apparent in this black-and-white book.

Figure 4-8: You can use the Colorize filter to change orange juice into coffee.

Building a banner graphic

Nearly every commercial Web site has a banner graphic — a special graphic, usually with a set size (900 x 100 is common), that appears on every page. Normally, if you’re modifying a CSS template, you have a default banner graphic. You’ll want to copy this graphic in order to start with the right size and shape.

You can build a banner many ways, but here’s a simple technique you can modify (Figure 4-9 shows the banner’s progression):

Figure 4-9: The steps for building a banner.

1. Load or create the basic shape.

If you have a starting graphic to use, load it into Gimp. If not, create a new image of the size you need. Mine is 100 pixels tall by 900 pixels wide.

2. Create a plasma background.

Use the Plasma filter (Filters⇒Render⇒Clouds⇒Plasma) to create a semi-random pattern. Use the New Seed and Turbulence buttons to change the overall feel. Don’t worry about the colors; you remove them in the next step.

3. After the plasma background is in place, use the Colorize filter to apply a color to the background.

Pick a color consistent with your theme. For this example, go for a lighter color because you’re using shadows, which require a light background. Use the Lightness slider to make a relatively light color. (I’m going for a cloudy sky look, so I set Hue to 215, Saturation to 100, and Lightness to 75.)

4. Create a text layer using the Text tool.

Text in a graphic should be large and bold. The Text tool automatically creates a new layer. After you type your text, specify the font and size.

5. Duplicate the text layer.

In the Layers panel, make a copy of the text layer. Select the lower of the two text layers (which will become a shadow).

6. Blur the shadow.

With the shadow layer selected, apply the Gaussian blur (Filters⇒Blur⇒Gaussian Blur).

7. Move the shadow.

Use the Move tool to move the relative positions of the text and the shadow. Typically, users expect a shadow to be slightly lower and right of the text (simulating light coming from the top left). The farther the shadow is from the text, the higher the text appears to be floating.

8. Make the shadow semitransparent.

With the shadow layer still selected, adjust the Opacity slider to about 50%. This will make the shadows less pronounced allow part of the background to appear through the shadow layer.

9. Season to taste; make additions based on your needs.

For example, one client wanted a picture of his sign to appear on the banner. I took a photo of the sign, brought it in as a layer, cleaned it up, and rotated and scaled the image until it fit in place.

10. Save in a reusable format.

The native format for images in Gimp is XCF. (I have no clue what XCF stands for, but every time I try to make up an acronym, it comes out dirty. There must be something wrong with me.) XCF stores everything — layers, settings, and all. If you need to modify the banner later (and you will), you’ll have a good version to work from.

Choose File⇒Save As to save the file. If you specify the .xcf extension, Gimp automatically saves in the full format.

11. Export to a Web-friendly format.

Generally, I save banner graphics as PNG or GIF files. (Gimp supports both formats.) I prefer PNG unless the bottom layer has transparency