Designing Multiple Pages in a Single File

Here's an efficient way to design a whole site full of pages in a single file. Use layer comps to create multiple page designs in one file. Then save time by using slice sets to slice pages that are similar.

1.	Open the Layer Comps Palette Before you start, take a look at the sidebar on this page to learn how you'll use layer comps in this project. Begin in ImageReady with a basic Web page design A. Notice that there are some additional layers in the Layers palette that don't have an Eye icon to their left. These layers are currently not visible in the document window. They'll be used later in the project as you create content for the individual pages in this Web site and record the state of each page as a separate layer comp. INSIGHT Using Layer Comps in Web Design. A layer comp is a snapshot of the state of a file's layers. A file can have multiple layer comps, each of which records layers' visibility, position, and appearance at a point in time. In this project, you'll use layer comps to design multiple pages for a Web site within a single file. The home page has one navigation scheme, and the three inner pages share another navigation scheme. The resulting pages offer several advantages over designing a site's pages one by one: The pages are visually consistent, which is a hallmark of good Web design. You don't have to slice each page separately. Instead, similarly structured pages can share a slice set. You can present all the page designs to a client in one PSD file. Open ImageReady's Layer Comps palette by choosing Window>Layer Comps. The Last Document State at the top of the palette is a snapshot of the most recent state of the layers in the image. You can return to that state at any time by clicking in the Apply Layer Comp field to the left of the Last Document State B.
2.	Make the Home Page Layer Comp The home page of the site you're creating will include the artwork that's currently visible in the document window, plus some text links. Click the Eye icon to the left of the TextLinks layer set in the Layers palette A to make the text links visible B. Now you'll make a layer comp that is a snapshot of this home page design. Click the Create New Layer Comp button at the bottom of the Layer Comps palette C. In the New Layer Comp dialog box that opens D, name this layer comp Home. Check Visibility and Position— the two properties of this layer that you want the program to keep track of. You can type some notes into the Comment field about this layer comp if you wish. Click OK to create the Home layer comp in the Layer Comps palette. Design the Colors Page This site has three inner pages—the colors page, the hues page, and the shades page. In this step you'll design the colors page by changing the visibility and position of some of the layers. Click in the Visibility field of the Buttons layer set in the Layers palette A to display an Eye icon. A set of navigation buttons appears on the left side of the image B. Next, click the arrow to the left of the TopNav layer set C to open that layer set, and click in the Visibility field of the ColorsMarker layer to add an Eye icon there D. A marker appears on the Colors link in the navigation bar at the top of the image E. Finally, select the Move tool in the toolbox and click the Move tool icon in the Options bar F. Select the TextLinks layer set in the Layers palette G. Hold down the Shift key to constrain vertical movement, and drag the text links to the left until they are on top of the buttons B. Create the Colors Layer Comp Now you'll make a second layer comp-—a snapshot of layer visibility, position, and appearance in the colors page you just designed. Click the Create New Layer Comp button at the bottom of the Layer Comps palette A. In the New Layer Comp dialog box B, name this layer comp Colors. Check Visibility, Position, and Appearance. (Appearance includes layer styles, layer blending modes, and layer opacity.) You can type notes into the Comment field if you wish. Then click OK. You'll see a new Colors layer comp in the Layer Comps palette. If you click the arrow to the left of the layer comp C you'll see the comments you entered in the New Layer Comp dialog box. TIP Layer Comp Properties. We often leave all three layer properties— Visibility, Position, and Appearance— checked in the New Layer Comps dialog box, even if we're not sure we need to include all of these properties in a layer comp. That way our bases are always covered. Design the Hues Page The hues page is another inner page of this site. It is similar in structure and content to the colors page. The only difference is that the Hues marker is visible and the Colors marker is not visible on the hues page A. To set up the hues page, click in the Visibility field of the HuesMarker layer in the Layers palette to add an Eye icon there. Then click in the Visibility field of the ColorsMarker layer to turn off that Eye icon B.
6.	Create the Hues Page Layer Comp Now you'll make a layer comp of the hues page you designed in the last step. Click the Create New Layer Comp button at the bottom of the Layer Comps palette A. In the New Layer Comp dialog box B, name this layer comp Hues. Check Visibility, Position, and Appearance, and add a comment if you wish. Click OK to create the Hues layer comp in the Layer Comps palette. Design the Shades Page Now you'll design the final page—the shades page, which is another inner page with the same structure as the colors and hues pages. In the Layers palette, click in the Visibility field of the ShadesMarker layer to add an Eye icon there A. Then click in the Visibility field of the HuesMarker layer to turn off its Eye icon B. There's now a marker on the Shades link in the navigation bar at the top of the image C. Create the Shades Layer Comp To create a layer comp for the shades page, click the Create New Layer Comp button at the bottom of the Layer Comps palette A. In the New Layer Comp dialog box B, name this layer comp Shades. Check Visibility, Position, and Appearance, and add a comment if you wish. Click OK to create the Shades layer comp in the Layer Comps palette.   View the Layer Comps View each of the layer comps by clicking in the Apply Layer Comp field to the left of each layer comp A. Alternatively, click the Previous and Next icons at the bottom of the Layer Comps palette to cycle through the layer comps B. (This is a good way to quickly show a client all of your page designs in a single file.) CAUTION Viewing Layer Comps. Don't make the mistake of trying to view a layer comp by clicking on the layer comp in the Layer Comps palette. That just selects the layer comp for editing. To view a layer comp in the document window, click in the Apply Layer Comp field to the left of the layer comp. If one of the designs does not look as expected, click on its layer comp in the Layer Comps palette to select that layer comp C. Edit the image. Then click the Update Layer Comp icon at the bottom of the Layer Comps palette D. When you're satisfied, choose File>Save As to save the image with all of its layer comps. CAUTION Nonreversible Edits. If you make a nonreversible change to an image (like deleting a layer, merging layers, or changing image modes) you'll see a yellow triangle in the layer comps affected by that change. You have three options: Update the layer comps by selecting each one and clicking the Update Layer Comp icon at the bottom of the Layer Comps palette. Control/right-click the warning icons and choose a removal option. This deletes the warnings. However, it can result in unexpected changes to the layer comps. Open the History palette (Window>History) and choose a previous history state to undo the nonreversible changes.
10.	Slice the Home Page Layer Comp Now you'll begin slicing up the image, so that each of the navigation graphics (the text links, markers, and buttons) can be saved as a separate GIF or JPEG. This will allow you to assign a separate URL link to each navigation graphic in a Web site–building program like Dreamweaver or GoLive. You'll start by slicing the home page, which has different navigation graphics than the other three pages. Click in the Apply Layer Comp field to the left of the Home layer comp A to display that layer comp in the document window. In the Layers palette, click the arrow to the left of the TextLinks layer set to open that layer set. Click on the Link1 layer; then hold down the Shift key and click on the Link4 layer to select all the text link layers B. Choose Layer>New Layer Based Slices from the menu bar at the top of the screen to create a separate slice around each of the text links C.     Now select the HuesMarker layer in the Layers palette. Hold down the Shift key and click on the ShadesMarker layer. This selects the three marker layers D. Choose Layer>New Layer Based Slices from the menu bar to create slices around each of the navigation markers in the top navigation bar E.   Create Slice Set 1 Open the Web Content palette (Window>Web Content), where you'll see all of the slices you just made. Click on the top slice in the palette; then hold the Shift key and click on the bottom slice to select all the slices. Click the Create New Slice Set button at the bottom of the Web Content palette A. This creates Slice Set 1 B which contains all of the slices indented beneath it. INSIGHT Slice Sets and Layer Comps. Slice sets are designed to be used in conjunction with layer comps. A slice set is a collection of slices that can be applied to multiple layer comps. This means that if you have several layer comps that have the same structure (like the three inner pages In this project) you can slice just one of those layer comps, save the result as a slice set, and use that same slice set to automatically slice the other similar pages. Slice the Colors Layer Comp Now you'll slice the buttons that appear only on the inner pages. Click in the Apply Layer Comp field to the left of the Colors layer comp A. In the Layers palette, open the Buttons layer set. Shift-click to select the four button layers B. Choose Layer>New Layer Based Slices from the menu bar at the top of the screen to create four button slices C.   Make Another Slice Set In the Web Content palette, Shift-click to select all the button slices. Click the Create New Slice Set icon at the bottom of the Web Content palette to create Slice Set 2 A, which contains only the button slices. You don't have to slice any of the other pages you've designed! Save Each Page We've already optimized for you, so you can go ahead and save each layer comp using the relevant slice sets. You'll start by saving the Colors layer comp. Make sure both slice sets display an Eye icon in the Web Content palette A, B. Click the Apply Layer Comp icon on the Colors layer comp. Choose File/Save Optimized As. Then set Format/Save As Type to HTML and Images. Make a new folder for the colors page output, and click Save. Repeat this step for the Hues and the Shades layer comps, making a separate output folder for each.   Turn off the Eye icon on Slice Set 2 C (because the home page doesn't need the button slices) and repeat this step on the Home layer comp. Choose File>Save to resave the PSD file with its slice sets. In the output folders on your hard drive you'll find an HTML file for each page and a folder of images generated by only the slices that relate to that page. Open each HTML page in a Web browser to admire your work.

In this tutorial:

1. Automation
2. Batch Processing Photo Thumbnails
3. Making the Most of Actions
4. Making Multiple Web Graphics
5. Demystifying Droplets
6. Preparing Photos for Web with Conditional Actions
7. Design Multiple Pages in a Single File
8. Linking HTML Pages from Layer Comps
9. Outputting Multiple Linked Web Pages
10. Creating Dynamic Flash Web Banners
11. Creating and Importing External Data Sets