CorelDRAW is my favorite tool for creating Web buttons. If you can use
DRAW (or PhotoPaint), you can design a nice shape, duplicate it to
create a set of buttons, and then add distinct text to each button.
In the Unleashed series "From CorelDRAW to the Web,"
Part 1 examined
the basics of saving images as web-compatible GIF files,
Part 2 showed you
how to create tiled web background images. In Part 3, we'll build
on the basic tools covered in those tutorials to create a hover
button that "glows" when a visitor moves a mouse cursor over the
button in a Web page.
First, we'll create a basic navigational button:
Start by enabling one of the two browser-friendly color palettes
so that the colors that you assign will survive the Web. Do that by
choosing Window | Color Palettes, and then clicking either Netscape
or Internet Explorer (we won't play favorites here, and the palettes
have a similar set of 216 browser-compatible colors).
Create one shape object that will be the background for each
button. Keep it simple because a) simple is better, and b) we'll
be creating a "hover" version of the button and the simpler the
original button is, the more effective the "hover version. After
you are (reasonably) happy with your background shape, duplicate
it (Ctrl+D). No need to align your buttons since you'll be saving
each one as a separate file. But create one extra shape - one that
you won't use in a button. We'll use it later to create a "hover"
version of the button.
Tip: Since we'll be saving the buttons as graphics, not as text, we can use any font in our arsenal. So stretch out, and feel free to experiment with any font.
You can, of course, use the Align & Distribute dialog box
(Arrange | Align & Distribute) to center your text on your
button. But I find that because of descenders and ascenders
(like g and d respectively), text "centers" better on buttons
when you locate the text on the button by hand.
Figure 1 shows a set of buttons made from rounded rectangles, with
a simple, light colored background, and button text created by
stretching Harpoon text to fit each button.
Now comes the fun part - creating a "hover" version of the button
that will display when a visitor moves his or her cursor over the button.
Hover effects can include creating the illusion that a button
changes color, changes text content, is "glowing" when a cursor
passes over it, or recessing (as if it is being pushed in). For
this tutorial, we'll experiment with effects that make a button
"glow" when it is hovered over.
Create a second background shape that will display as the
"glow" version of the button. Usually you'll want this shape
to be the same size as the shape behind the original button,
so we'll start with the duplicate of your original button shape
(from Step 2 in the first set of steps). Or, if you forgot to
create a backup button shape, just select one of your existing
buttons (ungroup it if it's grouped), and duplicate the background
shape. Figure 2 shows this duplicate button, ready to have a
"glow" effect assigned to it.
We'll use a concentric gradient fill to create a glow effect.
With your duplicate button selected, choose Fountain Fill from
the Fill flyout. The Fountain Fill dialog box appears.
From the Type drop-down menu in the Gradient Fill dialog box, choose Radial.
In the Color Blend area of the dialog box, choose a Two Color
blend, and make the From color the same as the color you assigned
to the background shape for your buttons. Since you're working
with a 216 color palette, matching the colors won't require anything
beyond eyeballing the colors. Use white, or a very light yellow or
gray for the TO color to create a bright "glow" effect in the
middle of the hovered version of the button.
Experiment with Edge Pad and Mid-point settings. They produce
similar effects - enlarging or reducing the size of the "inner glow"
in the button. Try a setting of 15% for the Edge Pad and 50% for
the mid-point to create a glow that is bright enough to be noticed,
but not so large that the button simply changes color when it is
hovered over. Your settings should look something like those in Figure 3.
Click OK to close the Gradient Fill dialog box and to apply the fill
to your rectangle. Then, duplicate the "glow" background rectangle so
that you have two full sets of buttons. Duplicate the text in each
original button, and place a copy on the "glow" version of the button,
so that you have two complete sets of buttons, as shown in Figure 4.
Our "normal" and "glow" buttons are now ready to plug into our
Web site. If you're a Java coder, and know how to define a glow
button, more power to you. But why are you working with CorelDRAW
when you could be making big bucks coding script? For the rest of us,
there are WYSIWG Web site generators that will let us plug in files
for a "normal" and "glow" version of a button. I'll use FrontPage
for this task, but the routine is similar in any program:
Export each button as it's own JPEG file. To keep my image
files organized, I use a system where one button is named
home.jpg, and home-glow.jpg. To Export a button, be sure to
select both the button and the text! (You can check to see that
2 objects are selected in the Status Bar).
With your two button objects selected (the shape and the text),
click on the Export tool in the toolbar. Choose the Selected Only
checkbox, and choose JPEG from the Files of Type drop-down menu.
Enter a file name, and click on the Export button.
In the Bitmap Export dialog box, choose Paletted 8-bit Color.
(The only real effect of choosing 24 or 32 bit color is to
multiply your file size - and download time - by a factor of
about five). Click the Anti-aliasing and Dithered check boxes
to smooth jaggies out of your text, and to create a more subtle
looking gradient fill in your exported JPEG file. Select a
resolution of 72 dpi. 96 dpi may give you a slightly sharper
image on some monitors, but will also greatly increase your
file size. Editor's Note: The image's pixel size (96 x 20) is important, the dpi is not.
And, with Web graphics, keeping file size under
control is essential to a site that loads before your visitors
get bored. When your settings in the Bitmap Export dialog box
look like those in Figure 5, click OK.
The final stage of exporting your selected objects to JPEG is
the JPEG Export dialog box. The default compression setting (10)
maintains the quality of your image. Larger settings decrease
download time, but also decrease image quality. The Progressive
checkbox assigns "fade-in" properties to your image - unnecessary
and distracting for a small button image like ours. The Optimized
checkbox will calculate export settings for you, and will work
well for a button like ours (note that selecting this checkbox
disables the Progressive checkbox). After setting these final
export options, click OK.
Repeat this process to save each of your buttons as a JPEG file.
The good news is that your previous settings become the default,
so all you need to do is change the file name as you save two
versions (regular, and "glow") for each of your buttons.
With your buttons saves as images, it's a good idea to save
the entire page full of buttons as a CorelDRAW file for future reference.
Finally, plug your buttons into a program that toggles between a
regular, and a hover version of the button. Since I'm using FrontPage,
I'm using the Hover button dialog box (From the menu choose
Insert | Component | Hover Button | Custom) to define my "Button,"
and "On Hover" images - as shown in Figure 6. Your Web design
program will have a different menu structure, but a similar
dialog box somewhere for normal and hover buttons.
In Figure 7, I used the same color scheme from the glow buttons to
create a page banner, a horizontal line, and a background tile image.
(For a tutorial on creating page backgrounds, see Part 2.
Figure 8 shows the glow button effect zoomed in - showing a normal
button and a glowing button.
