Скачать презентацию Photoshop Designing Graphics for the Web Christine Vucinich Скачать презентацию Photoshop Designing Graphics for the Web Christine Vucinich

31ee2a1ed83898a3d3c69600a83fdaeb.ppt

  • Количество слайдов: 27

Photoshop: Designing Graphics for the Web Christine Vucinich & Vicki Weidler ITS Training Services Photoshop: Designing Graphics for the Web Christine Vucinich & Vicki Weidler ITS Training Services 224 B Computer Building University Park, PA 16802 [email protected] edu http: //cac. psu. edu/training/

Overview • Photoshop Basics – What is Photoshop? – Uses – Tour • 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

Overview Continued • Scanning – – – Scanning Concepts Evaluating Originals Scanning Line Art 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 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 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 Touring Photoshop • Using Help • Navigating: Windows, Palettes, Features & Tools • Preferences

Graphic Limitations • Connection Speeds • User Configurations Graphic Limitations • Connection Speeds • User Configurations

Display Considerations • Screen Sizes • Colors Display Considerations • Screen Sizes • Colors

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

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

JPEG • Best for photos or continuous tone, fullcolor images • Uses 16 million 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 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 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 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 68 K PNG 31 K JPG JPEG vs PNG Comparison of JPEG and PNG 68 K PNG 31 K JPG

GIF vs PNG Comparison of JPEG and PNG 10. 8 K PNG-8 with 64 GIF vs PNG Comparison of JPEG and PNG 10. 8 K PNG-8 with 64 colors 9. 5 K GIF with 64 colors

Transparent Text Web Graphics Transparent Text Web Graphics

Saving for the Web • 4 -Up View • File Sizes and Download Speeds 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 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 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 Line Art Scan Resolution = Output Device Resolution X Sizing Factor

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

Basic Image Correction • • • Examine the Original Scan the Original Identify the 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 Color & Tonal Adjustments • • • Histograms Navigator Palette Gamma Settings Curve Controls Unsharp Mask Filter

Summary • Photoshop Basics – What is Photoshop? – Uses – Tour • Web 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 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!!! Conclusion • Questions & Answers • Additional Resources • Thank You!!!