WilburUsing the GIMP v.2Wilbur

(You can refer to the GIMP Users' Manual online if this is not sufficient, or to Grokking the GIMP by Carey Bunks. Both are available as books also.) 


1. transparent background:

mozilla-banner.png (2K) The GIF and PNG formats support making any selected area transparent. The tricky part of this is to select the area to get all and only the pixels you want to zero out.

I recommend using the Select by Color tool from the Tools Palette and select one of the goldish pixels. Use Shift+click to include more shades of gold until you get them all, and then clear the selection (Edit>clear). Here is a rather large (6 Meg) video tutorial on this in Ogg Theoria format.

Useful tip: You can always shut off the "active selection" boundary (the "marching ants") with Ctrl+A.

PNG graphics have a full alpha channel, unlike GIFs, so they can register a full gradient of opacity, not just all or none. These display properly in Netscape 6+ and Mozilla, and, with a little tweaking, in MSIE 5+ also. (The melting ice image below is semi-transparent.) See Javascript Library, item #2 for the tweaking code and pointer to an example. See Carey Bunk's sections 4.2 and 4.3 on layer masks..

2. selection tools
The uniform background is just a simple case of selection; anything that can be selected can be made transparent (as well as modified in a great many other ways). You can also select by geometric shape (rectangle, ellipse), freehand line drawing, magic wand, or Bezier curve drawing tool. Using the selection tools takes experimentation and practice.

3. sharpening and correcting for color cast
Many images imported via a scanner or from a Kodak Picture/Photo Cd need color adjustment and sharpening. These (and most) filters work only at full color ("RGB") depth, so the first thing to do if your image is not a jpeg or other 24/32 bit color format is to choose "Image" (under right mouse button) and select "RGB" if it is not already selected (unless you want Grayscale). (This is also where you can "Scale" (ie. resize) your image.)

To sharpen a blurry image, you can use either "Sharpen" or "Unsharp Mask"; the latter is usually better because it does not sharpen dust spots. Note: Some sharpening is nearly always needed after you resize an image (down).

  1. Open the "Filters" menu and choose "Enhance", then "Unsharp Mask"
  2. Try Unsharp Mask at the default settings; if you don't like the result, ctrl-Z it and try other values. Most changes like this one can be applied to a selected area only or to the whole image. If you have not selected an area, the whole image is assumed to be selected;

To adjust color levels, Tools>Color Tools>Levels. Try "auto" to equalize the color balance. You may want to increase the Saturation with "Hue-Saturation" also.

Correcting color casts is often successful with Colors>Auto>White Balance; can add Colors>Auto>Color Enhance

4. Using T(ext)
"T" in the Toolbar is for inserting text in an image, and you can select DynText by double-clicking on the T. To use regular Text,

  1. To give flexibility later on, first open another layer by:
    1. opening a Layers dialogue box with Ctrl+L (or from Dialogues>Layers)
    2. Shift+Click on the first button in the bottom left of the window—the dog-eared file for "new layer";
    3. Create a New Layer box will open; choose "transparent" for the back ground; choose OK. You will not see any difference in the image window, but as long as the "new layer" box is blue (selected) you will be writing into that layer, not onto the background, and so can move the text or remove it later if you want.
  2. double click the T button in the Tool Palette;
  3. the Text Tool dialog box will open, giving you selection of font, size, style of font. The color of the text will be determined by the foreground color (which is the top--black--box in the Tool Palette shown on the right. To select another color, click on the black square and then select from the color palette that comes up. Make your font selections, then click on the image about where you want the text to start. A little Test Editor box will open where you enter the text. It will be displayed in the box and also in the image window where you clicked—selected (with marching ants).
  4. You can move the selected text by first clicking on the Move tool in the Tool Palette (the four-arrowed tool) and then dragging it to position it exactly (or you can use the cursor arrows on the keyboard to go pixel-by-pixel).
  5. In the Layers Dialogue Box, the layer you opened will now have the text as its layer name. It should be the darkened (active) layer, with an eye showing that means it is visible (along with the Background, also visible). When you are satisfied with the placement of the Text, click next to the eye, and a little chain link will appear, indicating that you have anchored the contents to the layer. If you click at the same spot in the Background, you will anchor the layer to the Background, and any attempt to move the text will move the whole assembly. If you later change your mind and want to move the text, clicking on the anchor chain will unanchor it, so that it can be moved around as before. When all is as you want it, open "Filters" (under the right mouse button), choose "Colors", then "Semi-Flatten." (Filters>Colors>Semi-flatten)
  6. You can now open Image>Mode and drop the colors from RGB to "indexed" (=GIF⁄PNG) if you want (though PNG is capable of full RGB as well); save as file.gif, jpg, or png.

5. Imagemaps
A plugin for making Imagemaps can be found under Filters> Web>Imagemaps. It loads an image, lets you select areas of the image as rectangle, circle, or polygon, asks for the URLS associated with each area and the name of any target window, offers a tab for writing Javascript actions (such as popping open a new window) triggered by the area, and writes the HTML needed in a window; you can save this in the file with a .map or .html extension and then paste it into the main document containing the image. [Note that this file includes the image.]

Hang onto this file, because if you want to add to or change the imagemap, you need to load it back into the GIMP Imagemap editor. (That is, the Imagemap editor can't read and write to an entire HTML file.) The Grokking section is good and not much out of date, but does not warn you about saving the map file. To reload the saved file and edit the imagemap: first load the image into GIMP, then call up the Imagemap editor. Then Open the map file, which should cause the current links to appear in the right window. Edit and save, then re-insert into the larger HTML file.

6. Drop Shadows
The Drop-Shadow plugin (Rt-click on canvas; Script-Fu>Shadow>Drop-Shadow) gives many options for density, sharpness, and location of the shadow. The plugin adds the shadow to the selected area, so if you want to add shadow to Text (and not to the whole box), make sure the text is selected when you add the shadow. Drop shadows of more complicated shapes are possible also, in advanced GUG tutorials.