Photoshop CS4 for the Web

Photoshop CS4 offers designers a rich assortment of editing tools with which to create compelling imagery for the web. Photoshop CS4 for the Web covers a wide range of uses for Photoshop in the web graphics workflow. Instructor Jan Kabili explains how to optimize graphics and photographs so they download quickly in a web browser. She covers the why and how of image slicing, and demonstrates practical techniques for designing layouts, backgrounds, navigation bars, and buttons in Photoshop.

Table of contents

0. Introduction

• Welcome
  
• What you'll learn in this course
• Using the exercise files

1. The Interface

• Looking over the interface
  
• Working with tabbed documents
  
• Customizing panels
• Customizing web shortcuts
  
• Saving a custom web workspace

2. Preparation

• Setting preferences for the web
  
• Choosing color settings for the web
  

3. Working with Color

• The decline of web-safe color
  
• Choosing color with the Color Picker
• Sampling color with the Eyedropper tool
  
• Choosing color with the Swatches panel
  
• Making a custom color swatch
  
• Recoloring web graphics
• Copying color as HTML

4. Optimizing Images for the Web

• Touring the Save for Web interface
  
• Optimizing photos as JPEGs
  
• Adding metadata
  
• Optimizing graphics as GIFs
• Locking GIF colors
• Optimizing graphics as PNGs

5. Making Web Backgrounds

• Designing web backgrounds
  
• Optimizing a tiling background
  
• Building symmetrical background
• Building a striped background
  
• Using a full-screen background

6. Optimizing Transparent Graphics

• Understanding transparency
  
• Optimizing transparent graphics for solid backgrounds
• Optimizing transparent graphics for patterned backgrounds
• Optimizing transparent graphics with shadows and glows
  
• Starting with a non-transparent graphic
  
• Simulating transparency for JPEGs
  

7. Creating Navigation Graphics

• Building a simple navigation bar
• Building a simple button with layer styles
• Creating a navigation bar with Smart Object buttons
• Creating a navigation bar with custom shape icons
• Building a gel button

8. Preparing Photographs for the Web

• Following a web photo workflow
• Resizing a copy for the web
  
• Sharpening for the web
  

9. Laying Out Page Comps

• Starting a new file from scratch
  
• Storyboarding
• Adding images
  

10. Slicing

• Why slice?
  
• Creating user slices
  
• Creating layer-based slices
  
• Adding slice options
  
• Optimizing and saving slices
  

11. Making Graphics for Rollovers

• Understanding Photoshop and rollovers
  
• Creating rollover graphics with layer comps
• Optimizing rollover graphics
  
• Installing the lynda.com rollover script
• Exporting rollover graphics
  
• Making rollover graphics from layer visibility

12. Animating

• Creating animations from layer visibility
  
• Tweening with opacity
  
• Tweening with position and layer effects
• Optimizing transparent animated GIFs
• Creating simple animated slideshows
  

13. Automating

• Using the Image Processor
• Creating a web gallery in Bridge
• Displaying high-resolution web images with Zoomify
• Creating graphic variations with variables
• Importing values for graphic variations
  

14. Integrating with Other CS4 Applications

• Dreamweaver Smart Object integration
• Dreamweaver Copy/Paste integration
  
• Fireworks integration
  
• Exporting from Illustrator to Photoshop
  
• Illustrator vector Smart Object integration
  
• Flash integration
  

Conclusion

• Goodbye