1.Getting Started | Adobe Photoshop CS2 for the Web H•O•T

| 2 |

This chapter offers an overview of the Web fea-tures in Photoshop CS2 and ImageReady

CS2. Here you’ll find ideas for the kind ofWeb graphics you can create with these

programs, advice on when to use eachprogram, and an introduction to newWeb features in Photoshop CS2 andImageReady CS2. The information inthis chapter builds a foundation forwhat you’ll learn in the hands-onexercises in the chapters that follow.

1Getting Started

| Creating Web Graphics in Photoshop CS2 and ImageReady CS2 |

| When to Use Photoshop CS2 vs. When to Use ImageReady CS2 |

chap_01

PCS2Web HOT CD-ROM

01 PSCS2_HOT(2-9).qxd 05/13/2005 11:46 AM Page 2

Adobe Photoshop CS2 for the Web H•O•T | 1.Getting Started

| 3 |

Creating Web Graphics in Photoshop CS2 and ImageReady CS2You can use Photoshop CS2 and ImageReady CS2 to create a variety of images for the Web. Thissection lists some examples of the kinds of Web graphics and content you can create. You’ll get achance to explore projects like the following in the chapters to come.

Organize assets: Use Adobe Bridge to view, organize, flag, rate, and keyword your images in Chapter 3, “Organizing Assets.”

Create type: Create and edit vector-based type in Chapter 6, “Creating Type.” Type created inPhotoshop CS2 or ImageReady CS2 is great for Web buttons or banners that require fancy fonts or special type effects.

01 PSCS2_HOT(2-9).qxd 05/13/2005 11:46 AM Page 3

1.Getting Started | Adobe Photoshop CS2 for the Web H•O•T

| 4 |

Optimize images for the Web: Learn techniques for optimizing photographs, logos, and graphicimages in Chapter 7, “Optimizing Images.”

Create Web backgrounds: Create symmetrical and nonsymmetrical background images, define imagesas background images, and save the required HTML code to make background images work in a Webbrowser in Chapter 8, “Creating Web Backgrounds.”

01 PSCS2_HOT(2-9).qxd 05/13/2005 11:46 AM Page 4

Adobe Photoshop CS2 for the Web H•O•T | 1.Getting Started

| 5 |

Design effective navigation: Learn how to create unique Web buttons, navigation bars, tabbed navi-gation, and iconic navigation with the shape tools and layer styles in Chapter 9, “Designing Navigation.”

Create animated GIFs: Create and save animated GIFs using the new animation features in PhotoshopCS2 in Chapter 11, “Creating Animated GIFs.”

Slice: Slice images, edit slices, optimize slices, and save the required HTML code to make slicedimages work in a Web browser in Chapter 12, “Slicing.”

01 PSCS2_HOT(2-9).qxd 05/13/2005 11:46 AM Page 5

1.Getting Started | Adobe Photoshop CS2 for the Web H•O•T

| 6 |

Create rollovers: Create simple Web buttons with rollovers, remote rollovers, and selected states, andsave the required JavaScript and HTML code to make rollovers work in a Web browser in Chapter 13,“Creating Rollovers.”

Create image maps: Create multiple hot spots in a single image and save the required HTML code tomake image maps work in a Web browser in Chapter 14, “Creating Image Maps.”

01 PSCS2_HOT(2-9).qxd 05/13/2005 11:46 AM Page 6

Adobe Photoshop CS2 for the Web H•O•T | 1.Getting Started

| 7 |

Create Web photo galleries: Create Web photo galleries to display images. Photoshop CS2 automat-ically creates all the elements for the Web site, optimizes the images, writes the HTML code, and designsthe navigation buttons. Assemble Web photo galleries in Chapter 15, “Creating Web Photo Galleries.”

01 PSCS2_HOT(2-9).qxd 05/13/2005 11:46 AM Page 7

1.Getting Started | Adobe Photoshop CS2 for the Web H•O•T

| 8 |

When to Use Photoshop CS2 vs. When to Use ImageReady CS2When you’re creating Web graphics, when should you use Photoshop CS2 and when you should useImageReady CS2? Although Photoshop CS2 and ImageReady CS2 have many common features,there are many features exclusive to each program. Here are some recommendations:

• Creating simple Web graphics: Use either Photoshop CS2 or ImageReady CS2 to create simpleWeb graphics such as Web buttons and background images.

• Performing complex image-editing tasks: Use Photoshop CS2 to perform complex image-editing tasks, such as retouching a photograph or making a collage. The reason is simple—Photoshop CS2 has more sophisticated image-editing tools than ImageReady CS2.

• Designing full Web page layouts: Use Photoshop CS2 to create full Web page layouts.Photoshop CS2 has more advanced image-editing and creation tools. When you’ve finisheddesigning the layout, you can always jump to ImageReady CS2 to create rollovers or animationsand save the required JavaScript or HTML code required to make the Web page work.

• Organizing assets: Use Adobe Bridge when you want to organize, sort, or assign keywords to images.

• Optimizing images: Use the program you have open at the time. The Save For Web dialog box in Photoshop CS2 is similar to the Optimize palette in ImageReady CS2; however, ImageReadyCS2 gives you better access to the original image if you want to make changes during the opti-mization process.

• Slicing images: Use ImageReady CS2 when you’re slicing an image. Although Photoshop CS2gives you access to the slice tools, you don’t have access to the Slice, Table, or Web Contentpalettes, which you’ll need for performing complex slicing tasks and creating rollovers.

• Creating rollovers: Use ImageReady CS2 to create rollovers. ImageReady CS2 gives you access to the Web Content palette and all the controls you need to create rollovers. It also writes theJavaScript and HTML code required to make the rollovers work in a Web browser. AlthoughPhotoshop CS2 does not have the features for creating rollovers, you can design the artwork in Photoshop CS2 and use ImageReady CS2 to create and save the rollovers.

• Creating image maps: Use ImageReady CS2 if you want to create image maps. ImageReadyCS2 gives you access to image map creation tools and lets you save the required HTML code to make image maps work in a Web browser.

• Creating animated GIFs: Use Photoshop CS2 or ImageReady CS2 if you want to create andsave animations as animated GIFs. The animation features—new to Photoshop CS2—are identicalto those found in ImageReady CS2.

• Creating Web photo galleries: Use Photoshop CS2 or Adobe Bridge if you want to create a Webphoto gallery from a series of images.

01 PSCS2_HOT(2-9).qxd 05/13/2005 11:46 AM Page 8

Adobe Photoshop CS2 for the Web H•O•T | 1.Getting Started

| 9 |

Don’t worry if you’re still unsure about which program to use when. You’ll get hands-on experiencecompleting all these tasks in the appropriate program as you work through the book. Plus, you canalways glance back at the following handy reference chart.

When to Use Photoshop CS2 vs. When to Use ImageReady CS2

Task Program

Creating simple Web graphics such as Photoshop CS2 or ImageReady CS2buttons or backgrounds

Performing complex image-editing tasks Photoshop CS2such as retouching and manipulating photographs or creating collages

Designing navigation or full Web page layouts Photoshop CS2

Organizing images Adobe Bridge

Optimizing images Photoshop CS2 or ImageReady CS2

Slicing simple images Photoshop CS2 or ImageReady CS2

Slicing complex images, editing slices, ImageReady CS2or using slices for rollovers

Creating rollovers ImageReady CS2

Creating image maps ImageReady CS2

Creating animated GIFs Photoshop CS2 or ImageReady CS2

Creating Web photo galleries Adobe Bridge

Now that you’ve had a chance to see what Photoshop CS2 and ImageReady CS2 are all about, it’stime to get started with the hands-on exercises. In the chapters that follow, you’ll learn practical tech-niques for using Photoshop CS2 and ImageReady CS2 to design Web graphics and content. Enjoy! ;-)

01 PSCS2_HOT(2-9).qxd 05/13/2005 11:46 AM Page 9