Table of Contents

I. Introduction.
Note from Lynda. How This Book Works. Exercise Files on the HOT CD-ROM. Software Files on the CD-ROM. Troubleshooting FAQ. Skill Level. RAM, RAM, and More RAM. System Requirements. About lynda.com. About Me. Acknowledgements.

2. Interface.
Interface Overview. Photoshop 5.5 and ImageReady 2.0 Toolbars. Jump To Buttons. Exercise#1—Using Flexible Palettes and Tabs. Exercise#2—Returning the Palettes to Default Settings. Palette Shortcuts. Shortcuts. How to Set a Tool's Default Setting in Photoshop. How to View Hidden Tools in Photoshop and ImageReady

3. Color Management.
Exercise#1—Changing Photoshop Color Settings for Web Design. Exercise#2—Changing Your Photoshop Preferences for the Web.

4. Optimization.
What Affects Speed on the Web? GIF or JPEG? Transparency and Animation. Lossy or Lossless? How Can You Make Small JPEGs? How Can You Make Small GIFs? What About PNG? What is Bit Depth? Exercise#1—Saving for Web Using JPEG. Exercise#2—Saving for Web Using GIF. Exercise#3—Choosing the Right Palette. Exercise#4—Reducing the Colors. Exercise#5—Previewing Gamma and Browser Dither. Exercise#6—Changing the Dimensions of a Graphic. Exercise#7—Previewing in a Browser. Exercise#8—Setting Up for Optimization in ImageReady. Exercise#9—Optimizing a JPEG. Exercise#10—Using a Matte Color on a JPEG. Exercise#11—Previewing and Writing HTML. Exercise#12—Using Lossy Compression.

5. Web Color.
What is Web-Safe Color Anyway? Why is Web-Safe Color so Important? What is Hexidecimal Color? What Happens If You Don't Use Web-Safe Color? Exercise#1—Changing the Info Palette. Exercise#2—Copy Color as HTML. Exercise#3—Only Web Colors. Exercise#4—Snapping to Web Colors. Exercise#5—Setting the Color Palette to Web Colors. Exercise#6—Setting the Swatches Palette to Web Colors. Exercise#7—Loading the lynda.com Swatch. Exercise#8—Previewing Dither. Exercise#9—Fixing a Non-Safe Image. Exercise#10—When Dithering is Good. Exercise#11—Preserve Transparency. Exercise#12—Filling with Ditherbox. Exercise#13—Previewing Gamma.

6. Type.
Differences in Type in Photoshop 5.5 and ImageReady 2.0. Exercise#1—Type Basics. Exercise#2—Jump To. Exercise#3—Changing the Update Feature. Exercise#4—Editing Type. Exercise#5—Rendering Type. Exercise#6—Setting Up Artwork for Buttons. What Is Preserve Transparency? Exercise#7—ImageReady Layer Effects. Exercise#8—Photoshop Layer Effects. Exercise#9—The Gradient/Pattern Layer Effect. Exercise#10—Applying Styles. Exercise#11—Making Your Own Styles. Exercise#12—Stroked Text Using Styles and Filter Affects. Exercise#13—Stroked Text Using Selections. Exercise#14—Clipping Groups. Exercise#15—Painting Inside Type.

7. Background Images.
What is a Background Image? Background Image Sizes. Exercise#1—Defining, Editing, and Previewing a Background Image. Exercise#2—Saving a Background Image. Exercise#3—Recoloring Background Image Artwork. Exercise#4—Seamless Background Tiles. Saving Options in ImageReady. Exercise#5—Copying and Pasting with Offset. Ways to Access the Offset Filter in ImageReady. Exercise#6—Seamless Photographic Background Images. Which program is best for Background Images? Exercise#7—Full-Screen Background Images. Exercise#8—Large-Screen Photographic Background Images. Exercise#9—Directional Tiles.

8. Transparent GIFs.
What Does Anti-Aliasing Look Like? How to Recognize a Transparent Layer. Offset Problems in Browsers. Transparency, Masks, and GIFs. Exercise#1—Creating and Previewing GIF Transparency. Exercise#2—Fixing Bad Images. Exercise#3—Adding a Drop Shadow. Exercise#4—The Pitfalls of Broad Backgrounds. Exercise#5—Saving Transparent Images. Exercise#6—Transparency in Photoshop. Exercise#7—Transparency Layer Versus Transparent GIF. Exercise#8—GIF 89a Export.

9. Image Maps.
Server-Side or Client-Side Image Maps? What Does an Image Map Look Like? Exercise#1—Making an Image Map. Execise#2—Making an Invisible Layer an Image Map.

10. Slicing.
What are Slices? Slice Icons. GoLive or ImageReady Code? Exercise#1—Slicing and Selecting. Exercise#2—Optimizing Slices. Exercise#3—Previewing and Saving Slices. Exercise#4—Using the Slice Palette. Exercise#5—Setting Auto-Slices to No Image. Saving Slices Recap.

11. Rollovers.
Exercise#1—Single-Button Rollover with Styles. Exercise#2—Image Map-Based Rollovers. Exercise#3—Saving a Rollover. Preferences for Saving Rollovers. Exercise#4—Single-Button Rollover with Layers. What JavaScript States Are Allowed? Exercise#5—Remote Rollovers. Exercise#6—Saving Complicated Rollovers. Exercise#7—Creating Navigation Bar Layers. Exercise#8—Aligning Layers. Exercise#9—Adding Slices to a Navigation Bar. Exercise#10—Adding Rollovers to a Navigation Bar.

12. Animated GIFs.
Animation Terms. Animated GIF Format. Compression Challenges. Controlling the Timing of Animated GIFs. Animated Aesthetics. Exercise#1—Frame-by-Frame Animation with Layers. Exercise#2—Setting the Speed and Looping. Exercise#3—Optimizing and Saving an Animated GIF. Exercise#4—Making a Transparent Animated GIF. Exercise#5—Tweening with Opacity. Exercise#6—Selecting, Duplicating, and Reversing Frames. Exercise#7—Tweening a Tweened Sequence. Different Ways to Duplicate Frames. Exercise#8—Tweening with Position. Exercise#9—Tweening with Effects. Exercise#10—Animated Slide Show. Exercise#11—Animated GIF Rollovers. Exercise#12—Designing Entire Interfaces.

13. Automation.
What is the Web Photo Gallery? Actions that Ship With Photoshop and ImageReady. Exercise#1—Creating a Web Photo Gallery. What Do All the Web Photo Gallery Settings Do? Exercise#2—Creating an Action. Exercise#3—Batch Processing with an Action. Adding, Changing, Deleting, or Pausing an Action. Exercise#4—Creating a Preview in Browser Action. Exercise#5—Previewing Backgrounds with an Action. Exercise#6—Automating Animation with a Droplet. More About Droplets.

14. Importing/Exporting.
Exercise#1—Update HTML. How Does HTML Work? Exercise#2—Getting ImageReady Rollovers into GoLive. Exercise#3—Getting ImageReady Rollovers into Dreamweaver. Exercise#4—Exporting Illustrator 8.0 Files. Exercise#5—Exporting from Earlier Illustrator Versions. Exercise#6—Exporting ImageReady to QuickTime. Exercise#7—Converting from QuickTime to ImageReady.

15. Troubleshooting FAQ.

Promotional Information

This is the second book in the major new series founded by Lynda Weinman, known for her tremendously successful books and high-profile training center in Ojai, California. It takes a process-oriented approach, with each exercise designed around a particular technique. In this way, the book teaches readers, Photoshop principles, techniques, and tips in a format that enables them to apply the lessons to real-world situations. This latest release of Photoshop, the leading image-editing application, comes bundled with ImageReady 2, Adobe's program for preparing images for the Web. It provides the first integrated solution for both print and the Web, enabling professionals to design interactive Web graphics or prepare sophisticated images for print with the same ease.

About the Author

Author and designer Lynda Weinman--creator of lynda.com, a leading force in Web-design training--has taught digital arts since the late 1980s at Art Center College of Design, American Film Institute, San Francisco State University, and UCLA. Lynda also is a featured columnist and writes on digital graphics and animation for numerous national and international magazines. Her bestselling books, including Designing Web Graphics, have been translated into six languages and are used by Web designers and teaching professionals nationally and internationally.

She and her husband, Bruce Heavin, founded and operate the Ojai Digital Arts Center in Ojai, California, which offers small, intensive workshops in Web design. Lynda has recently launched a series of training videos under the lynda.com imprint. For more information on her books, videos, and workshops, visit www.lynda.com.