Object-oriented graphics Made-up of vectors Resolution independent – can be scaled to any size without losing any detail Used primarily for hard-edged graphics such as drawings, logos, charts, illustrations, and type Adobe Illustrator, Macromedia Freehand, Corel Draw
Made-up of pixels – each pixel (picture element) is assigned a specific location and color value Resolution Dependant – contain a FIXED number of pixels (size of image is based on the image resolution) Can represent subtle gradations of color - used primarily for continuous-tone images such as photographs Adobe Photoshop, Paintshop Pro, Painter
Graphic File Formats Issues to consider Type of Image Intended Usage Open standard or proprietary format TIFF & EPS GIF, JPEG and PNG
Graphic File Formats TIFF(Tagged ImageFile Format) This format is a good way to save scanned images. (Long-term archival storage) It is a platform-independent file format. TIFF is strictly used for bitmap data. The TIFF format allows for changes in contrast, density, and color to be made easily. TIFFs support virtually all color spaces and support a large number of compression algorithms. (can remain uncompressed) A TIFF file can be any resolution you choose. The main drawback to saving a file in TIFF format is that, because of the large amount of information saved, the file size may be quite large.
Graphic File Formats EPS (Encapsulted PostScript Files) EPS files are actually two files in one. EPS files contain the PostScript information (the printer language that defines desktop publishing) that the file needs for printing, and QuickDraw information (a preview format such as PICT, TIFF, WMF) that the computer uses for display of images on screen. Since EPS files are written in PostScript, they should work with every PostScript device and most layout, illustration, and paint programs.
Graphic File Formats Common Web File Formats GIF Graphics Interchange Format JPEG Joint Photographic Experts Group PNG Portable Network Graphic
What’s your output device? We prepare images based on our intended use Output device Images for PRINT Should have a higher resolution Usually in CMYK color mode Images for DIGITAL DISPLAY Usually have a lower resolution Use RGB color mode
What is Resolution? The number of PIXELS PER INCH (ppi) in an image PIXEL An abbreviation for picture element. The smallest element of a bitmap image Monitors and printers use a fine grid of pixels to display images Each pixel can be turned on or off and assigned a color.
PPI vs DPI Pixels per Inch Pixel dimension of a digital image # of pixel elements per inch 800p X 600p Dots per Inch “dots” of ink per inch when a digital image is printed Resolution often referred to in dpi 300 dpi image
Resolution… When we create or scan a digital image we are capturing pixel information Scanners record the color value and brightness of each area of an image when scanned. WE decide how much pixel information to capture by setting the resolution as we scan. The resolution or image dimension determines what we can do with the image (print/video)
File Size Higher resolution & Higher bit-depth images... Have a larger file size Contain more pixels can reproduce more detail & subtle color transitions
Bit Depth The number of bits used to represent the colors of each pixel in an image. The greater the bit depth means more bits of information per pixel. Black & white: 1-bit one bit to describe each pixel – black & white (on/off) (lineart) Grayscale: 8-bit 256 possible colors (Ex: 256 shades of gray in a grayscale image) Full Color: 24-bit millions of colors (full color, truecolor) Three 8-bit channels: 256X256X256 = 16 million color combinations Represents a significant portion of the range of colors visible to the human eye 32-bit = CMYK images or RGB images with a 4 th Alpha channel 48-bit = generally highest bit-depth available Three 16-bit channels Most software and hardware not able to display this much data
The Claremont Colleges Digital Library Scanning Best Practices http://ccdl.libraries.claremont.edu/inside/CCDLScanningBestPractices.pdf
Resolution… Images for digital display typically have a lower resolution (72 ppi) Image pixels map one-to-one with the display resolution of a monitor Monitor resolution varies by platform and user configuration Monitor resolutions http://www.thecounter.com/stats/2006/Septemb er/res.phphttp://www.thecounter.com/stats/2006/Septemb er/res.php
Resolution… High resolution graphics – not needed online. They just appear larger on screen and take up more file size and bandwidth.
Points to Remember BITMAP IMAGES CONTAIN A FIXED # OF PIXELS! Good Ducky! Bad Ducky!
Points to Remember To produce good quality images… must understand image dimension & resolution. Create or edit the image size to be suitable for our intended use. Start with a good scan. If you plan to edit or scale the image in any way, start with a higher resolution image and optimize and compress image for web after all edits are complete.
Points to Remember Create Archival Master Scanned at highest level possible - appropriate for your environment Save in uncompressed file format Create all derivative files from the archival master Back-up Archival Master
Resources Adobe Web Tech Curriculum Lesson 5.1: Graphics Basics http://www.adobe.com/education/instruction/webtech/C S2/unit_graphics1/gb_print.htm http://www.adobe.com/education/instruction/webtech/C S2/unit_graphics1/gb_print.htm Scanning Tips by Wayne Fulton http://www.scantips.com/ http://www.scantips.com/ Claremont Colleges Digital Library Scanning Best Practices http://ccdl.libraries.claremont.edu/inside/CCDLScanning BestPractices.pdf http://ccdl.libraries.claremont.edu/inside/CCDLScanning BestPractices.pdf