Photoshop: Designing Graphics for the Web Christine Vucinich & Vicki Weidler ITS Training Services 224 B Computer Building University Park, PA

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 PNG31K JPG

GIF vs PNG Comparison of JPEG and PNG 10.8K PNG-8 with 64 colors9.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 Resolution X Sizing Factor

Scanning Photographic Images Scan Resolution = Screen Ruling XX Quality Factor Sizing Factor = Desired Size/Original Size

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!!!