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
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
We begin by laying out our text and graphic. The challenge here is to
give the graphic rounded corners and to get identical rounding on all
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
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
the GIF file (Control-O) and then convert it to an RGB image
(Alt-Shift-C), so we can use it with our text.
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.)
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.
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.
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.
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.
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.
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.)
(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.
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
Section 2: Making the plaque surface
Our next task is to create the surface texture for the plaque. We'll
use a color from our graphic as the basis of our texture. Assuming
that the artist knows how to pick reasonable colors, that will give us
a combination that works well together.
- 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
- 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
- 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.
- 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.
- 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.
- 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
- 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
Now we combine the results of our first two sections to create 3D text
on our plaque surface. I learned this technique by reading one of
Kai's Power Tips that
explained all about the wonders of PhotoShop (and GIMP)
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.
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.
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.
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
All that's left is to put our gnu graphic in the right place and to
round off the corners of the plaque. We'll also think about the right
format for our final image in the Great GIF vs. JPEG debate.
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.
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 (=)).
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.
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
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:
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.)
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
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:
Mountain View, California