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

Transcription

1 1.Getting Started Adobe Photoshop CS2 for the Web H O T 1 Getting Started Creating Web Graphics in Photoshop CS2 and ImageReady CS2 When to Use Photoshop CS2 vs. When to Use ImageReady CS2 This chapter offers an overview of the Web features in Photoshop CS2 and ImageReady CS2. Here you ll find ideas for the kind of Web graphics you can create with these programs, advice on when to use each program, and an introduction to new Web features in Photoshop CS2 and ImageReady CS2. The information in this chapter builds a foundation for what you ll learn in the hands-on exercises in the chapters that follow. chap_01 PCS2Web HOT CD-ROM 2

2 Adobe Photoshop CS2 for the Web H O T 1.Getting Started Creating Web Graphics in Photoshop CS2 and ImageReady CS2 You can use Photoshop CS2 and ImageReady CS2 to create a variety of images for the Web. This section lists some examples of the kinds of Web graphics and content you can create. You ll get a chance 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 in Photoshop CS2 or ImageReady CS2 is great for Web buttons or banners that require fancy fonts or special type effects. 3

3 1.Getting Started Adobe Photoshop CS2 for the Web H O T Optimize images for the Web: Learn techniques for optimizing photographs, logos, and graphic images in Chapter 7, Optimizing Images. Create Web backgrounds: Create symmetrical and nonsymmetrical background images, define images as background images, and save the required HTML code to make background images work in a Web browser in Chapter 8, Creating Web Backgrounds. 4

4 Adobe Photoshop CS2 for the Web H O T 1.Getting Started Design effective navigation: Learn how to create unique Web buttons, navigation bars, tabbed navigation, 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 Photoshop CS2 in Chapter 11, Creating Animated GIFs. Slice: Slice images, edit slices, optimize slices, and save the required HTML code to make sliced images work in a Web browser in Chapter 12, Slicing. 5

5 1.Getting Started Adobe Photoshop CS2 for the Web H O T Create rollovers: Create simple Web buttons with rollovers, remote rollovers, and selected states, and save 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 to make image maps work in a Web browser in Chapter 14, Creating Image Maps. 6

6 Adobe Photoshop CS2 for the Web H O T 1.Getting Started Create Web photo galleries: Create Web photo galleries to display images. Photoshop CS2 automatically creates all the elements for the Web site, optimizes the images, writes the HTML code, and designs the navigation buttons. Assemble Web photo galleries in Chapter 15, Creating Web Photo Galleries. 7

7 1.Getting Started Adobe Photoshop CS2 for the Web H O T When to Use Photoshop CS2 vs. When to Use ImageReady CS2 When you re creating Web graphics, when should you use Photoshop CS2 and when you should use ImageReady 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 simple Web graphics such as Web buttons and background images. Performing complex image-editing tasks: Use Photoshop CS2 to perform complex imageediting 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 finished designing the layout, you can always jump to ImageReady CS2 to create rollovers or animations and 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, ImageReady CS2 gives you better access to the original image if you want to make changes during the optimization process. Slicing images: Use ImageReady CS2 when you re slicing an image. Although Photoshop CS2 gives you access to the slice tools, you don t have access to the Slice, Table, or Web Content palettes, 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 the JavaScript and HTML code required to make the rollovers work in a Web browser. Although Photoshop 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. ImageReady CS2 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 and save animations as animated GIFs. The animation features new to Photoshop CS2 are identical to those found in ImageReady CS2. Creating Web photo galleries: Use Photoshop CS2 or Adobe Bridge if you want to create a Web photo gallery from a series of images. 8

8 Adobe Photoshop CS2 for the Web H O T 1.Getting Started Don t worry if you re still unsure about which program to use when. You ll get hands-on experience completing all these tasks in the appropriate program as you work through the book. Plus, you can always glance back at the following handy reference chart. When to Use Photoshop CS2 vs. When to Use ImageReady CS2 Task Creating simple Web graphics such as buttons or backgrounds Performing complex image-editing tasks such as retouching and manipulating photographs or creating collages Designing navigation or full Web page layouts Organizing images Optimizing images Slicing simple images Slicing complex images, editing slices, or using slices for rollovers Creating rollovers Creating image maps Creating animated GIFs Creating Web photo galleries Program Photoshop CS2 or ImageReady CS2 Photoshop CS2 Photoshop CS2 Adobe Bridge Photoshop CS2 or ImageReady CS2 Photoshop CS2 or ImageReady CS2 ImageReady CS2 ImageReady CS2 ImageReady CS2 Photoshop CS2 or ImageReady CS2 Adobe Bridge Now that you ve had a chance to see what Photoshop CS2 and ImageReady CS2 are all about, it s time to get started with the hands-on exercises. In the chapters that follow, you ll learn practical techniques for using Photoshop CS2 and ImageReady CS2 to design Web graphics and content. Enjoy! ;-) 9