 Scanned or digitally captured image  Image created on computer using graphics software

 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

 Issues to consider  Type of Image  Intended Usage  Open standard or proprietary format  TIFF & EPS  GIF, JPEG, PNG

 TIFF(Tagged ImageFile Format) – raster only  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.

EPS (Encapsulted PostScript Files)  EPS is a vector file format. (can hold raster data) The EPS “package” contains the PostScript information (the page description language that defines desktop publishing) that the file needs for printing, and QuickDraw/Preview information (rasterized (TIFF or PICT) preview) that the computer uses for display of images on screen.  Originally the native format of Illustrator  Since EPS files are written in PostScript, they should work with every PostScript device and most layout, illustration, and paint programs.  EPS files are mostly exported from a graphics program (Illustrator/Photoshop) and placed in a layout program.

PSD AI  Adobe’s proprietary file formats for Photoshop & Illustrator PDF (Portable Document Format)  Not really a graphic file format  Designed to contain entire pages (graphics, type, vector shapes, layout)  Electronic equivalent of your printed documents  Incorporates fine detail and quality of print publications with the interactivity of electronic publications

Common Web File Formats  GIF Graphics Interchange Format  JPEG Joint Photographic Experts Group  PNG Portable Network Graphic  SVG Scalable Vector Graphic

 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

 The quantity and distribution of pixels 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.

 Pixel dimension (ppi??) (web)  # of pixel elements of image  800pX 600p  Dots per Inch (dpi) - Resolution  “dots” of ink per inch when a digital image is printed  Resolution often referred to in dpi (distribution of pixels in an image)  300 dpi image  5X7 image at 300dpi resolution = pixel dimensions of 1500X2100

 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. (resolution/bit depth)  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) (resolution determines how large we can print or display our image and still have it be sharp)

 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

 Higher resolution & Higher bit-depth images...  Have a larger file size  Contain more pixels  can reproduce more detail & subtle color transitions

MegapixelsResolution 8MP3264x2448 9MP3464x MP3648x MP4000x3000

 Images for digital display typically have a lower resolution (72 ppi) – pixel dimension  Image pixels map one-to-one with the display resolution of a monitor  Monitor resolution varies by platform and user configuration  Monitor resolutions  play.asp play.asp X

 High resolution graphics – not needed online. They just appear larger on screen and take up more file size and bandwidth.

7945a.html

 Intended use of the graphic will determine  Type of file  Tool used to create it  File format needed

BITMAP IMAGES CONTAIN A FIXED # OF PIXELS! Good Ducky! Bad Ducky!

 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

The Claremont Colleges Digital Library Scanning Best Practices

 To produce good quality images we must…  understand image dimension & resolution  Create or edit the image size to be suitable for our intended use  Start with a good source file (digital image/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.

Resources  Adobe Web Tech Curriculum Lesson 5.1: Graphics Basics print.htm print.htm  Scanning Tips by Wayne Fulton  Claremont Colleges Digital Library Scanning Best Practices  Scalable Vector Graphics