web design tod

Photoshop: Designing Graphics for the Web

Christine Vucinich & Vicki Weidler

ITS Training Services224 B Computer BuildingUniversity Park, PA 16802seminars@psu.eduhttp://cac.psu.edu/training/

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

• 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• WWW (GIFS, JPEGS, etc.)• Montage• Halftones, Duotones, Tritones, Quadtones• Color Separations• Posterizations• Special Effects

Touring Photoshop

• Using Help

• Navigating: Windows, Palettes, Features & Tools

• Preferences

Graphic Limitations

• Connection Speeds

• User Configurations

Display Considerations

• Screen Sizes

• Colors

Cross Platform/Browser-Safe Colors

• 256 vs. 216 Colors

• Dithering

• Using the Color Picker

File Formats

• JPEG – Joint Photographic Experts Group

• GIF – Graphics Interchange Format

• PNG – Portable Network Graphics

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)

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

68K PNG 31K JPG

GIF vs PNG

Comparison of JPEG and

PNG

10.8K PNG-8 with 64 colors

9.5K GIF with 64 colors

Transparent Text

Web Graphics

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• Image Resolution• Monitor Resolution• Printer Resolution• Screen Frequency• File Size

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 Photographic Images

Scan Resolution =

ScreenRuling X X

QualityFactor

SizingFactor

SizingFactor = Desired Size/Original Size

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

• Unsharp Mask Filter

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 vs. Photographic Images

– Scanning Strategies

– Photoshop Measurement/Correction Tools

– Additional Resources

Conclusion

• Questions & Answers

• Additional Resources

• Thank You!!!