Web Site Graphics
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.
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.
Free Graphics
In this excerpt from The ABCs of Building Web Sites, Charlie Morris takes the "clueless newby" through the basics of adding images to a webpage.
While they offer a subscription service, they also provide over 600 free images, all categorized.
Over 20 categories of free static and animated images.
This site recently became a part of WorldAtlas.com and offers a huge variety of free continent and country maps and flags.
Gallery
The Great Globe Gallery is a collection of static and animated globes and global views that include all the various projections, photos from space, and much more. Everything from cartoonish globes to highly specialized views for scientists.
Over 25 categories of images and a search engine. Up to 20 images can be used at no charge on personal or non-profit web sites.
Animated Gifs, backgrounds & textures, balls, bars, bullets, buttons, clipart collections, icons & themes, and photographs for your site.
Free clipart, animated gifs, gif animations, backgrounds, bars, cartoons, icons and more!
Free Online Tools
A favicon (favorites icon) is a small, 16x16 image that is shown inside the browser's location bar and bookmark menu when your site is called up. It is a good way to brand your site and increase it's prominence in your visitor's bookmark menu. It also cuts down on the logging of 404 errors whenever a browser looks for this file on your site and cannot find it. Mine is a stylized version of my initials. Use this online tool to easily create a favicon for your site from an existing gif, jpg, png, or bmp file. It provides complete instructions on how to use the resulting .ico file.
Image Optimizer lets you easily optimize your gifs, animated gifs, jpgs, and pngs, so they load as fast as possible on your site. Furthermore, you can easily convert from one image type to another.
Free Graphics Editing Software
This started out as a viewer, but over time has grown to include some editing features. IrfanView is provided as freeware, but only for private, non-commercial use (that means at home). IrfanView is free for educational use (schools, universities and libraries) and for use in charity or humanitarian organizations. It runs on Windows only.
- Draw lines, circles, arrows, straighten image etc.
- Batch format conversion (with image processing)
- Multipage TIF editing
- Change color depth
- Cut/crop
- Effects (Sharpen, Blur, Adobe 8BF, Filter Factory, Filters Unlimited, etc.)
- Support for Adobe Photoshop Filters
- Capturing
- Extract icons from EXE/DLL/ICLs
- Lossless JPG rotation
GIMP is a full-featured program that rivals Photoshop. It is a freely distributed program for such tasks as photo retouching, image composition and image authoring. It can be used as a simple paint program, an expert quality photo retouching program, an online batch processing system, a mass production image renderer, an image format converter, etc. It is designed to be augmented with plug-ins and extensions to do just about anything. The advanced scripting interface allows everything from the simplest task to the most complex image manipulation procedures to be easily scripted. GIMP is written and developed under X11 on UNIX platforms, but it also runs on Windows and Mac OS X. There are links to many tutorials, support forums, and user groups on the web site.
Paint.NET is free image and photo editing software for computers that run Windows. It features an intuitive and innovative user interface with support for layers, unlimited undo, special effects, and a wide variety of useful and powerful tools. An active and growing online community provides friendly help, tutorials, and plugins.
