Web pages are almost always designed with Web graphics. But if you don't understand some basic principles about Web graphics, you won't be able to create great Web pages.



Web Graphics are Square

The first, and most basic principle to understand about Web graphics is that they are square, or rectangular. The best way to see this is by looking at a Web graphic in a graphics software program. Pick a graphic that doesn't look square, for example, the "Go" icon at the top of this page (next to the search box). It looks round, doesn't it? But it's not, it's square. Try downloading it (right click, "Save Picture As...") and opening it in Photoshop, Freehand, or Paint Shop Pro. The picture in the image is round(ish), but the actual image is square.

All Web graphics are square because of the nature of the Web. The Web is displayed on computers. Computers display pictures as millions of tiny dots. But even those dots are not round, they too are square.

Pixels in Web Graphics

As I mentioned above, all Web graphics are made up up millions of tiny dots, called pixels. Each pixel is a tiny tiny square that is colored to form the basis of the image. There is a similar technique in painting, called pointillism developed by Georges Seurat. The thing about computer pointillism is that pixels are square. This forces the shape of the final image to be square.

But if the basic unit of a Web graphic is square, then how are we able to create images that have round or curved elements, and appear to have round edges? This is accomplished with two techniques: anti-aliasing and transparency.

Anti-Aliasing

As I mention in another article, anti-aliasing works because of the way human brains interpret what we see. This technique for creating curved Web graphics looks at each pixel on the curve, and changes the saturation of color depending upon how much of the curve is part of that pixel. So, if the curve takes up half of the pixel, that pixel is 50% saturated with the color of the curve. Our brains then convert this blurring into a crisp looking curve. You can see this by looking at the graphic saying "Jennifer" up above. The top line is anti-aliased, the bottom isn't. Notice how the curved letters look more jagged on the bottom line.

You can create anti-aliasing yourself by blurring the edges of your curves, but most Web graphics programs will automatically anti-alias curves for you, unless you change the options to specify that you want jagged edges.

Transparency

Once you have a curve in your image, you will want to have it appear to be the edge of the image. There are basically two ways to do this:

1.Use the same background color for your Web page and your image.

This is most common when using black or white backgrounds, as most monitors are consistent in how they display these colors.

2.Use a basic background color for your image, and save the image as a GIF with that color marked as transparent.

This tells the Web browser to display that Web graphic with one color not showing. Any color below the graphic will then show through.

You can create transparent images with any Web graphics software package. One thing to remember is that transparency is done on one color of your images. So if you are trying to create a curved edge with anti-aliasing, you should create the curve on a background color palette the same (or close) to what your background will be on your Web site. This will insure that the anti-aliasing will not create a halo around your image.

Now go out and have fun creating some round square Web graphics!