1 / 27

Photoshop: Designing Graphics for the Web

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

arin
Download Presentation

Photoshop: Designing Graphics for the Web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 PNG 31K JPG

  16. GIF vs PNG Comparison of JPEG and PNG 10.8K PNG-8 with 64 colors 9.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. Getting Images Into Photoshop Bitmap vs. Vector Graphics Pixel Dimensions Image Resolution Monitor Resolution Printer Resolution Screen Frequency File Size Scanning Concepts

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

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

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

More Related