Photoshop Creating and Preparing Images for the Web

Photoshop: Creating and Preparing Images for the Web Instructor: Adam Cavotta

Overview • • Explore the limitations of images on the Web Become familiar with different Web file formats Explore cross-platform/browser-safe colors Create transparent text, image maps, animation and rollover effects • Slice and save images for the Web • Learn how to optimize images for the Web • Become familiar with the Image. Ready interface

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

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 Photoshop

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

Toggling Between Photoshop & Image. Ready Toggling Button

Slicing

Image Maps

Rollover Effects

Animations

Summary • • Explore the limitations of images on the Web Become familiar with different Web file formats Explore cross-platform/browser-safe colors Create transparent text, image maps, animation and rollover effects • Slice and save images for the Web • Learn how to optimize images for the Web • Become familiar with the Image. Ready interface

Conclusion • Resources • Questions & Answers • Evaluations • Thank You!!!