Graphics Page 1

When we talk about graphics, there are two basic types that we are interested in on the Web:

Vector Graphics

• A Vector Graphic is an image that is generated from mathematical descriptions.  These descriptions determine the image's height, position, and the direction of the lines.  The image is actually a collection of lines, not as a pattern of dots (pixels).
• Program:  Corel Draw
• File Formats:  .cdr, .cmx, .wmf, .dxf, .dwg
• Uses:  Original art, Logos, Animations, Drafting, and Advertising

• A Raster Graphic is an image that has been changed or rendered in dots or pixels, not lines.  This happens when a vector graphic is converted to a bitmap (.bmp).
• Example:  Pictures
• Program:  Corel Photo Paint
• File Formats:  .jpg, .gif, .png, .tif, .bmp
• Uses:  Original Art, Logos, Photography, Web Pages, and Advertising

File Format Definitions

• .jpg - A standard format which allows the transfer of files between multiple platforms.  Compresses images, supports 8-bit grayscale and up to 32-bit CMYK color depths.  Primarily for more than 256 colors.  Developed by the Joint Photographic Experts Group.
• .gif (still) - A bitmap-based format designed for use on the Web.  Compresses images to maximize file transfer time, supports images with 256 or fewer colors.  Developed by CompuServe and dubbed the Graphic Interchange Format.
• .gif (motion) - A gif format with the ability to store multiple bitmap files in one.  When displayed in rapid succession, this is an "animated" gif.
• .png - Designed to work well with online viewing applications such as the Web.  Compresses images with little or no loss and very portable.  A viable replacement for .gif formats.  Fully streamable with a progressive display option.  Allows 256 or fewer colors, transparent backgrounds, image interlacing, image maps, and animation.  Stands for Portable Network Graphics.
• .bmp - Traditionally the standard for displaying raster or paint images in Windows.  Images are not "smooth" and can appear jagged.  Uncompressed.
• .tif - Designed as a standard that all graphics programs can open or read.  Supports siz encoding routines and 3 different image mmodes:  B&W, grayscale, and color.  Depending on compression, .tif supports multiple bits/pixel formats and can save RGB, CMYK, and Lab color information but not duotones.  In long form, called Tagged Image Format.

Hints when Designing Graphics for the Web

• Always use Contrasting Colors for the Background and Text.
• Consider all component colors when designing your buttons, banners, bars, text, and backgrounds.
• Use "fat" or thick fonts.
• Create something that is "easy on the eyes".
• Remember ~ Communication is the key!  Don't make your audience try to decipher what you're telling them.
• Screen Resolution
• Design graphics for the lowest screen resolution out there.  The standard is traditionally 600w x 480h.
• In addition to screen size, shoot for the standard dots per inch (dpi).  Most screens are only at about 96 dpi.
• Center all banners so they are centered in all resolutions.
• When compressing .jpg files, compress pictures with about 25% and converted vectors with 35%.