1. Digital Images

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

3. Vector Graphics

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

5. Bitmap (raster) Graphics

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

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

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

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

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

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

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

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

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

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

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

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

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

21. File Size Megapixels Resolution 8MP 3264x2448 9MP 3464x2600 10MP

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

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

24. Resolution

25. Resolution

26. Resolution

27. Resolution

28. Points to remember…

29. Points to remember… Intended use of the graphic will determine
Type of file
Tool used to create it
File format needed

30. BITMAP IMAGES CONTAIN A FIXED # OF PIXELS!
Points to remember - resolution
BITMAP IMAGES CONTAIN A FIXED # OF PIXELS!
Good Ducky!
Bad Ducky!

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

32. The Claremont Colleges Digital Library Scanning Best Practices

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

34. Image Editing

35. Image Editing

36. Image Editing

37. Image Editing

38. Image Editing

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