Tip of the Month-December, 2000, Page 2

dan@proofofconcepts.com

Home

Contents

Index

Graphics 1

Phrames

Activity

You Don't Say!!
Tip of the Month

December, 2000

Raster vs Vector Graphics

A short discussion concerning these two types of graphics will provide you with a better understanding of graphics in general. Vector graphics are designed with programs such as Marcomedia’s Flash or Adobe’s LiveMotion. These programs use mathematical formulas to produce the image. Programs such as Adobe’s PhotoShop or Corel Photo-Paint are Raster graphic programs.

Raster Graphic: Normal

Vector programs are an excellent choice if the graphic to be designed will have many curves. These are programs that allow the developer to draw images and shapes that have handles on them. Because these shapes and images are based upon mathematical formulas, enlarging a vector graphic will exhibit no degradation of the image as one created in a raster program.

A raster image (most of those on the Web today), commonly known as a bitmapped image, can be edited pixel by pixel. However, a raster image will become pixelated as it is enlarged, a vector graphic will not.

Animation, video, & audio like other graphics for the web, must be relevant to the topic. Few things on the web are more annoying than forcing a visitor/student to open a page with a gratuitous animation, video, or music which has no relevance to the topic.

Raster Graphic: Enlarged showing pixelation

If using animation/video/audio, make sure your students do not open a page without a warning that the page contains an animation. Because of bandwidth and slow download times students will get frustrated and leave the site if they are sent to this type of page without a warning. All animations/videos/ audios should be accessed, with a warning,, as a link to open in a new window.

To learn more in depth about this topic, there are a number of excellent references available. Realize that the type of graphics used, have a tremendous impact upon the speed at which your pages load and the impression they leave with your students. I have come across a number of sites in which the image had absolutely nothing to do with the instruction.

One other point of interest when dealing with graphics-scan and save original graphics at a minimum of 300 ppi resolution and scale down to 72 ppi for use on the Web. Very little loss in resolution will occur. The higher resolution can always be used in a different application, such as print medium. Scanning the original image at 72 ppi and then changing the resolution to 300 ppi for use in a print medium doesn't work well-the image will pixelate at the higher resolution. The following images will illustrate this point; the 72 ppi image was scanned at 72 ppi then changed to 300 ppi; the 300 ppi scanned image was changed to 72 ppi. Each of the following images are the same pixel length and width (230 ppi x 135 ppi), except the 72 ppi which is sized 199 ppi x 135 ppi. The difference is quite pronounced between image #2 and image #4.

These images open into a new window.