Designing Web pages with Photoshop and ImageReady

When designing Web pages using Photoshop and ImageReady, keep in mind the tools and features that are available in each application.
* Photoshop provides tools for creating and manipulating static images for use on the Web. You can divide an image into slices, add links and HTML text, optimize the slices, and save the image as a Web page.
* ImageReady is designed for professional Web page layout. You can more easily work with layers as if they were independent objects: selecting, grouping, aligning, and arranging them. In addition, ImageReady includes tools and palettes for advanced Web processing and creating dynamic Web images like animations and rollovers.

The graphics tools and features in Photoshop and ImageReady simplify most Web design tasks:

Page design

In ImageReady, preset document sizes for pages and banners, grids, guidelines, and smart guides simplify page layout. Both Photoshop and ImageReady let you add content to layouts using the text, drawing, and painting tools. In ImageReady, you can arrange and align content using layers, layer sets, and grouped layers. To experiment with different page compositions or to export variations of a page, use the Layer Comps palette. See About layer comps and the Layer Comps palette.

Slices

When your page composition is ready for output to the Web, both Photoshop and ImageReady provide the Slice tool to let you divide page layouts or complex graphics into areas and specify independent compression settings (and smaller file sizes). (See Creating and viewing slices.)

Rollovers

The Web Content palette in ImageReady enables you to track slices and their rollover states. For example, you can create a button for a Web page that glows whenever the user moves the pointer over it, and you can manage the button states and activities in those states. (See About slices.)

Animations

For creating simple Web animations, ImageReady provides the Animation palette, giving you the ability to determine, frame by frame, the appearance of an animation that can be exported as an animated GIF or SWF file. You can create animation in conjunction with sets of slices, nested tables, percentage width tables, and remote rollovers, where you mouse over one image and a different image changes.

Export and image optimization

When your page or graphic is ready for final export, the Save For Web dialog in Photoshop and the Optimization palette in ImageReady enables you to precisely determine how the page or graphic should be exported. Additionally, you can export an HTML file with the actual images. This text file instructs a browser how to properly display exported images and rollover effects. (See Setting HTML output options.)

Note: You can preview most Web effects directly in Photoshop or ImageReady. However, the appearance of an image on the Web depends on the operating system, color display system, and browser used to display the image. Be sure to preview images and pages in different browsers, on different operating systems, and with different color bit depths. (See Previewing an image in a browser.) Remote rollovers are best previewed in a browser.

Preparation in Adobe GoLive

Additionally, Photoshop and ImageReady files can be opened directly in Adobe GoLive. Slices, URLs, and other Web features in Photoshop files are accessible in GoLive for management and editing. For more information on using GoLive, see the Adobe GoLive User Guide.

Automating the workflow

Photoshop and ImageReady have a robust system that enables you to automate repetitive tasks. For example, ImageReady droplets allow designers to quickly convert a batch of images into a Web-ready format. (See Automating Tasks.)