You've got a button you're proud of. Now we have to get it onto the Web without ruining it, and without making your visitors sit and wait for it. This is the lesson everybody skips, and then they write to me asking why their button has a white fuzz around it, or why their page takes a full minute to come up. Don't skip it.

GIF or JPEG?

Pictures on the Web come in two kinds, and they're good at different things.

My rule is short enough to tape to your monitor next to your shadow settings: if you drew it, GIF. If a camera took it, JPEG. A button saved as a JPEG gets little gray speckles around every letter, like a smudge on a mirror, and it usually comes out bigger than the GIF besides.

Cutting down the colors

Your button is a 16.7-million-color picture right now, and a GIF can only hold 256 colors at the most. So before Paint Shop Pro can make a GIF, the colors have to come down. Fewer colors also means a smaller file, which means a faster page.

How few colors can you get away with? I saved my HOME button from Lesson 2 every way I could think of, one evening when Ronald was watching the ball game. Here's what I got:

A 28.8 modem brings in somewhere around 3K a second on a good night, so every K you save is a third of a second somebody doesn't spend waiting. Three buttons at 2.2K instead of 4.6K saves your visitors two or three seconds before your page has even started on the words. For a button with a bevel and a shadow, I use that "type in any number" choice and keep 64 colors. A plain flat button with no shadow can go all the way down to 16 and look just fine.

See-through backgrounds

A GIF can mark one of its colors as see-through. Wherever that color is in the picture, the page behind it shows instead. It's how people get round buttons and lettering that seems to float right on the page.

Here's how. The colors have to come down first (step 2 above), because the see-through color belongs to the palette, and a full-color picture doesn't have one. Then go to the Colors menu and look for the choice about palette transparency. Tell it to use the background color, meaning the color around your button, and that color turns see-through. Then save as a GIF, and be sure the Options say Version 89a. The older kind, 87a, doesn't know anything about see-through colors.

Now, the white fuzz. This is the question I get more than all the others put together. Somebody makes a button on a white background, with nice soft antialiased letters and a soft drop shadow. They make the white see-through. They put it on their dark blue page, and there's a ragged white edge all the way around it, like a tooth that needs polishing.

Here's why. Remember from Lesson 1 how antialiasing works, with in-between dots along every edge? Those in-between dots were mixed with white, because white was what was behind the button when you made it. And a drop shadow is nothing but in-between dots, from dark to white. Only one color can be see-through, and it's all or nothing, so the pure white disappears and every almost-white dot stays right where it is. On a white page you'd never notice. On dark blue, it's a halo.

That's why Lesson 2 had you paint the whole picture your page's color before you drew the button. The soft edges and the shadow got mixed with pink, so they look right on a pink page. They'd look wrong on a black one, so if you change your page's color, make your buttons over. It's the only way I know that really works, and it's how I make every button on the league page.

Interlaced or not?

An interlaced GIF shows up blurry first and then sharpens as it loads, so visitors see something right away. That's nice for a big picture. For a little button that loads in a second anyway, it does nothing but make the file a bit bigger. Noninterlaced for buttons.

Putting it on your page

Upload home.gif to your space. If you use the File Manager, it takes care of everything. If you use an FTP program, pictures have to go up as binary, not ASCII, or they come out as broken pictures. And use small letters for every file name: on the server, Home.gif and home.gif are two different files, even though your own computer says they're the same. Dustin Mayfield's Flight Manual has a good little section on both of those troubles.

Then here's the HTML for a button that's a link. Put in your own sizes:

<a href="index.html"><img
 src="home.gif" width="136"
 height="56" border="0"
 alt="Home"></a>

width and height let the browser save room for the button before it arrives, so your words don't jump around while the page loads. border="0" stops the browser from drawing a blue box around it because it's a link. alt gives people with pictures turned off a word to click instead.

Next: pictures that move

Animation Shop came in the box with your Paint Shop Pro, and some of you are itching to make your buttons blink. I'm not the teacher for that. Deb Brodie is. Her tutorial, Flip! Making Animated GIFs, has a lesson on drawing the frames and another on putting them together, with timing, looping and see-through backgrounds, and what she calls "the dreaded white fuzz," which is our halo by another name. Tell her the Thursday night bowler sent you. She won't know who that is, but tell her anyway.

Chrome button from STARPORT by Dustin Mayfield

Questions about Lesson 3? [email protected]
Last updated Sunday, September 19, 1999