For detailed instructions, click the links below. To ask questions, request features, or report problems, visit

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. (See Layers and Slicing web pages.)

  • Use layer comps to experiment with different page compositions or to export variations of a page. (See Layer comps.)

  • Create rollover text or button graphics to import into Dreamweaver or Flash.

  • Create web animations with the Animation panel, then export them as animated GIF images or QuickTime files. See Creating frame animations.

  • Use Adobe Bridge to create a web photo gallery to quickly turn a set of images into an interactive web site, using a variety of professional-looking templates.

For a video on designing web sites with Photoshop and Dreamweaver, see Access Photoshop from Dreamweaver to enhance web image.

Creating rollover images

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.

  • 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.

  • Use preset button styles from the Styles panel 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.

  • Use the Save For Web & Devices dialog box to save rollover images in a web-compatible format and with an optimized file size. See Optimizing images.


When you save rollover images, use a naming convention to distinguish the primary (non-rollover state) image from the secondary (rollover state) image.

After creating a rollover image set in Photoshop, use Dreamweaver to place the images on a web page and automatically add the JavaScript code for the rollover action.

Export to Zoomify

You can post high-resolution images on the web that viewers can pan and zoom to see more detail. The basic-size image downloads in the same time as an equivalent size JPEG file. Photoshop exports the JPEG files and HTML file that you can upload to your web server.

  1. Choose File > Export > Zoomify and set export options.


    Sets the background and navigation for the image viewed in the browser.

    Output Location

    Specifies the location and name of the file.

    Image Tile Options

    Specifies the quality of the image.

    Browser Options

    Sets the pixel width and height for the base image in the viewer’s browser.

  2. Upload the HTML and image files to your web server.

Working with hexadecimal color values

Photoshop can display the hexadecimal values of image colors or copy a color’s hexadecimal value for use in an HTML file.

View hexadecimal color values in the Info panel

  1. Choose Window > Info or click the Info panel tab to view the panel.
  2. Choose Panel Options from the panel menu. Under First Color Readout or Second Color Readout, choose Web Color from the Mode menu and click OK.
  3. Position the pointer over the color for which you want to view hexadecimal values.

Copy a color as a hexadecimal value

Photoshop copies colors either as an HTML COLOR attribute containing the hexadecimal value (color=#xxyyzz), or as the hexadecimal value alone.

  1. Do one of the following:
    • With the Eyedropper tool, move the pointer over the color that you want to copy. Right-click (Windows) or Control‑click (Mac OS), and choose Copy Color As HTML or Copy Color’s Hex Code.

    • Set the foreground color using the Color panel, the Swatches panel, or the Adobe Color Picker. From the Color panel menu, choose Copy Color As HTML or Copy Color’s Hex Code.

    • In the Save For Web dialog box, click the color swatch or choose Matte > Other. In the Adobe Color Picker, right-click the hexadecimal value, and choose Copy.

  2. Open the desired file in an HTML editing application, and choose Edit > Paste.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy