This tutorial takes you through the process I used to create the image above using GIMP, the GNU (formerly General) Image Processing Program. (Actually, the goal was to create a title plaque for my SGI-internal home page.) There were a lot of experiments and false starts before I got something that looks this good. (Hey, I like it!) Being a pretty considerate sort of person, I'll spare you all the versions that didn't make the cut.

My hope is that you might want to create something similar or at least use some of the tricks described here.

Note that all the images in the tutorial are scaled to appear at 50% of their actual size. Click on an image to see it at full resolution.

Section 1: Positioning the text and graphic

1. Create a new canvas (shortcut=Control-N). Select the Text tool (shortcut=T) and click in the canvas to bring up the Text dialogue. In this example we used the Honesty font, 40 pixels high, antialias=5. Move the selection around to position the text. Then switch to the Rect Select tool (R) to select each line and move it a few pixels left or right to align about the center. (An alignment tool sure would be nice.) If the line spacing seems excessive (for example, if none of the characters in the top line had descenders), we might want to move the second line up a few pixels.
   
2. Now we add the graphic. Actually, we want to add a solid black placeholder that will give us the 3D effect later on. Here's the baby gnu that I got from the GIMP home page (which used to be at UC Berkeley but now has its own domain). Open the GIF file (Control-O) and then convert it to an RGB image (Alt-Shift-C), so we can use it with our text.
   
3. The gnu is a little large for our text. Let's reduce it by about 25%. Scale the image (Alt-Shift-S) to 75 by 112 pixels. (If we select the Constrain Ratio option we can type the Width value and have the plugin determine the corresponding Height.)
   
4. Make a duplicate of our graphic (Alt-D). Select the entire canvas (Control-A). Switch to the Bucket Fill tool (Shift-B) and fill the canvas with black.
   
5. We want to give our graphic curved edges. Switch to the Ellipse Select tool (E). Now drag out a small circle in the upper left corner of the black canvas. The size of the circle will determine the size of the curved edge to the graphic. The circle should touch the left and top edges of the canvas.
   
6. Now switch to the Rect Select tool (R). Hold down the Shift key. With the Shift key held down, drag out a region from somewhere inside the circle to the bottom right edge of the canvas. When we release the mouse we'll have most of the canvas selected. With the Shift key held down, drag out additional rectangles until the entire canvas is selected except for the curved bit at the top left.
   
7. Invert the selected region (Control-I) so that just the curved edge at the top right is selected. Change the foreground color to white. Switch to Bucket Fill (Shift-B) and fill the edge with white.
   
8. Duplicate the canvas (Alt-D). Flip the duplicate canvas vertically (Alt-V). Now Composite (Alt-C) the canvas from step 6 (First Image) onto this canvas (Second Image) using this canvas as the mask (Mask Image). We now have curved edges at both the top and bottom left.
   
9. Duplicate the canvas from step 7 (Alt-D). Flip the new canvas horizontally (Alt-H). (If we get any white pixels on the left edge after the flip, switch to the Paintbrush (P) and paint them out. This would appear to be a bug in GIMP, at least in the version I have.) Now Composite (Alt-C) the canvas from step 7 (First Image) onto this canvas (Second Image using this canvas as the mask (Mask Image). We now have curved edges at all four corners.
   
10. Select the entire canvas (Control-A) and copy it to the clipboard (Control-C). Go to the canvas with our text and paste the graphic into it (Control-V). Switch to the Rect Select tool (R) and move the graphic (actually the placeholder) where we want it. Use a combination of mouse drags and the cursor keys to position the graphic.
    

Section 2: Making the plaque surface

1. Create a new canvas of the same size as our plaque. Use the Plasma Cloud plugin (Filters -> Render -> Plasma Cloud) to generate a pattern of color in the canvas. Here we used the default values for the plugin.
   
2. Gaussian blur (Alt-Shift-B) the clouds by 3 pixels to remove the rough transitions. Grayify the image (Filters -> Map -> Grayify). We need to remove all the color from the image before we add in the color we want.
   
3. Now we need to choose a color for the plaque. Switch to the Color Picker (O). Click on a part of our image (the baby gnu) that we want to match, like his blue scarf. Write down the red, green and blue values reported by the Color Picker: 149, 197, 251.
4. To match this color, we'll Decompose our gray plasma into its component parts (Filters -> Conversions -> Decompose). Choose the RGB decomposition. We'll get three identical gray images.
5. Start with the canvas labeled "red". Click near the upper left corner of the image to get its intensity: 134. Bring up the Brightness / Contrast / Gamma plugin (Filters -> Map -> B/C/G) on this canvas. Adjust the brightness higher until clicking on the canvas shows a Color Picker intensity near the one we wrote down: 149. When we get the value we want, click on the OK button to lock it in.
6. Repeat the process for the green and blue canvases. Don't worry if we don't get exactly the same intensity as the gnu. Close is good enough.
7. Now we combine our three canvases into one. Compose a new canvas (Filters -> Conversions -> Compose). For the R/H/C Image, specify our red canvas. For the G/S/M Image, specify the green. For the B/V/Y Image, specify the blue. (Ignore the fourth image setting, which is only used for CMYK composition.) When we click OK we'll see the result of all this work.
   

Section 3: Making 3D text

1. We'll create two variations on our text canvas to create light and shadow effects. Begin by Offsetting (Alt-O) the text canvas from section 1 by -3,-2 pixels. Gaussian Blur (Alt-Shift-B) the new canvas by 3 pixels. Contrast Autostretch (Filters -> Map -> Contrast Autostretch) the result.
   
2. Subtract (Filters -> Channel Ops -> Subtract) the blurred canvas from the original text canvas. Invert the color of the result (Alt-I) to create a shadow above and to the left of the text.
   
3. Next we combine the shadow with our texture. Invert the color of the texture from section 2 (Alt-I), which gives us a weird orange effect. Multiply (Alt-M) the texture canvas by the shadow from the last step. Invert the result (Alt-I) to change back to the sky blue color and change the shadow to a highlight.
   
4. We do almost the same thing a second time to get the shadow. Offset (Alt-O) the text canvas, this time by +3,+2 pixels. Gaussian Blur (Alt-Shift-B) the new canvas by 3 pixels and Contrast Autostretch (Filters -> Map -> Contrast Autostretch) the result. Subtract (Filters -> Channel Ops -> Subtract) this canvas from the original text and Invert the color of the result (Alt-I). Multiply (Alt-M) this shadow by the canvas from step 3 to finish off our raised text.

Section 4: Finishing Up

1. We use the Composite plugin to give the gnu the rounded corners we created earlier. Composite (Alt-C) the gnu (First Image) onto the black canvas with white edges from section 1, step 8 (Second Image), using the same black canvas as the Mask Image. We'll get a picture of the gnu with round corners.
   
2. Turn on the Fuzzy Select tool (Z). Click on one of the white corners of the gnu image to select it. Hold down the Shift key and click on each of the other white corner regions in turn. Invert the selection (Control-I) to select everything except the corners. Copy (Control-C) the selected region to the clipboard. (If you are having trouble selecting the small white corners, Zoom In the image (=)).
   
3. Now go to our raised text canvas and paste (Control-V) the gnu in place. Drag the image to its rightful place over the raised box. Use the cursor keys to move it into position. We can get rid of the crawling selection line with the Select Toggle (Control-T) command, which makes it easier to see exactly where the image needs to go.
   
4. Our final step is to round the corners of our image. The process is identical to the one we followed with the image placeholder (section 1, steps 3-8): Create a solid black canvas, select one corner and fill it with white and then Composite that corner onto flipped copies of itself until we have all four corners done. Finally, Composite (Alt-C) our canvas from step 1 (First Image) onto the black canvas (Second Image) with the black canvas as the Mask Image. We can save the result and convert it to a GIF file, with white as the transparency color.

To our surprise (well, my surprise, anyway) we end up with a pretty large image file: around 43KB or almost twenty seconds at 28.8KB. A JPEG file at quality=60 is one third the size, which makes it a better choice. But JPEG files don't support transparency. How do I use a JPEG file and have my page background show up in the corners instead of white space?

The answer is simple, at least if our page has a solid colored background or a very simple background image: fill the corners of our image with the background. Here's how I combined my page's background image and the plaque to create the title for this page:

1. Open the background image file (Control-O). If it's a GIF file, convert it from an indexed image to full color (Alt-Shift-C). Tile the canvas (Alt-T) to the same size as the plaque. (The Window Info command (View -> Window Info) will give us a canvas's dimensions.)
2. Now Composite (Alt-C) the plaque (First Image) onto the tiled background (Second Image), using the Mask Image we used to give the plaque its rounded corners. Save the result (Control-S) as a JPEG file.

Choosing between GIF and JPEG image formats is not entirely straightforward. In general, a JPEG image will require less disk space than a GIF image of similar quality. JPEG images are also true (24 bit) color, while a GIF image is limited to 256 colors from a 24 bit palette. On the other hand, for simple graphics like our gnu above, a GIF file may be smaller than its JPEG equivalent. GIF also supports options like transparency and animation that don't exist in the JPEG spec. Another complication is the fact that many browsers don't (or at least didn't) support JPEG images on a web page: Mosaic, AOL's browser and early versions of Netscape Navigator among them.

For my pages I used to use small GIF thumbnail images that were linked to much larger JPEG files, using a JPEG quality setting of 60 to balance file size and image quality. I have since changed over to JPEG format for the thumbnails as well as the full size image files. On this page I use JPEG except where the images are so simple that GIF files are smaller.

There are a number of pages on the web that discuss GIF and JPEG compression. An excellent resource is JPG vs GIF by Melissa Piccone. It has a good discussion of the topic and some very effective illustrations of the tradeoffs involved with each format.

Take me home:

Show me another:

Comments to: Hank Shiffman, Mountain View, California