1. this chapter offers an overview of the...

| 2 |

This chapter offers an overview of the Web features in Photoshop CS and ImageReady

CS. 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 CS andImageReady CS. The information inthis chapter builds a foundation forwhat you’ll learn in the hands-onexercises in the chapters that follow.

1.Getting Started

| Creating Web Graphics in Photoshop CS and ImageReady CS |

| When to Use Photoshop CS Versus When to Use ImageReady CS |

| What’s New in Photoshop CS and ImageReady CS? |

chap_01

Photoshop CS/ImageReady CS H•O•T CD-ROM

1.Getting Started | Photoshop CS/ImageReady CS for the Web H•O•T

018553_ch01 12.05.03 12:26 PM Page 2

| 3 |

Creating Web Graphics in Photoshop CS and ImageReady CSYou can use Photoshop CS and ImageReady CS to create a variety of images for the Web. This sec-tion lists some examples of the kinds of Web graphics and content you can create. You’ll get a chanceto explore projects like the following in the chapters to come.

Photographs: Optimize photographs for the Web in Chapter 4, “Optimization.”

Logos and graphics: Create vector-based shapes in Chapter 7, “Shapes and Layer Styles.” Choosecolor and recolor images in Chapter 3, “Color.” Optimize logos and graphic art in Chapter 4,“Optimization.”

Photoshop CS/ImageReady CS for the Web H•O•T | 1.Getting Started

018553_ch01 12.05.03 12:26 PM Page 3

| 4 |

Macromedia Flash: Export static files as Macromedia Flash files in Chapter 4, “Optimization.” Exportanimations as Macromedia Flash files in Chapter 13, “Animated GIFs and Flash.”

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


018553_ch01 12.05.03 12:26 PM Page 4

| 5 |

Background images: Create symmetrical and nonsymmetrical background images using the offset filter, define images as background images, and save the required HTML code to make backgroundimages work in a Web browser in Chapter 8, “Background Images.”

Slices: Slice images, edit slices, and save the required HTML code to make sliced images work in aWeb browser in Chapter 10, “Slicing.”


018553_ch01 12.05.03 12:26 PM Page 5

| 6 |

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

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


018553_ch01 12.05.03 12:26 PM Page 6

| 7 |

Animations: Create animated Web buttons and graphics using the animation features in ImageReadyCS. Save animations as animated GIFs and export animations as Macromedia Flash files in Chapter13, “Animated GIFs and Flash.”

Web photo galleries: Create Web photo galleries to display images. Photoshop CS automatically creates all the elements for the Web site, and it optimizes the images, writes the HTML code, anddesigns the navigation buttons. Assemble Web photo galleries in Chapter 14, “Automation.”

When to Use Photoshop CS Versus When to Use ImageReady CSIt’s not always clear when you should use Photoshop CS and when you should use ImageReady CSto create Web graphics. Although Photoshop CS and ImageReady CS have many common features,there are many features exclusive to each program. Here are some recommendations:

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

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


018553_ch01 12.05.03 12:26 PM Page 7

| 8 |

• Designing full Web page layouts: Use Photoshop CS to create full Web page layouts. PhotoshopCS has more advanced image-editing and creation tools. When you’re finished designing the layout,you can always jump to ImageReady CS to create rollovers or animations and save the requiredJavaScript or HTML code required to make the Web page work.

• Organizing images: Use the File Browser in Photoshop CS when you want to organize, sort, or key-word images.

• Optimizing images: Use the program you have open at the time. The Save For Web window inPhotoshop CS is similar to the Optimize palette in ImageReady CS; however, ImageReady CS givesyou better access to the original image if you want to make changes during the optimization process.

• Exporting images as Macromedia Flash files: Use ImageReady CS if you want to export staticimages to the Macromedia Flash (SWF) format. The Macromedia Flash Export feature is only availablein ImageReady CS.

• Slicing images: Use ImageReady CS when you’re slicing an image. Although Photoshop CS givesyou 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 CS to create rollovers. ImageReady CS gives you access tothe Web Content palette and all the controls you need to create rollovers. It also writes the requiredJavaScript and HTML code required to make the rollovers work in a Web browser. AlthoughPhotoshop CS does not have the features for creating rollovers, you can design the artwork inPhotoshop CS and use ImageReady CS to create and save the rollovers.

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

• Creating animated GIFs and Macromedia Flash animations: Use ImageReady CS if you want tocreate and save animations as animated GIF or Macromedia Flash (SWF) files. Although you can’tbuild animations in Photoshop CS, you can create artwork in Photoshop CS, then build and save theanimations in ImageReady CS.

• Creating Web photo galleries: Use Photoshop CS if you want to create a Web photo gallery from aseries of images.

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.


018553_ch01 12.05.03 12:26 PM Page 8

| 9 |


When to Use Photoshop CS Versus When to Use ImageReady CS

Task Program

Creating simple Web graphics such as buttons or backgrounds Photoshop CS or ImageReady CS

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

Designing full Web page layouts Photoshop CS

Organizing images Photoshop CS

Optimizing images Photoshop CS or ImageReady CS

Exporting images as Macromedia Flash files ImageReady CS

Slicing simple images Photoshop CS or ImageReady CS

Slicing complex images, editing slices, ImageReady CS or using slices for rollovers

Creating rollovers ImageReady CS

Creating image maps ImageReady CS

Creating animated GIFs and Macromedia Flash animations ImageReady CS

Creating Web photo galleries Photoshop CS

018553_ch01 12.05.03 12:26 PM Page 9

New Features in Photoshop CS and ImageReady CS

Feature Description

Welcome Screen Photoshop CS and ImageReady CS each prompt you with aWelcome Screen when you first launch the program.

The Welcome Screen provides quick access to informationabout new features, color management, tutorials, movies, andmore. You’ll see how the Welcome Screen works in Chapter 2,“Interface.”

Customizable keyboard Photoshop CS lets you assign new keyboard shortcuts and shortcuts redefine existing keyboard shortcuts for menu items, tools, and

palette commands in an easy-to-use interface. You can save dif-ferent sets of keyboard shortcuts for different workflows andprint a list of keyboard shortcuts for future reference. You’ll learnhow to customize keyboard shortcuts in Chapter 2, “Interface.”

| 10 |

What’s New in Photoshop CS and ImageReady CS?Photoshop CS and ImageReady CS have a number of new features to make it easier for you to designand output Web graphics. Here is a handy chart to help you identify some of the key new features inPhotoshop CS and ImageReady CS you’ll learn about in this book. For a complete list of new features,visit http://www.adobe.com/photoshopcs.


continues on next page

018553_ch01 12.05.03 12:26 PM Page 10

| 11 |


New Features in Photoshop CS and ImageReady CS continued

Feature Description

Enhanced File Browser Photoshop CS provides an enhanced File Browser that lets youorganize, sort, rename, rotate, preview, and flag images.

You can also apply keywords and metadata to images throughthe File Browser and search for images using the keywords andmetadata. The File Browser offers a number of automation tasksfor creating Web photo galleries, multipage PDFs, PDF presen-tations and contact sheets, and batch processing images. You’lllearn how to use the File Browser in Chapter 2, “Interface.”

Color Replacement tool Photoshop CS lets you change the color of an entire image orarea of an image using the Color Replacement tool. The ColorReplacement tool recolors images while keeping the originaltexture and shading of the original. You’ll learn how to use theColor Replacement tool in Chapter 3, “Color.”


018553_ch01 12.05.03 12:26 PM Page 11

| 12 |



Feature Description

Export to Macromedia Flash ImageReady CS lets you export layers, files, animations, andframes as Macromedia Flash (SWF) files.

When you export files, ImageReady CS preserves vector objects and text as native SWF information. You’ll learn how use the Macromedia Flash Export feature in Chapter 4,“Optimization,” Chapter 5, “Layers,” and Chapter 13, “Animated GIFs and Flash.”

Web-focused Interface ImageReady CS has a Web-focused interface that lets youselect, manipulate, copy, and group objects quickly and easily.You can execute layer commands over multiple layers and apply font settings to multiple type objects at the same time.You’ll learn how to work with multiple objects and layers inChapter 5, “Layers.”


018553_ch01 12.05.03 12:26 PM Page 12

| 13 |



Feature Description

Nested layer sets Photoshop CS and ImageReady CS let you group layers intonested layer sets up to five levels deep.

Nesting layer sets is a great way to keep complex, layeredimages organized. You’ll learn how to nest layer sets in Chapter 5, “Layers.”

Layer Comps Photoshop CS and ImageReady CS let you record any combi-nation of layer visibility, position, and appearance using the newlayer comps feature.

Layer comps make it easy to create multiple layouts for a Website in a single file and allow you to create alternate designs forclient review and approval. You’ll learn how to use layer comps inChapter 5, “Layers.”


018553_ch01 12.05.03 12:26 PM Page 13

| 14 |



Feature Description

Export layers and ImageReady CS lets you export layers and animation frames frames as files as files.

You can export all layers in a file, top level layers and layer sets,or selected layers. You also export all layers using the same fileformat or specify a file format and individual optimization set-tings for each file. You can also export frames or selectedframes in an animation as individual files. You can export layersand frames to a number of file formats, including MacromediaFlash (SWF) files. You’ll learn how to export layers as files inChapter 5, “Layers,” and how to export animation frames as filesin Chapter 13, “Animated GIFs and Flash.”

Type on a path Photoshop CS lets you create type on an open path or on a closed shape.

You’ll learn how to create type on a path in Chapter 6, “Type.”


018553_ch01 12.05.03 12:26 PM Page 14

| 15 |



Feature Description

Web Content palette ImageReady CS includes a new Web Content palette that makesit easy to create and edit slices, rollovers, and image maps.

You’ll learn how to use the Web Content palette in Chapter 10,“Slicing,” Chapter 11, “Rollovers,” and Chapter 12, “Image Maps.”

Slice sets ImageReady CS lets you create multiple slice sets in a singledocument. You can create multiple configurations of a Web sitein the same file and use slice sets to slice each configuration.You’ll learn how to use slice sets in Chapter 10, “Slicing.”

Enhanced remote rollovers ImageReady CS has a new workflow for creating remote rollovers.

The new click-and-drag targeting method lets you create remote rollovers in a snap! You’ll learn how to create remoterollovers in Chapter 11, “Rollovers.”


018553_ch01 12.05.03 12:26 PM Page 15

| 16 |



Feature Description

Export multiple HTML files ImageReady CS lets you export multiple HTML files for eachfrom selected states selected state. You’ll learn how in Chapter 11, “Rollovers.”

Collaborative Web photo Photoshop CS lets you create Web photo galleries from galleries images in the File Browser.

The new collaborative templates allow feedback from clients,colleagues, and friends with no extra HTML coding required!You’ll learn how to create collaborative Web photo galleries inChapter 14, “Automation.”

PDF presentations and Photoshop CS lets you create PDF presentations and multipage PDFs multipage PDFs. You’ll learn how to do both in

Chapter 14, “Automation.”


018553_ch01 12.05.03 12:26 PM Page 16

| 17 |

Now that you’ve had a chance to see what Photoshop CS and ImageReady CS 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 CS and ImageReady CS to design Web graphics and content. Enjoy! ;-)



Feature Description

Conditional actions ImageReady CS lets you insert a conditional step into an action. When you play the action, ImageReady CS will scan forthe characteristics you specified in the conditional action andperform a step only if the characteristics match the settings inthe conditional action. You’ll learn how to create conditionalactions in Chapter 14, “Automation.”

Import data sets from ImageReady CS lets you import data sets from spreadsheets text files and databases as tab-delimited or comma-delimited text files.

You’ll learn how to do both in Chapter 15, “Data Sets.”

018553_ch01 12.05.03 12:26 PM Page 17

1. this chapter offers an overview of the...

Documents