introduction to images & graphics jma260. objectives images introduction photoshop
DESCRIPTION
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.TRANSCRIPT
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 and Vector Graphics
Bitmapped Graphics Image is modeled by an array of pixel
values. Rectangular (usually square) dots of color
Bitmapped Graphics and Vector Graphics
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.
Compression | Lossy & Lossless
Compression scheme (JPEG, GIF, PNG) Help reduce file size.
Compression | Lossy & Lossless
Lossy: Makes file size smaller Eliminates information Pixels you begin with not same pixels you
end up with. JPEG is a lossy compression scheme.
Compression | Lossy & Lossless
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 - Colors: 16File size : 17K
GIF - Colors: 2File size : 7K
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.