Nearly every commercial HTML5 and CSS3 website has a banner graphic — a special graphic, usually with a set size (900×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:
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.
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.
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.
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.
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).
Blur the shadow.
With the shadow layer selected, apply the Gaussian blur (Filters→Blur→Gaussian Blur).
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.
Make the shadow semitransparent.
With the shadow layer still selected, adjust the Opacity slider to about 50 percent. This will make the shadows less pronounced and allow part of the background to appear through the shadow layer.
Season to taste; make additions based on your needs.
Save in a reusable format.
The native format for images in Gimp is XCF. 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.
Export to a web-friendly format.
Generally, you should save banner graphics as PNG or GIF files. (Gimp supports both formats.) Consider PNG unless the bottom layer has transparency (because some browsers still don't support the advanced transparency features of the PNG format). Do not save images containing text in JPG format. The JPG compression scheme is notorious for adding artifacts to text.
Normally, when you save to another format, a dialog box of options appears. If in doubt, go with the default values.
