Photoshop: Designing Graphics for the Web

Christine Vucinich & Vicki Weidler

ITS Training Services

224 B Computer Building
University Park, PA 16802
seminars@psu.edu
http://cac.psu.edu/training/
 Overview
• Photoshop Basics
– What is Photoshop?
– Uses
– Tour
• Web Graphics
– Graphic Limitations
– Display Considerations
– Cross-Platform/Browser-Safe Palette
– File Formats
– Transparent Text
– Saving for the Web
 Overview Continued

• Scanning
– Scanning Concepts
– Evaluating Originals
– Scanning Line Art vs. Photographic Images
– Scanning Strategies
– Photoshop Measurement/Correction Tools
– Additional Resources
 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…..
 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
 Touring Photoshop

• Using Help
• Navigating: Windows, Palettes,
Features & Tools
• Preferences
 Graphic Limitations

• Connection Speeds
• User Configurations
 Display Considerations

• Screen Sizes
• Colors
Cross Platform/Browser-Safe Colors

• 256 vs. 216 Colors

• Dithering
• Using the Color Picker
 File Formats

• JPEG – Joint Photographic Experts Group

• GIF – Graphics Interchange Format
• PNG – Portable Network Graphics
 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)
 GIF

• Best for solid color images (buttons, logos)

• Uses 256 colors
• Browsers uses 216 colors
• Work in Indexed mode
• Good compression
• Interlaced
 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
 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
 JPEG vs PNG

Comparison
of JPEG and
PNG

68K PNG 31K JPG

 GIF vs PNG

Comparison
of JPEG and
PNG
10.8K PNG-8 with 64 colors 9.5K GIF with 64 colors
 Transparent Text

Web Graphics
 Saving for the Web
• 4-Up View
• File Sizes and Download Speeds
• Changing Options
• Halo Effect and Matte Options
 Scanning Concepts
• Getting Images Into Photoshop
• Bitmap vs. Vector Graphics
• Pixel Dimensions
• Image Resolution
• Monitor Resolution
• Printer Resolution
• Screen Frequency
• File Size
 Evaluating Originals

• Color Range
• Contrast
• Size
• Good Original
• Shadow & Highlight Detail
• Tonal Corrections
 Scanning Line Art

Scan Resolution = Output Device X Sizing

Resolution Factor
 Scanning Photographic Images

Scan Screen Quality Sizing

Resolution = Ruling X Factor X
Factor

Sizing
= Desired Size/Original Size
Factor
 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
Color & Tonal Adjustments

• Histograms
• Navigator Palette
• Gamma Settings
• Curve Controls
• Unsharp Mask Filter
 Summary
• Photoshop Basics
– What is Photoshop?
– Uses
– Tour
• Web Graphics
– Graphic Limitations
– Display Considerations
– Cross-Platform/Browser-Safe Palette
– File Formats
– Transparent Text
– Saving for the Web
 Summary Continued

• Scanning
– Scanning Concepts
– Evaluating Originals
– Scanning Line Art vs. Photographic Images
– Scanning Strategies
– Photoshop Measurement/Correction Tools
– Additional Resources
 Conclusion

• Questions & Answers

• Additional Resources
• Thank You!!!