Using Graphics Effectively

Your graphics are an important part of your layout design. Pages with nothing but text are boring and uninviting. Graphics pull the user in.

The are two different types of graphic images: bit mapped and vector. You need a separate editor for each of these types.

In a bit-mapped image, the image is represented by thousands of pixels. A scanner, for example, scans a photograph and sends the pixel image of the photograph to the bit mapped editor you are using, such as Adobe Photoshop(TM). You can then edit the pixels adding a wide variety of effects.

With a vector graphic, the image is represented as a collection of objects. There may be hundreds or even thousands of objects in the image. You can select any object and edit the object, or you can add or delete objects. A circle, for example, is represented by defining its center point, radius, outline thickness, outline color, and fill color of the circle. Other typical objects include rectangles, lines, and polygons. Vector objects need to be edited by a vector graphic editing program, such as Adobe Illustrator or Corel Draw.

Let's look at the difference between the two graphic image formats:

Bit-Mapped Images	Vector Images
Image stored as pixel definitions	Image stored as collection of objects with object definitions
Generally large files	Generally small files
Resizing image generally causes lost of resolution	Resizing image causes no loss of image quallity
Pixel drawing tools	Object drawing tools for lines, rectangles, circles, polygons
Edit pixels or groups of pixels	Edit objects
Bit-mapped file formats include BMP. GIF, TIF, PSD, and JPG	Vector Graphic file formats include AI, CDR
Uses bit-mapped editor, as Adobe Photoshop(TM)	Uses vector-graphic editor, such as CorelDraw(TM) or Adobe Illustrator(TM)
Best for photographs and scans	Best for clipart in vector format.

Here are summaries of the bit-mapped file formats used on the web:

GIF	Colors are reduced to only 256 (lossy in this sense)
	Compressed, but generally larger than JPG or PNG
	GIF89a supports transparency of a single color
	Cross-platform support
	Best for clipart, drawings
JPEG (JPG)	16.7M Color support
	Lossy
	Variable control of loss and file size
	Small file size
	Best for photographs
PGN	16.7M colors
	Smaller than GIFs
	Not supported well at present
	Lossless

GIF Clipart, 2.4K	GIF photo, 15K (256 Colors only)
JPG Clipart, 13K	JPG Photo, 14K (16.7M Colors)

Notice the photo is highter quality as a JPG, while the clipart is a small file and has great quality as a GIF.

Tips for using graphics:

• To use vector graphic images on web pages use one of these methods:
  • Resize as necessary, then convert to bitmaps by pasting it into a bit-map editor, such as Photoshop.
  • Or use vector graphic web tools as Adobe's LiveMotion(TM) or Flash(TM) to import the vector graphic, convert it to a symbol, and save it as a Flash SWF. You will only have a single frame in your Flash file. You could, however, make the graphic as a button with a link.
• Specify the size of the graphic using WIDTH= and HEIGHT= in the tag. This insures the text for the page loads first (leaving room for the graphic), after which the graphic loads.
• Keep graphic files small unless your client has broadband. In general use JPG for photos, GIFs for clipart..
• Keep the number of colors in a GIF file as small as possible, specifying the number of colors when saving it to minimize file size.
• If you want the user to see detail or a larger image, use a link from a thumbnail so they can click on the thumbnail to get the larger image.
• You can also import a photo JPG to FLASH, convert it to a symbol, and then make it a button. Then save the single-frame symbol as a small SWF.
• Honor the copyrights of the images you use, both clipart and photos. Get permission or pay royalities for the images you use. Just because it is easy to download an image from someone's page doesn't mean you have a legal right to use it.

All Rights Reserved
© 2004, Oregon Professional Microsystems
Portland Web Site Design, Search Engine Optimization, and Web Site Hosting
(503) 697-4773