1. Introduction to Images & Graphics JMA260

2. Objectives Images introduction Photoshop

3. 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.

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

5. 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

6. 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

7. 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

9. 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

11. File Format Examples 2 Bitmapped good for reproducing subtle gradations of color Photographs Can have jagged edges Vector good for producing crisp outlines, such as in logos and illustrations Can be printed or displayed at any resolution without losing detail

12. 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

13. Compression | Lossy & Lossless Compression scheme (JPEG, GIF, PNG) Help reduce file size.

14. Compression | Lossy & Lossless Compression scheme (JPEG, GIF, PNG) Help reduce file size.

15. 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.

16. Compression | Lossy & Lossless Lossless compression allows exact original data to be reconstructed from compressed data. PNG and Gif are Lossless compression schemes.

17. Characteristics of Formats GIF Lossless, 256 colors, transparency JPEG Lossy (variable quality), millions of colors PNG Lossless, variable number of colors, W3C standard

18. JPEG - Quality: High File size : 19K JPEG - Quality: Low File size : 8K Background removed No Transparency

19. GIF - Colors: 256 File size : 44K GIF - Colors: 16 File size : 17K GIF - Colors: 2 File size : 7K

20. GIF Lossless, 256 colors, transparency JPEG Lossy (variable quality), millions of colors PNG Lossless, variable number of colors, transparency File Formats

21. 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.

22. 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.