1. ImageEditing
Understanding Image Resolution

2. Graphics Programs
Photoshop vs
Illustrator

3. Graphics Vector Graphics Bitmap (Raster) Graphics
Resolution independent – can be scaled to any size without losing any detail
Object-oriented graphics
Made-up of vectors
Bitmap (Raster) Graphics
Resolution Dependant – contain a FIXED number of pixels (size of image is based on the image resolution)
Made-up of pixels – each pixel (picture element) is assigned a specific location and color value

4. Bitmap (Raster) Graphics

6. Bitmap (raster) Graphics
Fixed # of Pixels
# of pixels (resolution) is determined when the image is digitized
PIXEL - describe an image and establish the details
PIXEL - The smallest element of a bitmap image
When we create or scan a digital image we are capturing pixel information
WE decide how much pixel information to capture by setting the resolution as we scan, make, digitize an image.
Scanners record the color value and brightness of each area of an image when scanned.
The resolution or image dimension determines what we can do with the image (print/video)

7. What’s your output device?
We prepare images based on our intended use
The bigger the picture you want to print/display the more pixels you will need
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

8. Image Resolution Pixel Dimension (web) Dots per Inch (print)
Pixel Dimension and Physical Output Size (DPI)
Pixel Dimension (web)
# of pixel elements that make up the image
800 X 600
Dots per Inch (print)
“dots” of ink per inch when a digital image is printed
Resolution often referred to in dpi
300 dpi image
5X7 image at 300dpi resolution = pixel dimensions of 1500X2100

9. File Size File size is proportional to an image’s pixel dimension
Produce more detail
Require more disk space
Find compromise between image quality and file size
File format affects file size
Various compression methods

10. Resolution for digital display…
Images for digital display typically have a lower resolution
Monitor resolutions
Image pixels map one-to-one with the display resolution of a monitor
Monitor resolution varies by platform and user configuration

11. Monitor Resolution… 620 X 400 ppi image
Adobe Photoshop CS5 Product Support: About monitor resolution

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

13. Resolution for Print… Fixed # of Pixels - resizing affects quality
Images for print need more pixel information (higher resolution)
100%
1.5 – 2 X line screen
Examples
High quality print – 300lpi (600dpi)
Standard Magazine – 133lpi (300dpi)
Newspaper – 85lpi (150dpi)
Fixed # of Pixels - resizing affects quality

14. Resampling Resampling: changing the amount of image data
Downsample: decrease the # of pixels
Resample Up: (upsample)increase the # of pixels
Interpolation: method used to determine how pixels are added

15. Image Size Original dimensions and resolution
Decreasing the resolution without changing pixel dimensions (no resampling)
Decreasing the resolution at the same document size decreases pixel dimensions (resampling)
Adobe Photoshop CS5 Product Support: About monitor resolution

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

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

18. Image Editing

19. Image Editing

20. Image Editing

21. Image Editing

22. Image Editing

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