How do I set up pages in Photoshop 6 and 7 using SiteGrinder Tools?
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 using the SiteGrinder Tools page definer.
(If you have Photoshop CS or later you can also use layer comps to set up pages. Click here to find out how.)
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 Page Definition named "contact-page" that had each layer you want to display visible.
Here is how it's done starting with a new empty document in Photoshop:
- Create a text layer and type "Apples" into it.
- Change its name to "Apples-button"
- Create another text layer and type "Oranges" into it
- Change its name to "Oranges-button"
- Create a new graphic layer and draw a red circle in it
- Create a new graphic layer and draw an orange circle in it
- Hide the orange circle and select "SiteGrinder Tools" from Photoshop's File->Automate menu
- Type "Apples" into the New Page Name text box, click the "New" button, and close SiteGrinder Tools
- Hide the red circle layer and show the orange circle layer and open SiteGrinder Tools again
- Type "Oranges" into the New Page Name text box, click the "New" button, and close SiteGrinder Tools
- Save the file and open SiteGrinder from Photoshop's File->Automate menu
- 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 orange and red circle 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.