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. Comparison of JPEG and PNG
JPEG vs PNG
Comparison of JPEG and PNG
68K PNG
31K JPG

12. Comparison of JPEG and PNG
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!!!