Website Design: Part Eight

DESIGNING YOUR OWN WEBSITE

Vicky Vickers

PART EIGHT: MODIFYING GRAPHICS
Transparent Graphics
If you don't want your graphic to have a rectangular border, you can make the background colour of the graphic transparent. With Graphic Converter (see Tip-of-the-month below), you simply click on the colour you wish to be transparent with a little tool which looks like a bit like a magic wand and then save the graphic. It will temporarily use your desktop pattern so you can see areas which will be transparent.

Scaling
The larger a graphic is, the longer it takes to load. Also, it may take up more of the page than you want it too. It is easy to scale it downwards proportionally with a graphic program. Scaling a graphic upwards (making it larger) is not recommended as you will lose quality.

Colours
Graphics that look fine on your Mac will probably look OK on other Macs. However, they may look awful on a Windows computer because of the different ways in which the two platforms handle dithering of colours. The easiest way to avoid problems is to draw the colours for your 8-bit non-photographic images from the 216 colours that Netscape Navigator does not dither at all in either Macintosh or Windows. Briefly, the non-dithering colours are the ones where the RGB values are drawn from 0 51 102 153 204 255, or the hexadecimal equivalents, 00 33 66 99 CC FF. For example, Red 51, Green 153 Blue 0 (339900) is a nice shade of medium green that will look great on either Macintosh or Windows platforms. (Bill Sveinson)

Converting TIFFs to GIFs or JPEGs
Most recent graphic programs allow you to save a TIFF file as a GIF file through the "Save As" command. However, unless you reduce the number of colours and change the graphic's resolution to 72 PPI before saving it as a GIF, you will end up with a large file which will take a long time to load. Also, any higher resolution is not necessary and would just be wasted as most monitors run at 72 PPI. (Note: PPI is "Pixels Per Inch", metric hasn't caught up to the computer industry yet.)

Reducing Colours and Bit-depth
Before converting to GIF or JPEG, you need to reduce the number of colours (usually) from the standard RGB mode (millions) to indexed colour (256 colours max) and they have a choice of 'bit' depths which can vary from 1 (B/W) to 8 (256 colours). The lower the bit depth, the smaller the file size and fewer colours available. For best results most of the time is it a good bet to use 8-bit with the system palette. Oddly enough the default macintosh system palette is almost a direct match to the 'netscape' safe colour palette that will display your colours on the web browser without 'dithering' the colour. There is an option for an adaptive colour palette, which is excellent for viewing GIFs on a computer monitor; however, due to the way browsers handle colours on a web page using the system palette is the best choice.

The other option is to save your graphic as a JPEG. JPEG is useful if you want to retain all of the colours in your image, and if you are dealing with an image that has a lot of colour gradients or changes. A good candidate for a JPEG is a photograph. Oddly enough, due to the way JPEG compresses the image, a full colour JPEG can have a smaller file size than the same image as a 256 colour gif. The main reason for this is the fact that JPEG actually throws out some data in the file when it compresses it - this is known as a 'lossy' compression method.

Simple rule of thumb to choose between gif and JPEG. If the image has a lot of area's of 'flat' colour, such as most logos and computer generated graphics choose gif and use the system palette, or dithered adaptive palette. If the image has a lot of gradients, is a photograph or some image of photo-realistic quality - use a JPEG and save it with low to medium quality. (Paul Evád)

TIP
My favourite application for simple modification of graphics on the Macintosh is "Graphic Converter". The latest version, 2.5, is impressive for a $35 (US) shareware program and is available easily on the Web. It will open and "save as" almost any graphic type possible, and allow you to change the resolution and the size, play with the colours including contrast and brightness, rotate, mirror, pick a transparent gif colour, add text, you can even create simple graphics with it and much, much more. I expect this application to go commercial before very long, it is that good!

Acknowledgements
This article was published in the October 1996 issue of the Victoria Macintosh Users Group's monthly newsletter "MACtalk" in Vicky's monthly article "VMUG On-Line" and in the Fall 1996 issue of the Web Enthusiasts Association of Victoria's quarterly on-line newsletter.

Vicky Vickers is the owner of Word Crunchers, Etc. which specializes in website design and HTML training. She is a past-president (1994-6) and former webmaster (1995-8) of Victoria Macintosh Users Group (VMUG). She also founded and was the first president (1996) of the Web Enthusiasts Association of Victoria (WEAV).

All rights reserved. For commercial purposes, no part of this page may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording, Internet, or any information storage and retrieval system, without the express permission in writing from the author.

Return to Library Index

Call me today at 250-595-6593 to discuss your website design
or e-mail me at vicky@crunchers.bc.ca

Vicky Vickers, Word Crunchers, Etc.
3290 Shelley Street, Victoria, BC, V8P 4A5
Fax: 250-595-7384 (call first)