1 / 22

Photoshop Designing Graphics for the Web

Photoshop Designing Graphics for the Web. 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. What is Photoshop?.

bbrown
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. PhotoshopDesigning Graphics for the Web

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

  4. Uses of Photoshop • Art (line drawings, charcoal, color original) • Photographic • Restoration • WWW (GIFS, JPEGS, etc.) • Color Separations • Posterizations • Special Effects

  5. Touring Photoshop • Using Help • Navigating: Windows, Palettes, Features & Tools • Preferences

  6. Graphic Limitations • Connection Speeds • User Configurations

  7. Display Considerations • Screen Sizes • Colors

  8. Cross Platform/Browser-Safe Colors • 256 vs. 216 Colors • Dithering • Using the Color Picker

  9. File Formats • JPEG – Joint Photographic Experts Group • GIF – Graphics Interchange Format • PNG – Portable Network Graphics

  10. 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)

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

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

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

  14. JPEG vs PNG Comparison of JPEG and PNG 68K PNG 31K JPG

  15. GIF vs PNG Comparison of JPEG and PNG 10.8K PNG-8 with 64 colors 9.5K GIF with 64 colors

  16. Transparent Text Web Graphics

  17. Saving for the Web • 4-Up View • File Sizes and Download Speeds • Changing Options • Halo Effect and Matte Options

  18. Scanning Concepts • Getting Images Into Photoshop • Bitmap vs. Vector Graphics • Pixel Dimensions • Image Resolution • Monitor Resolution • Printer Resolution • Screen Frequency • File Size

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

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

  21. Color & Tonal Adjustments • Histograms • Navigator Palette • Gamma Settings • Curve Controls • Unsharp Mask Filter

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

More Related