Digital Images

Vector Bitmap (raster) Digital Images Scanned or digitally captured image Created using graphics software Vector Bitmap (raster)

Vector Graphics

Vector Graphics 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, Sketch, SVG-Edit, Inkscape, Corel Draw

Bitmap (raster) Graphics

Bitmap (raster) Graphics 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, Affinity Photo, Gimp, Corel Photo-Paint, Pixlr

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

Graphic File Formats 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.

Graphic File Formats 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 often exported from a graphics program (Illustrator/Photoshop) and placed in a layout program.

Graphic File Formats PSD AI PDF (Portable Document Format) Adobe’s proprietary file formats for Photoshop & Illustrator PDF (Portable Document Format) Shares similar characteristics of vector 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

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

What’s your output device? We prepare images based on our intended use Output device Images for PRINT Higher resolution CMYK color mode Images for DIGITAL DISPLAY Often have a lower resolution RGB color mode

What is Resolution? The quantity and distribution of pixels in an image

Pixel Dimension vs dpi 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

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

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 4th Alpha channel 48-bit Three 16-bit channels Most software and hardware not able to display this much data

Bit Depth 1 bit (2 colors) 2 bit (4 colors) 4 bit (16 colors) 24 bit (16 mill)

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

File Size Megapixels Resolution 8MP 3264x2448 9MP 3464x2600 10MP http://au.news.yahoo.com/technology/photography/article/-/7364542/what-is-a-megapixel/

Resolution Images for digital display typically have a lower resolution – 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 http://www.w3schools.com/browsers/browsers_display.asp

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

Resolution http://help.adobe.com/en_US/photoshop/cs/using/WSfd1234e1c4b69f30ea53e41001031ab64-7945a.html

Resolution

Resolution https://blogs.msdn.microsoft.com/b8/2012/03/21/scaling-to-different-screens/

Resolution

Points to remember…

Points to remember… 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! Points to remember - resolution BITMAP IMAGES CONTAIN A FIXED # OF PIXELS! Good Ducky! Bad Ducky!

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

The Claremont Colleges Digital Library Scanning Best Practices http://ccdl.libraries.claremont.edu/inside/CCDLScanningBestPractices.pdf

Points to remember… 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.

Image Editing

Image Editing

Image Editing

Image Editing

Image Editing

Resources Adobe Web Tech Curriculum Lesson 5.1: Graphics Basics http://www.adobe.com/education/instruction/webtech/CS2/unit_graphics1/gb_ print.htm Scanning Tips by Wayne Fulton http://www.scantips.com/ Claremont Colleges Digital Library Scanning Best Practices http://ccdl.libraries.claremont.edu/inside/CCDLScanningBestPractices.pdf Scalable Vector Graphics http://www.adobe.com/svg/viewer/install/main.html http://www.w3.org/TR/SVG/intro.html