1. 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/

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

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

8. Display Considerations Screen Sizes Colors

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

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)

12. GIF Best for solid color images (buttons, logos) Uses 256 colors Browsers uses 216 colors Work in Indexed mode Good compression Interlaced

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. JPEG vs PNG Comparison of JPEG and PNG 68K PNG31K JPG

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

17. Transparent Text Web Graphics

18. 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. Scanning Line Art Scan Resolution= Output Device Resolution X Sizing Factor

22. Scanning Photographic Images Scan Resolution = Screen Ruling XX Quality Factor Sizing Factor = 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

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

26. Summary Continued Scanning –Scanning Concepts –Evaluating Originals –Scanning Line Art vs. Photographic Images –Scanning Strategies –Photoshop Measurement/Correction Tools –Additional Resources

27. Conclusion Questions & Answers Additional Resources Thank You!!!