1 / 21

Photoshop: Creating and Preparing Images for the Web

Explore the limitations of web images, learn different file formats, cross-platform colors, transparent text, image maps, animations, and rollover effects. Slice and save images, optimize for the web, and understand the ImageReady interface.

bhoyle
Download Presentation

Photoshop: Creating and Preparing Images 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. Photoshop: Creating and Preparing Images for the Web Instructor: Adam Cavotta

  2. 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 ImageReady interface

  3. Graphic Limitations • Connection Speeds • User Configurations

  4. Display Considerations • Screen Sizes • Colors

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

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

  7. 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. GIF • Best for solid color images (buttons, logos) • Uses 256 colors • Browsers uses 216 colors • Work in Indexed mode • Good compression • Interlaced

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

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

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

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

  13. Transparent Text Photoshop

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

  15. Toggling Between Photoshop & ImageReady Toggling Button

  16. Slicing

  17. Image Maps

  18. Rollover Effects

  19. Animations

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

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

More Related