Introduction to Images & Graphics JMA260. Objectives Images introduction Photoshop.

Introduction to Images & Graphics

JMA260

ObjectivesImages introductionPhotoshop

Bitmapped Graphics and Vector Graphics

Bitmapped Graphics Image is modeled by an array of pixel values. Rectangular (usually square) dots of color

Vector Graphics Image is stored as a mathematical description

of a collection of individual lines, curves and shapes making up the image.


Bitmapped Graphics Image is modeled by an array of pixel

values. Rectangular (usually square) dots of color


Vector Graphics Image stored as a mathematical

description of a collection of individual lines, curves and shapes making up the image.

Vector Vector

The difference between Bitmapped Graphics and Vector Graphics

Vector Graphics

1. Generally smaller in file size.2. Can be changed easily

without losing quality.3. Size is affected by objects.4. Vector to Bitmap image

conversion is simple.5. Illustrator

Bitmapped Graphics

1. Generally larger in file size.2. Can represent a full range

of images accurately.3. Size affected by dimensions

of image.4. Bitmap to Vector conversion

is difficult.5. Photoshop

Graphic Quality and File Size

Bitmap Graphics: Resizing requires a way to make the

pixels larger Bitmaps do not scale well Quality is worse when resized File size becomes larger

Graphic Quality and File Size

Vector Graphics: Because they are based on a

mathematical equation, they scale well

Quality remains the same File size remains the same

File Format Examples 2

Bitmapped good for reproducing subtle gradations of colorPhotographsCan have jagged edges

Vector good for producing crisp outlines, such as in logos and illustrationsCan be printed or displayed at any resolution without losing detail

Common File Formats (Bitmap)

• PSD – Photoshop• TIFF—Tag Image File Format

For Web

• GIF—Graphic Interchange Format• JPEG—Joint Photographic Experts Group• PNG—Portable Network Graphic

Compression | Lossy & Lossless

Compression scheme (JPEG, GIF, PNG) Help reduce file size.


Lossy: Makes file size smaller Eliminates information Pixels you begin with not same pixels you

end up with. JPEG is a lossy compression scheme.


Lossless compression allows exact original data to be reconstructed from compressed data.

PNG and Gif are Lossless compression schemes.

Characteristics of Formats

GIF Lossless, 256 colors, transparency

JPEG Lossy (variable quality), millions of colors

PNG Lossless, variable number of colors, W3C

standard

JPEG - Quality: HighFile size : 19K

JPEG - Quality: LowFile size : 8K

Background removedNo Transparency

GIF - Colors: 256File size : 44K



GIF Lossless, 256 colors, transparency

JPEG Lossy (variable quality), millions of colors

PNG Lossless, variable number of colors,

transparency

File Formats

Tips: Working with images

Save master copy of your file as .psd.

From the master, save optimized images as jpeg, gif, or png.

If image is to be viewed on a computer screen – resolution is 72 dpi.

Tips: Working with images

For web images always use the Save for Web command.

Always resize images with Photoshop or some other imaging program - do not resize with width and height HTML tags.

Introduction to Images & Graphics JMA260. Objectives Images introduction Photoshop.

Documents

Transcript of Introduction to Images & Graphics JMA260. Objectives Images introduction Photoshop.