Photoshop

Photoshop: Designing Graphics for the Web : 

Photoshop: Designing Graphics for the Web Christine Vucinich & Vicki Weidler 8/29/2010 1 gyan agnihotri

Overview : 

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 8/29/2010 2 gyan agnihotri

Overview Continued : 

Overview Continued Scanning Scanning Concepts Evaluating Originals Scanning Line Art vs. Photographic Images Scanning Strategies Photoshop Measurement/Correction Tools Additional Resources 8/29/2010 3 gyan agnihotri

What is Photoshop? : 

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….. 8/29/2010 4 gyan agnihotri

Uses of Photoshop : 

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 8/29/2010 5 gyan agnihotri

Touring Photoshop : 

Touring Photoshop Using Help Navigating: Windows, Palettes, Features & Tools Preferences 8/29/2010 6 gyan agnihotri

Graphic Limitations : 

Graphic Limitations Connection Speeds User Configurations 8/29/2010 7 gyan agnihotri

Display Considerations : 

Display Considerations Screen Sizes Colors 8/29/2010 8 gyan agnihotri

Cross Platform/Browser-Safe Colors : 

Cross Platform/Browser-Safe Colors 256 vs. 216 Colors Dithering Using the Color Picker 8/29/2010 9 gyan agnihotri

File Formats : 

File Formats JPEG – Joint Photographic Experts Group GIF – Graphics Interchange Format PNG – Portable Network Graphics 8/29/2010 10 gyan agnihotri

JPEG : 

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) 8/29/2010 11 gyan agnihotri

GIF : 

GIF Best for solid color images (buttons, logos) Uses 256 colors Browsers uses 216 colors Work in Indexed mode Good compression Interlaced 8/29/2010 12 gyan agnihotri

PNG (8-bit) : 

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 8/29/2010 13 gyan agnihotri

PNG (24-bit) : 

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 8/29/2010 14 gyan agnihotri

JPEG vs PNG : 

JPEG vs PNG Comparison of JPEG and PNG 68K PNG 31K JPG 8/29/2010 15 gyan agnihotri

GIF vs PNG : 

GIF vs PNG Comparison of JPEG and PNG 10.8K PNG-8 with 64 colors 9.5K GIF with 64 colors 8/29/2010 16 gyan agnihotri

Transparent Text : 

Transparent Text Web Graphics 8/29/2010 17 gyan agnihotri

Saving for the Web : 

Saving for the Web 4-Up View File Sizes and Download Speeds Changing Options Halo Effect and Matte Options 8/29/2010 18 gyan agnihotri

Scanning Concepts : 

Scanning Concepts Getting Images Into Photoshop Bitmap vs. Vector Graphics Pixel Dimensions Image Resolution Monitor Resolution Printer Resolution Screen Frequency File Size 8/29/2010 19 gyan agnihotri

Evaluating Originals : 

Evaluating Originals Color Range Contrast Size Good Original Shadow & Highlight Detail Tonal Corrections 8/29/2010 20 gyan agnihotri

Scanning Line Art : 

Scanning Line Art Scan Resolution = Output Device Resolution X Sizing Factor 8/29/2010 21 gyan agnihotri

Scanning Photographic Images : 

Scanning Photographic Images Scan Resolution = Screen Ruling X X Quality Factor SizingFactor SizingFactor = Desired Size/Original Size 8/29/2010 22 gyan agnihotri

Basic Image Correction : 

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 8/29/2010 23 gyan agnihotri

Color & Tonal Adjustments : 

Color & Tonal Adjustments Histograms Navigator Palette Gamma Settings Curve Controls Unsharp Mask Filter 8/29/2010 24 gyan agnihotri

Summary : 

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 8/29/2010 25 gyan agnihotri

Summary Continued : 

Summary Continued Scanning Scanning Concepts Evaluating Originals Scanning Line Art vs. Photographic Images Scanning Strategies Photoshop Measurement/Correction Tools Additional Resources 8/29/2010 26 gyan agnihotri

Conclusion : 

Conclusion Questions & Answers Additional Resources Thank You!!! 8/29/2010 27 gyan agnihotri