NWE Help: Graphics: Intro: Terms

NWE Home :: Help :: Graphics :: Intro

Like many other fields, graphics design has its share of specialized terms. The following list of definitions doesn't cover all the jargon you are likely to encounter when learning about web graphics, but it should provide you with the basics.

Anti-aliasing: A technique that tricks the eye into seeing a smooth edge between two colors by blending pixels of subtly varying shades. Often used to enhance the appearance of type on a computer screen.

The image on the left uses anti-aliasing to smooth out the edges of the type while the image on the right does not (note the jagged edges of the "X").

Animated GIF: A GIF composed of several individual image frames that run in sequence. You can save animated GIFs from the web and store them on your computer just as you would an ordinary GIF. In the NWE, you can create an animated GIF from a sequence of regular GIFs using gifsicle.

Banding: An effect that can occur when the number of colors in an image is reduced for Web optimization; instead of colors blending gradually into one another, one color appears after another in a series of stripes or bands.

Here are two versions of an image produced with a radial gradient fill. Dithering was used in the first image to make the colors in the gradient blend together. In the second image, which contains little dithering, you can see a lot of banding.

Bitmapped graphic: A computer image produced by "mapping" individual pixels on a matrix. Nearly all the images you see on the World Wide Web are bitmapped images.

Browser-safe colors: A set of 216 colors popularized by web designer Lynda Weinman that will appear consistently across a number of web browsers and computer operating systems. The NWE has a guide to browser-safe colors that provides additional information on working with colors on the web.

Cropping: Deleting all but a selected portion of an image.

Dithering: A "trick of the eye" that produces a specific color by grouping pixels of two or more colors together. While dithering can prove useful in smoothing out transitions between colors in web images, it can add unsightly speckling to large areas that are supposed to be a single color.

The image on the left relies on dithering to simulate colors outside the 216-color browser-safe palette while the image on the right uses colors within the browser-safe palette.

GIF: (Pronounced "jif"). Acronym for Graphical Interchange Format, an image format developed in 1987 by CompuServ Corp. GIF images are limited to 8 bits in depth, the equivalent of 256 basic colors, and are a popular choice for simple drawings and art text.

Gradient: A series of colors that follow a predetermined pattern.

Halo effect: The presence of a "halo" of leftover background color in a transparent GIF.

When the background of the image on the left is rendered transparent, the result is a halo effect.

Hexadecimal code: The six-figure code that corresponds to the values of red, green, and blue in a color shown on a computer monitor. The first two figures correspond to the red value, the second to the green, and the third to the blue. The NWE guide to browser-safe colors provides several examples of hexadecimal codes. The hexadecimal page provides and overview of how hexidecimal works.

JPEG: (Pronounced "jay-peg"). Acronym for Joint Photographic Experts Group, the most popular 24-bit image format for the Web. JPEG's 24-bit color depth means that it can store information to produce millions of colors, which makes it the best format for photographs and other images with complex color variations.

Marquee: A rectangular selection tool that can be dragged across an image using the mouse. Used to select a portion of an image for cropping or applying special effects.

MNG: (Pronounced "ming"). Acronym for Multiple-image Network Graphics, an animation format currently under development.

Pixel: A shortened form of picture element, one of the thousands of tiny dots of light and color that make up the picture on a computer monitor.

Pixelation: The appearance of blockiness in an image after it has been enlarged. What had been a single pixel in the original image becomes a single-colored block in the enlarged version.

The image on the left looks fairly smooth, but the enlarged version on the right shows pixelization.

PNG: (Pronounced "ping"). Acronymn for Portable Network Graphics, a fairly new graphics format designed as an alternative to the ubiquitous GIF format. While the version of Netscape currently running in the NWE (4.07) doesn't offer full support for the PNG format, a newly released trial version of Netscape 6.0 does. Future releases of Internet Explorer promise to fully accommodate PNG graphics as well. The PNG format is expected to increase in popularity and soon join GIF and JPEG as one of the universally accepted formats for web graphics.

PPI: An acronym for pixels per inch, ppi describes the resolution of an image on a computer screen. The standard web image is about 75 ppi. Technically, ppi is different from dpi, or dots per inch, which measures the sharpness of a printer's output, but many people--even computer experts--use the two terms interchangeably.

Raster graphic: Another name for bitmapped graphic, a raster graphic defines shapes and colors by assigning each pixel in a matrix numerical values for color and light. GIFs, JPEGs, and PNGs are raster graphics.

Resolution: According to the Tech Encyclopedia, resolution is "the degree of sharpness of a displayed or printed character or image." The resolution of a computer monitor is expressed as the number of horizontal pixels by the number of vertical pixels (example: 800 x 600). The resolution of a computer image is expressed in ppi, or the number of pixels per inch of computer screen. The resolution of a printer or scanner is expressed as the number of dots per inch (dpi).

Rollover: A web effect that replaces one image with another when a mouse passes over the original image. Rollovers usually are produced using JavaScript.

Serif: A small decorative line perpendicular to a primary stroke of a letter or numeral. Serif type contains serifs; sans-serif type does not.

The image on the left shows an example of serif type with a serif circled in red. Times New Roman is a popular serif type, and Helvetica is a popular sans-serif type.

Vector graphic: A computer image consisting of a variety of points, lines, rectangles, and other geometric shapes of different colors. Popular drawing programs such as Adobe Illustrator, Corel Draw, and Macromedia Freehand create vector graphics.