Site Design: Graphic Elements

STEP SIX: DESIGN BASIC GRAPHICS

At this stage I usually pop open Photoshop to make whatever basic graphics I'll need, mostly because they often play an important part in spacing, so I can't really rough out the site without them.

This isn't, I'm afraid to say, a class in graphics creation. There are some links on the resources page for finding clip art on the web, but mostly you're going to be on your own. I will, however, share with you one very special, very magical, and very easy trick: the one-pixel gif.

So what is a one-pixel gif? Here's one:

It's an image that is only a single pixel. That makes the file size (as you might imagine) very very small. So, what can you do with it? For starters, working with the Width and Height properties (W and H on the properties palette when image is selected or inserted) you can make horizontal lines:

(W=450, H=1)

and vertical lines:

(W=1, H=200)

You can also make cubes:

and no matter how large you make them, the file size remains small, because you're still loading the same one-pixel gif—you're just telling the browser to stretch it.

Using the V Space and H Space properties, you can also control spacing:

V Space and H Space of 0, 2, 4, 6, 8, 10, 12, 14, 16, 18

And, what's more, they can be used as the backgrounds for tables:

So, they're small and versatile, but they're also easy to make. Just open a graphics program, start with a new image around 10 x 10 or 100 x 100 or whatever. Fill with the color of your choice and then reduce the size to 1 x 1 and save as a GIF. Voila!

In general, I recommend keeping graphical elements to a minimum, but I will also say that having a few one-pixel's handy just about always comes in handy. OK, so we're just about ready to start the actual design of the main page. So let's think about the style sheet.