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".
Backgrounds (also called textures) are so much more interesting than just using a background color. Just add
attribute to the BODY
tag near the top of your
page. To keep it from scrolling with your text, add the BGPROPERTIES="fixed"
as well. (This page uses a style sheet instead. Both methods work.)
Typical syntax would be <BODY BACKGROUND="background.gif" BGPROPERTIES="fixed">
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
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.
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.
The Great 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.
Online Image Optimizer
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
- Effects (Sharpen, Blur, Adobe 8BF, Filter Factory, Filters Unlimited, etc.)
- Support for Adobe Photoshop Filters
- Extract icons from EXE/DLL/ICLs
- Lossless JPG rotation
GNU Image Manipulation Program (GIMP)
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.