How do I set up pages in Photoshop CS using layer comps?

Buttons and menus are all very useful, but a web site needs content to have a purpose. (Celebrity fan sites not included!) This example shows you the simple technique for specifying which content layers appear on which pages of your site.

The new "layer comp" feature of Photoshop CS is the easiest way to specify content that goes only on particular pages. (Users of Photoshop 6 or 7 should look at this example instead.)

If you use Photoshop CS but are unfamiliar with the new layer comp feature click here for information on how to use them.

SiteGrinder by default creates pages named after any buttons that don't have "-link" layers associated with them. To specify layers that should appear only on a specific page, you create a layer comp named after the button with a "-page" hint and then show the layers unique to that page only in that layer comp. For example from a button named "Contact-button" SiteGrinder will automatically create an html page named "contact" (the HTML file will be named "contact.html"). To specify content unique to that page you would create a layer comp named "contact-pg" that had each layer you want to display visible.

Here is how it's done starting with a new empty document in Photoshop:

  1. Create a text layer and type "Apples" into it.
  2. Change its name to "Apples-button"
  3. Create another text layer and type "Oranges" into it
  4. Change its name to "Oranges-button"
  5. Create a new graphic layer and draw a red circle in it
  6. Create new layer comp called "Apples-page"
  7. Hide the red circle layer
  8. Create a new graphic layer and draw an orange circle in it
  9. Create a new layer comp called "Oranges-page"
  10. Save the file and open SiteGrinder from Photoshop's File->Automate menu
  11. Click the "Build" button. You're done!

That's it! Sitegrinder has now created two HTML web pages each with a menu for jumping to the others and each with some page-specific content. Click here to see the pages SiteGrinder created and be sure to click on the buttons to see the content layers change.

Notice that the content layers didn't need any special hints in their layer names. Being visible in the layer comp was enough. Layers that have no hints (like "-button" or "-rollover") and that are visible in all layer comps will become visible non interactive elements on every page that SiteGrinder builds from this Photoshop document.