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 [...]... 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... • • 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? ... 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...JPEG • Best for photos or continuous tone, fullcolor 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)... 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 . Photoshop: Designing Graphics for the Web Christine Vucinich & Vicki Weidler ITS Training Services 224 B Computer. 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. 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