Web Site Graphics

Graphics can add a lot of interest to your site. They can also make it totally unreadable or just really ugly. The major categories are backgrounds (textures), buttons, banners, bullets, bars, and icons. Apparently, most graphical elements need to start with the letter "B". smiley

Backgrounds (also called textures) are so much more interesting than just using a background color. Just add the BACKGROUND attribute to the BODY tag near the top of your page. To keep it from scrolling with your text, add the BGPROPERTIES="fixed" attribute as well. (This page uses a style sheet instead. Both methods work.)

Typical syntax would be <BODY BACKGROUND="background.gif" BGPROPERTIES="fixed">. Keep in mind that whether you use a color, an image, or a a fixed image for your background, you need to ensure sufficient contrast between your background graphic and your text. I hate pages with dark blue text on a black background, or yellow text on a white background.

Buttons are typically tied to a link so that when you click on them, something happens. Banners are most often section headings or advertisements. Bars are the more interesting replacements for the truly dull <HR> tag.
Bullets are great for making lists of items look more interesting. Why use a plain filled circle when you could have something much more stylish?

Icons are useful to highlight areas of your page. For example, they could be a fancy way of indicating "new" items. They can also be used in place of more traditional-looking buttons.

A major decision to be made about each graphic you want to use is whether or not to use an animated graphic. Animated graphics are made by putting a series of slightly different images together into one file, and the web browser shows each "frame" in a repeating sequence. These files can be very efficient. For example, the email icon used at the bottom of this page is only 5k. However, animated graphics can be distracting.

Do keep in mind the two potential evils of graphics: they take up space on your server and they slow down the loading of your page. Also remember that graphic images can be copyrighted. Be sure you have permission before using an image on your site.
horizontal bar

Free Graphics

horizontal bar

Free Online Tools

horizontal bar

Free Graphics Editing Software