BITMAP & VECTOR GRAPHICS

Art 100

. . . . . . . . .Fundamentals of Graphic Design

All digital graphics done on the computer “think” in one of two major categories known as Bitmap and Vector.

BITMAP & VECTOR GRAPHICS

There are two main categories of computer imaging, as shown here:

- Vector - Bitmap

BITMAP & VECTOR GRAPHICS

Vector Text: Smooth when magnified.

Bitmap Text: Jagged when magnified.

BITMAP GRAPHICSIn bitmap graphics, identical square units, known as pixels, use a network of tiles to build up an entire image. In this example, a magnified image reveals the tile structure.

BITMAP GRAPHICSIn this photograph, the bitmap black/white image differs greatly from the life-like close-up of the hand. The network of tiles which make up the black/white image are clearly shown.

BITMAP GRAPHICSBitmap images are “resolution-dependent”, which means a fixed number of pixels per inch (ppi/dpi) influence image quality.

- The more pixels, the more detailed the image. - The fewer pixels, the less detailed the

image.

BITMAP RESOLUTIONResolution - Number of dots or pixels per inch.

- Dpi - Dots per inch - Print resolution. - Ppi - Pixels per inch - Screen resolution.

72 ppi - Standard Web/screen resolution.

300 dpi - Standard print resolution.

BITMAP GRAPHICS

In this example of bitmap graphics, the image resolution in the top row, with fewer pixels per inch, shows a lower quality than in the bottom row, where there are more pixels per inch.

BITMAP GRAPHICS

Bitmap images are also known as “raster.” Photoshop is a bitmap/raster imaging program.

BITMAP GRAPHICS

In bitmap graphics, each pixel can be independently modified.

BITMAP GRAPHICS

Photoshop filters take advantage of individual pixel changes.

BITMAP GRAPHICS

Changes affect different parts of an image as needed.

BITMAP GRAPHICS

Each pixel interacts easily with pixels on other layers.

BITMAP GRAPHICSBit depth specifies how much color information is available for each pixel in an image. The more bits, the more available colors.

Bit depth of 1Two possible values: black/white.

Grayscale/Bit depth of 8256 possible gray values.

RGB/Bit depth of 8 in 3 Channels

256 possible Red/Green/Blue values; 16 million possible colors.

BITMAP FILE FORMATSMost commonly used bitmap file formats are:

- PSD - Native Photoshop file format: “PhotoShop Document.”

- TIFF - For bitmap and fine detail.- PDF - For online viewing:

“Portable Document Format.”- JPG - For photographic images.

BITMAP GRAPHICSBitmap images often require large amounts of storage space, so are often compressed to keep file sizes down.

VECTOR GRAPHICS Vector graphics - Made of lines and curves defined by mathematical objects called vectors.

- Can be freely resized or magnified without losing sharpness, because vector graphics are resolution-independent.

VECTOR GRAPHICSVector graphics are resolution-independent because the number of pixels used to show a vector graphic is determined by computer- screen display or printer resolution, not by the graphic itself.

- This is because avector graphic is notconverted to pixelsuntil it is displayed

or printed.

VECTOR GRAPHICSVector graphics often include shapes that are:

- Geometric.

- Flat.

- Hard-edged.

VECTOR GRAPHICS

Vector formats are ideal for logo creation.

VECTOR FILE FORMATSMost commonly used vector file formats are:

- EPS - For vector graphics. - GIF - For vector & flat shapes.- PDF - For online viewing.

PRINT GRAPHICSFile Formats for Print Output:

- TIFF - For bitmap & fine detail.

- EPS - For vector prints.

- PDF - For digital mastering.

WEB GRAPHICSFile Formats for Web Output:

- GIF - For vector & flat shapes.

- JPG - For photographic images.

- PDF - Viewable without software.

BITMAP & VECTOR GRAPHICSTo create 3D images, polygon shapes derived from vector graphics create a wireframe structure to which a bitmap “skin” is applied.