Chapter 17: Web Graphics; Working With Web Graphics - Adobe 13102498 - Photoshop CS3 - Mac User Manual

Chapter 17: Web graphics

The web tools in Adobe Photoshop CS3 can help you design and optimize individual web graphics or complete page
layouts. Use the Slice tool to divide a graphic or page into seamlessly interlocking pieces and apply different
compression and interactivity settings to each segment. The Save For Web & Devices dialog box lets you preview
different optimization settings and adjust color palette, transparency, and quality settings before saving in several
web-compatible formats.

Working with web graphics

About web graphics
The Photoshop web tools make it easy to build component pieces for your web pages or to output complete web pages
in preset or customized formats.
• Use layers and slices to design web pages and web page interface elements.
• Use layer comps to experiment with different page compositions or to export variations of a page.
• Create rollover text or button graphics to import into Dreamweaver or Flash.
• Create web animations with the Animation palette, then export them as animated GIF images or QuickTime files.
See "Creating frame animations" on page 564.
• Use the Web Photo Gallery feature to quickly turn a set of images into an interactive web site, using a wide variety
of professional looking site templates. See "Creating web photo galleries" on page 516.
For a video on designing web sites with Photoshop and Dreamweaver, see www.adobe.com/go/vid0200.
Creating rollovers
A rollover is a button or image on a web page that changes when the mouse is over it. To create a rollover, you need
at least two images: a primary image for the normal state and a secondary image for the changed state.
Photoshop provides a number of useful tools for creating rollover images:
• Use layers to create primary and secondary images. Create content on one layer, then duplicate the layer and edit
it to create similar content while maintaining alignment between layers. When creating a rollover effect, you can
change the layer's style, visibility or position, make color or tonal adjustments, or apply filter effects. See "Duplicate
layers" on page 281.
• You can also use layer styles to apply effects, such as color overlays, drop shadows, glow, or emboss, to the primary
layer. To create a rollover pair, turn the layer style on or off and save the image in each state. See "Layer effects and
styles" on page 297.
• Use preset button styles from the Styles palette to quickly create rollover buttons with normal, mouseover, and
mousedown states. Draw a basic shape with the rectangle tool and apply a style, such as Beveled Normal, to
automatically turn the rectangle into a button. Then copy the layer and apply other preset styles, like Beveled
Mouseover, to create additional button states. Save each layer as a separate image to create a finished rollover
button set.
505