Web Graphics "How-To" Page

This page contains notes on the production and use of grapics, imagemaps, tables, frames, and comment forms. The intended audience is participants of the Virtual Geography Department Project and many of the procedures outlined below are specific to the Project. If you have questions or comments, please let me know. 

Table of Contents

1. General Considerations: Graphic Design for the Web
2. Paths to Graphics:
3. Photoshop Tips: Answers to questions you didn't even know you had!
4. Saving images in *.gif and *.jpg formats. . .
5. Tables

6. Comment Forms

7. Clickable Imagemaps

8. Frames

9. Basic HTML Tutorial, including up-loading procedures 

Back to The Virtual Geography Department Style Sheet 

General Considerations:

There are a number of ways to capture graphics for use in your web pages. You can: Regardless of the source of your web graphics, you will improve their quality if you keep the following points in mind:

    Technical Issues:

    1. The image should not be more than 6 inches wide and 3-4 inches (432 X 288 pixels) tall. This size works well with Netscape's default window size. Larger images will not display completely on most monitors.
    2. Graphics should be set at 72 dpi (or as close as your scanner or drawing software allows) since most monitors display at 72 dpi. Many web-browsers will "blow-up" images with higher resolutions until they approximate 72 dpi. For example, a 2 X 2 inch image with a resolution of 150 dpi will be about 4 X 4 inches on a 72 dpi monitor.

      3. visres.cdr exported to visres.gif at 75 dpi (2K)

      visres.cdr exported to visres.gif at 150 dpi (4K)

    3. Try to keep graphics files smaller than 30K. Large files take a long time to load, especially over telephone lines.
    4. Solid backgrounds compress better (hence, look better) than textured ones. Dark gradients work well, but light gradients look "grainy". Notice the examples below:

    Communications Issues:

    1. Keep text simple and large enough to read, especially if you intend to project your pages via LCD-panel during class. Illegible pages are useless pages.
    2. Graphics images should have a "reason for being". Ideally, they reinforce text-based information but do not merely repeat the information. For every image on a page, ask yourself what its purpose is (what is it supposed to communicate), and whether it fulfills that purpose.

    Stylistic Issues:

    1. Recent releases of web-browsers allow you to use a mind-numbing array of colors and patterns as backgrounds for your pages. Use common sense. Highly textured backgrounds, while distinctive, are tiring to read from. The same goes for bright colors. They make an impression, but you probably do not want to present 15 pages of required reading for your class on a page that makes your eyes bleed.
    2. Tables, frames, and clickable maps can all be integrated into web pages to improve both their functionality and aesthetics. However, not everyone has access to a web-browser capable of supporting these features. Many of them are not even part of standard HTML! If you include substantive information in your pages in some of these "nonstandard" formats, you may want to consider having an alternate, text-only, page for those without high-end browsers.

    comments

    Created by Shannon Crum. Last updated 2000.4.25. LNC.