1. Digital Photo editing with Photoshop

2. Overview Photoshop Basics Web Graphics What is Photoshop? Uses Tour
Graphic Limitations
Display Considerations
Cross-Platform/Browser-Safe Palette
File Formats
Transparent Text
Saving for the Web

3. Overview Continued Scanning Scanning Concepts Evaluating Originals
Scanning Line Art vs. Photographic Images
Scanning Strategies
Photoshop Measurement/Correction Tools
Additional Resources

4. What is Photoshop? Photo retouching, image editing, and color
painting program; graphic design tool
Create high-quality digital images
Tools & special effects capabilities
Manipulate scanned images, slides, & original artwork
Isolate parts of an image for experimentation & individual editing
And lots more…..

5. Uses of Photoshop Art (line drawings, charcoal, color original)
Photographic
Restoration
WWW (GIFS, JPEGS, etc.)
Montage
Halftones, Duotones, Tritones, Quadtones
Color Separations
Posterizations
Special Effects

6. Touring Photoshop Using Help
Navigating: Windows, Palettes, Features & Tools
Preferences

7. Graphic Limitations Connection Speeds User Configurations
Web both opportunities and limitations
Can avoid limitations by taking into consideration:
Connection Speeds
Main problem currently
Important:
Create graphics with smallest file size possible
Yet maintaining desired quality
User Configurations
Not exclusive to the web
Multitude of different user configurations
Must decide what the minimum system is you are going to
support

8. Display Considerations
Web browser takes up screen real estate
This limits available space somewhat
Screen Size-Guidelines
Most 14-inch monitors
570 x 400 browser window
640 x 480 display
Most 15-inch monitors
730 x 520 browser window
800 x 600 display
Colors
Many computers still operate with only 256 colors
Image/Graphic may have more colors
Problem: Computer won’t support image/graphic
Browser dithers colors to find closest match
This could change what original image looked like/ugly
To avoid dithering, use 256 color mode
Dithering – mixes pixels of available colors in color table to simulate missing
colors
Even 256 colors not considered “web-safe”
Web-safe/Color-safe palette
Mac vs. PC use slightly different color systems
Reality: cross-platform, browser-safe palette only has 216 colors
Show this
Flowers > Image > Duplicate > Repeat making 2nd Duplicate > Image > Mode > Indexed Color > Choose either Mac or Windows Palette> 256 colors > choose Web palette > 216 colors
Display Considerations
Screen Sizes
Colors

9. Cross Platform/Browser-Safe Colors
Web browser takes up screen real estate
This limits available space somewhat
Screen Size-Guidelines
Most 14-inch monitors
570 x 400 browser window
640 x 480 display
Most 15-inch monitors
730 x 520 browser window
800 x 600 display
Colors
Many computers still operate with only 256 colors
Image/Graphic may have more colors
Problem: Computer won’t support image/graphic
Browser dithers colors to find closest match
This could change what original image looked like/ugly
To avoid dithering, use 256 color mode
Dithering – mixes pixels of available colors in color table to simulate missing
colors
Even 256 colors not considered “web-safe”
Web-safe/Color-safe palette
Mac vs. PC use slightly different color systems
Reality: cross-platform, browser-safe palette only has 216 colors
Show this
Flowers > Image > Duplicate > Repeat making 2nd Duplicate > Image > Mode > Indexed Color > Choose either Mac or Windows Palette> 256 colors > choose Web palette > 216 colors
Cross Platform/Browser-Safe Colors
256 vs. 216 Colors
Dithering
Using the Color Picker

10. File Formats JPEG – Joint Photographic Experts Group
GIF – Graphics Interchange Format
PNG – Portable Network Graphics
JPEG
Pronounced Jay-Peg
JPEG actually compression algorithm, not a file format
JPEG associated with JFIF (JPEG File
Interchange Format)
GIF
Pronounced Jiff, although most call it Giff
PNG
Pronounced Ping
Newer file format
Will see more in future

11. JPEG Best for photos or continuous tone, full- color images
Uses 16 million colors
Browsers use reasonable approximations
Work in RGB mode
Uses lossy compression
Saving (Standard, Optimized, Progressive)
Lossy Compression
Smaller Files
Discards Info
Removes Details & Color
Eye can’t see
Will lose quality when adjusting/reducing file size
Interlacing Effect with Progressive
Display low resolution image first
Followed by higher resolution
Fills in details
Ends with highest quality

12. GIF Best for solid color images (buttons, logos) Uses 256 colors
Browsers uses 216 colors
Work in Indexed mode
Good compression
Interlaced
Uses Lossless Compression
Never discards any info about original file
Interlacing
Display low resolution image
Followed by higher resolution
Ending with highest quality

13. PNG (8-bit) Best for line art (logos)
Compresses solid areas of color well and maintains sharp detail
Generally, has better compression than GIF (10-30% smaller)
If considering saving as GIF, also consider saving as PNG (8-bit)
Not supported by older browsers

14. PNG (24-bit) Best for continuous-tone images
Compresses well, but can be larger than JPEGs
If considering saving as JPEG, could also consider PNG (24-bit)
Not supported by older browsers

15. Comparison of JPEG and PNG
JPEG vs PNG
Comparison of JPEG and PNG
68K PNG
31K JPG

16. Comparison of JPEG and PNG
GIF vs PNG
Comparison of JPEG and PNG
10.8K PNG-8 with 64 colors
9.5K GIF with 64 colors

17. Web Graphics Transparent Text Web browser takes up screen real estate
This limits available space somewhat
Screen Size-Guidelines
Most 14-inch monitors
570 x 400 browser window
640 x 480 display
Most 15-inch monitors
730 x 520 browser window
800 x 600 display
Colors
Many computers still operate with only 256 colors
Image/Graphic may have more colors
Problem: Computer won’t support image/graphic
Browser dithers colors to find closest match
This could change what original image looked like/ugly
To avoid dithering, use 256 color mode
Dithering – mixes pixels of available colors in color table to simulate missing
colors
Even 256 colors not considered “web-safe”
Web-safe/Color-safe palette
Mac vs. PC use slightly different color systems
Reality: cross-platform, browser-safe palette only has 216 colors
Show this
Flowers > Image > Duplicate > Repeat making 2nd Duplicate > Image > Mode > Indexed Color > Choose either Mac or Windows Palette> 256 colors > choose Web palette > 216 colors
Transparent Text
Web Graphics

18. Saving for the Web 4-Up View File Sizes and Download Speeds
Web browser takes up screen real estate
This limits available space somewhat
Screen Size-Guidelines
Most 14-inch monitors
570 x 400 browser window
640 x 480 display
Most 15-inch monitors
730 x 520 browser window
800 x 600 display
Colors
Many computers still operate with only 256 colors
Image/Graphic may have more colors
Problem: Computer won’t support image/graphic
Browser dithers colors to find closest match
This could change what original image looked like/ugly
To avoid dithering, use 256 color mode
Dithering – mixes pixels of available colors in color table to simulate missing
colors
Even 256 colors not considered “web-safe”
Web-safe/Color-safe palette
Mac vs. PC use slightly different color systems
Reality: cross-platform, browser-safe palette only has 216 colors
Show this
Flowers > Image > Duplicate > Repeat making 2nd Duplicate > Image > Mode > Indexed Color > Choose either Mac or Windows Palette> 256 colors > choose Web palette > 216 colors
Saving for the Web
4-Up View
File Sizes and Download Speeds
Changing Options
Halo Effect and Matte Options

19. Scanning Concepts Getting Images Into Photoshop
Bitmap vs. Vector Graphics
Pixel Dimensions
Image Resolution
Monitor Resolution
Printer Resolution
Screen Frequency
File Size

20. Evaluating Originals Color Range Contrast Size Good Original
Shadow & Highlight Detail
Tonal Corrections

21. Output Device Resolution
Scanning Line Art
Output Device Resolution
Sizing Factor
Scan Resolution = X

22. Scanning Photographic Images
SizingFactor
Scan
Resolution
Screen
Ruling
Quality
Factor = X X
SizingFactor
Desired Size/Original Size =

23. Basic Image Correction
Examine the Original
Scan the Original
Identify the Image Colors & Tones
Measure & Adjust Highlights
Measure & Adjust Shadows
Measure & Adjust Midtones
Apply Unsharp Mask
Save File
Review Image for Rescanning or Additional Corrections

24. Color & Tonal Adjustments
Histograms
Navigator Palette
Gamma Settings
Curve Controls
Unsharp Mask Filter