Section

Section

Section 3.3 - Design principles

Keywords: GIF color reduction, Netscape 216 color cube, Photoshop, CorelDRAW, CGM and Postscript conversion.

Note (1999-11-11): PNG is preferred nowadays, because of patent problems with GIF (Unisys).

As can be inferred from section HTML standard RGD (2.3), there are a number of explicit design principles that have applied when implementing the RGD WWW server. They are a consequence of the objective of the site. Furthermore the RGD has limited resources (in time, money and man power) on the one hand and the developments on the Web (e.g. HTML is fast moving) on the other hand.

The objective of the RGD site is a to be a site that is primarily informative and accessible for everybody (also for people with limited bandwidth, e.g. Eastern Europe or developing countries). Only secondarily the site should be graphically designed in an attractive way, but always within the constraints of easy accessibility of the information and a user friendly and efficient presentation.

This has led to the following design principles:

• Clear design and maintainance procedures, referring, as much as possible, to existing and accepted standards and literature, thus ensuring that the pages:
  • are relatively "future-save" (and not dependant on dubious and often browser-specific, html extensions)
  • are easily maintainable, extensible and not bound to persons (webmaster or webdesigner)
  • are easily created according to templates
  • are user friendly and efficient: because of the consistent setup, navigation and documentat presentation are always uniform and recognizible
• Orders, information retrieval and feedback are possible via user friendly e-mail forms.
• Usage statistics of visits to the server for marketing analysis.
• Syntactical correctness of the HTML pages and meta-info for administration and indices.
• A maintainable and intuitive setup of the directory structure where the HTML documents, often both in english and dutch, and images are located.
• A registered use of so called symbolic links with which long url's can be prevented and short, meaningful url's are possible that are suitable for reference in publications etc.
• User friendly names of html documents that are not error prone (e.g. always lower-case).
• Explicit multi-browser support, including Lynx for character oriented systems c.q. low bandwidth clients.
• Well thought out usage of graphical elements (images) that have been kept to a minimal size with advanced software and techniques in order to prevent long download times.

Sometimes a conversion of an image is necessary, before it can be processed in Photoshop. This is the case with CGM and PostScript files, that come from, e.g., ARC/INFO.
CorelDRAW (version 5) has problems with both files, although it has the filters to process them. Therefore, they are first converted:

RAL-CGM

With this publicly available tool, a CGM file is converted to PostScript first. Example:

  ralcgm -dps afile.cgm

Result is a PostScript file afile.ps.

Ghostscript, Ghostview and GSview

With these publicly available tools, PostScript files can be converted to 8-bit (256 color) bitmapped files (e.g. Windows BMP), that can subsequently be processed in Photoshop to produce a GIF file.

Here is the procedure to convert an image in Photoshop (3.0) to a transparant GIF file, that has a minimal size and the Netscape 216 color palet. This palet is used, by the way, because it provides a good way to ensure a platform independent (color-)presentation (less risk of dithering) and not so much because of Netscape!
Note (1999-11-11): due to patent problems with GIF (Unisys), it's beter to use the PNG format.

1. Open a new file in Photoshop or an existing one that possibly has been converted first (see above) to a format that Photoshop will eat.
2. First convert to bitmapped "CMYK colors", with the Modus command and then to "RGB-colors". Converting it to RGB directly can sometimes give less results.
3. Then, convert to "Indexed colors":
   1. Choose "Palet self" and "Dither none" and then OK.
   2. Choose "Load" and load the Netscape 216 color palet as ACT file and then OK.
   3. Again, choose "RGB-colors" and then "Indexed colors", but now with "Resolution different". This last step further reduces the palet info in the GIF file to come.
   4. Optionally further reduce colors if there are more than 32 colors (5 bits is preferred, maximum is 216 colors).
4. Save the file in GIF formaat. File name is, e.g., "afile.gif".
5. Determine the RGB value of the background color (usually white) and the color index of that RGB tuple with giftool ("$ " is the Unix prompt):
   
     $ giftool -p afile.gif
   
   The output will typically be something like:
   
     GIF Image afile.gif (129x31)
  Image Colormap
   1: 255 255 255 (0xff 0xff 0xff) white
   2: 16 16 16 (0x10 0x10 0x10)
   3: 33 33 33 (0x21 0x21 0x21) gray13
   ...
   
   The color index of (e.g.) white thus is 1.
6. White (1) is made transparant as follows (the "-B" option of giftool writes in the file itself):
   
     giftool -B -1 afile.gif
   
   Interlacing can be added as follows:
   
     giftool -B -i afile.gif
   
   
7. Reduce a big image to a 50 x 50 thumbnail by redimensioning it and saving it as a seperate file. Include this thumbnail in HTML documents, selection of which will result in the display of the actual (non-reduced) image.

Keyword search in this handbook

Section

Section