LESSON 2: WHAT THE HELL IS THAT?
Keeping the same thread from the last session, another finer art in web page development is paying attention to things. Such as the monstrosity you saw on the last page. The problem with that image is that the background is first of all, not uniform. Secondly, the image is GIF89'd (transparencied) for white, so the transparency shows through the background. This is ok, except that there is white actually INSIDE the image, so his eyeballs and underwear end up being black. Not good. I'm gonna show you how to fix it.

Here is our graphic, which looks great on a white background. Perfect. But say that your background is black, or worse yet, one of those horrible repeating images that has tons of color. What do you do? Well, let's start with the image itself. When you get pictures like this, they are usually antialiased for a particular background color, sometimes white, sometimes black. First off, you need to make the background uniform. You can do this with a pen in your graphics program, or you can use a mask wand (in photopaint and photoshop) to grab everything. Clean off the background.

In photopaint (and other's I'm guessing), you will get a dotted line going around your selection. If you didn't grab the whole background to the image, you may need to fiddle with the tolerance of the mask wand tool. Adjust it to 10, try again. Fiddle with it until all you have selected is the background, and delete the background. Your background will presumably be white. Note: the gray in this image is the 'dead space' on my screen. This is not part of the image, but part of the posterboard effectively.

Now that we have a mask around Homer, and all of that is clean, we need to differentiate what background color we will use. If you are using a dark background, you'll want to make the masked area dark. Light would be light. The crucial thing here is that after we have cleaned the dark space, this graphic is still antialiased for light as shown here.

See how there's a thin blackish line, and then going away from the body it gets lighter? If you took this in it's current form and put it on a black background, it would look crappy. You need to do a fill that is approximately the color of your background. Now here's the trick: If your image has colors the same as your background, those will be transparent too. Which is murder on one of those pattern backgrounds.

I know there is black in this image, and shades of gray, so I'm going to use a darker blue, but not black for my background. I'm also going to make sure that when I do the fill, that antialiasing is on. When you do this, it will take those light pixels and antialias them to your fill, leaving you with a pretty clean transition.

The background on this image is not black, but a very very dark green. Trust me. Now, I'm going to take a horribly ugly background and throw him on it.

Note that he's choppy on light colors, but looks fine on darker colors. However, on all colors, his underwear is white. If we were to make it for a light background, I would have taken a lighter shade of gray (10% or 20% black) and used that for the background color. That would have worked in the same fashion, where it looks great on most light, jaggy and somewhat poorly antialiased on dark, but his underwear and eyes would remain white.

The biggest things here are the fill color and the antialiasing of the background area into the image. If you pick the right color (close to what your background will be) and antialias it, your image will look killer. The homer above on the right looks absolutely perfect, and notice you don't see any of the lighter greens coming throught the lines of his body.. this is because we picked a color that was not originally in the image.

So next time you steal that graphic, clean it up a little before you throw it on your site.

Next Lesson: Hot Damn! Mouseovers.