SiteGrinder 2 ZeroToHeroGuide

SiteGrinder 2: Zero-To-Hero Guide
Learning SiteGrinder 2 from Beginner to Advanced
Contents
About This Guide ........................................................................................................................... 3 Getting Started ........................................................................................................................................... 3 Learning More............................................................................................................................................ 3 Before You Begin ...................................................................................................................................... 4 The Basics ...................................................................................................................................... 6 The Basic Idea and Workflow.................................................................................................................... 6 Initial Settings for your Photoshop Documents ....................................................................................... 10 Hints: How to tell SiteGrinder what you want it to do with layers .......................................................... 12 Your First Hint: Making styled web text using the "-text" hint ............................................................... 13 Adding hyperlinks to text layers .............................................................................................................. 15 Buttons and Popups.................................................................................................................... 19 Making an Image Button with a Hyperlink using the "-Button" hint....................................................... 19 Layer Name Matching and the -Rollover Hint......................................................................................... 21 Fun With Popups and Popdowns ............................................................................................................. 23 Text Buttons and Text Rollover Effects................................................................................................... 23 Image Compression: Making "Save for Web" work for you ................................................................... 26 Pages and Navigation Between Pages ...................................................................................... 28 Creating Multiple Pages........................................................................................................................... 28 Creating Button Navigation Between Pages ............................................................................................ 32 Page Workflow: When to define pages.................................................................................................... 34 The Last Document State: A special page................................................................................................ 34 The Pages Panel: How to determine which pages are built...................................................................... 35 Buttons, Pages, and "Cloned" Pages ........................................................................................................ 36 Page Backgrounds and Tiles .................................................................................................................... 38 Intermediate Techniques............................................................................................................. 40 Layer Management: Tricks for keeping track of everything .................................................................... 40 Adding Flash and Multimedia.................................................................................................................. 44 Using Hints With Layer Groups............................................................................................................... 47 Layer Group Buttons................................................................................................................................ 48 The Button Workflow and the Smart Layer Group Copy Tool................................................................ 49 Menus............................................................................................................................................ 50 Introduction to SiteGrinder Menus .......................................................................................................... 50 Introduction to Text menus ...................................................................................................................... 52 Horizontal Text Menus ............................................................................................................................ 52 Vertical Text Menus................................................................................................................................. 54 Layer Group Menus ................................................................................................................................. 56 Multilevel Dropdown Menus ................................................................................................................... 60 Advanced Techniques................................................................................................................. 65 Decorations .............................................................................................................................................. 65 Image Galleries ........................................................................................................................................ 66 Creating Flash Slideshows from Folders of JPEG Files .......................................................................... 71 Advanced Features For Exploration......................................................................................................... 74 Reference Guide .......................................................................................................................... 75 Complete List Of SiteGrinder Panels....................................................................................................... 75 SiteGrinder 2 Hints .................................................................................................................................. 98
About This Guide

Although SiteGrinder is designed to be the most simple, straightforward way to get Photoshop designs to the web, the sheer number of features and novelty of the process can be overwhelming to new users. This user guide is designed to help you learn the basics and then move on to more complex features.
Getting Started
Most of the work required to build a web site with SiteGrinder is actually done in Photoshop, so if you are an expert Photoshop user you are well on your way to learning how to use SiteGrinder. The following sections will help you learn how SiteGrinder and Photoshop work together, as well as how SiteGrinder can be used to add additional tweaks to your final web pages. The Basics This section goes over the most rudimentary features of SiteGrinder and walks you through the steps to build a simple web page with text, graphics, and links. The topics range from setting up your Photoshp file to building the page and viewing it in a browser. Buttons and Popups This section will teach you how to set up layers in your Photoshop file to create buttons and popups on your finished web pages. The chapter includes instructions for building both text and graphical buttons, as well as information on customizing image compression settings. Pages and Navigation Between Pages This section includes instructions for creating websites with multiple pages all from one Photoshop file. Intermediate Techniques This section includes tips on managing your layers in Photoshop and adding Flash and other multimedia to your websites. Menus This chapter will give you everything you need to know about setting up text and graphical menus in your Photoshop file. Advanced Techniques This chapter includes instructions on working with more advanced features of SiteGrinder such as setting up image galleries and creating slide shows. Reference Guide The reference guide includes information about the SiteGrinder Panels and SiteGrinder Hints.
Learning More
Additional SiteGrinder learning tools are available on our website: Links to all our many available learning resources are at: http://www.medialab.com/sitegrinder/learningcenter.html Training videos: http://www.medialab.com/sitegrinder/screenmovietutorials.html Free online training classes: http://www.medialab.com/sitegrinder/webtraining/
There are five videos about galleries alone, and many tutorials about building specific types of galleries linked from the learning center.
Before You Begin

Before you jump in, read the following two short sections which will give you some background information on how to work in SiteGrinder.
SiteGrinder and SiteGrinder Tools

When you install SiteGrinder, two items are added to Photoshop's Automate menu. SiteGrinder is the main SiteGrinder window. This is where you build pages. SiteGrinder Tools allows you to set up your file for SiteGrinder. See page 75.
Using The Report: Saving yourself time and confusion

Whenever you open the SiteGrinder plugin you will first see SiteGrinder's "Report" panel. The report tries very hard to alert you to problems or potential problems with your document. It can save you a lot of time to fix things that it flags before you try building. As you go through the tutorials, make sure to pay attention to what the report is telling you before you build. The report has three kinds of information:
Details about what SiteGrinder has found in your document in terms of buttons, menus, graphics, pages, etc. so you can verify that SiteGrinder will build as you expect. You'll find these by clicking on the "Details" and "Menus" buttons on the report page. Warnings. These are signified by a yellow triangle. Warnings are usually not going to cause major problems with the build, and they are often merely suggestions, or "just-in-case." For example if you use a dash in a layer name that's not followed by a hint, SiteGrinder will warn you just in case you were trying to use a hint it doesn't recognize. Errors. These are signified by a red stop sign and usually indicate more fundamental problems than warnings do.
After SiteGrinder builds your pages it will show you a post-build report that will present information about the build. Best Practice: If you have a lot of errors you can save the report as a web page for viewing in a browser after you close SiteGrinder. You can reference this while you fix the problems. The button to save the report is in the Control Panel, which you can access using the "Control Panel" button in the report Pane.
Different Build Styles

There are three different build styles which you select from the menu next to the Build button. 1. Preview. This builds complete graphics and pages to a temporary folder in the "SiteGrinderData" folder. As a complete build you can upload the results. The main convenience here is that you don't have to keep worrying about where your builds are going as you perform test builds. SiteGrinder takes care of that and can delete all of the preview builds at once if you want to clean them out using a button in the control panel. Access the control panel from the Report pane. 2. Lightning Build is for rapidly testing out text and navigation. The part of the build that takes the most time is creating the graphics files. Many times you will only need to test some text aspect of your page. This includes text styles, position, button function, and hyperlinks. The lightning build is very quick because it uses dummy graphics, but it builds the text accurately. For large sites with many graphics it is usually helpful to do a lightning build to check out everything you can before taking the time to do a full build. 3. To Folder. This is identical to Preview except that you specify a folder to build to. When you build to a folder SiteGrinder "does the right thing" when you have linked to files that are also contained in the build folder. When you build you may be presented with a dialog asking you if you want to build new graphics. If, since your last build, you have only fixed a hyperlink or made some other change that won't affect the graphics you can click "No." This will cause the build to be very quick because it will re-use the graphics from the previous build. If you have changed anything that would affect the graphics you should choose "Yes" here to regenerate your graphics.
The Basics
The Basic Idea and Workflow
SiteGrinder always starts with a Photoshop document. This document can be as simple as a single text or button layer that you want to test out in a browser, or it could have hundreds of layers which SiteGrinder will use to create a 20-page website with image galleries, forms, menus, etc.
SiteGrinder Work-Flow Step 1: The Photoshop File

Create or open a Photoshop file with one or more layers that you want to see on a web page. Key concept: For some layers, such as layers that should respond to the mouse, you tell SiteGrinder what to do with them by adding "hints" to the end of their layer names, preceded by a dash. To do this you just double click a layer's name in the layers palette and edit the name. You can see the "-text", "-menu", "-button", and "-popup" hints used in the document layers below:
SiteGrinder Work-Flow Step 2: Open SiteGrinder

Open SiteGrinder from Photoshop's file->automate menu.
Key Concept: When the SiteGrinder window is open you won't be able to use any of Photoshop's controls. To modify things in your Photoshop document you must first close SiteGrinder.
SiteGrinder Work-Flow Step 3: Check for Problems

When you first open SiteGrinder it shows you a report of any problems it discovered with your design. If there are errors you should close SiteGrinder and fix them before returning to this step. You can tell SiteGrinder to open the report in a browser so you can have it available as you fix any problems it found. To do this click the "Control Panel" button on the upper right of the window and click the "Save Report" button. Errors and Warnings also have links to relevant sections of the SiteGrinder documentation.
SiteGrinder Work-Flow Step 4. Change any SiteGrinder Settings

Some settings make more sense to control from SiteGrinder's user interface. The various panels in the SiteGrinder window let you set such things as:

Image compression and image file format Button links Text rollovers Page alignment, background color, and tile behavior Media import specifications
See page 75 for a complete reference to SiteGrinder's panels.
Clicking SiteGrinder's "Help" button will open a web page with information about the panel you are currently viewing.
SiteGrinder Work-Flow Step 5: Build!

When you click the "Build" button SiteGrinder will create whatever files are necessary to generate the web page(s) it thinks you want from the Photoshop file. Once SiteGrinder has finished it will open one of the pages in your default web browser allowing you to explore what it built. You can then return to Photoshop to correct any errors or continue to add new layers and pages. The default build type is "Preview." It builds all of the files to the "SiteGrinderData" directory in your home directory.
Summary: The SiteGrinder Cycle

Thus the most common SiteGrinder workflow is a cycle that looks like this:
Key Concept: One of the advantages to this workflow is that you can build and test at any time in the design process. If you aren't sure about a certain technique, for example, just create a new document, spend a few seconds adding some layers, and build just to see if the results are what you expect. Many of the SiteGrinder tutorials start from empty documents so you can see each step required to use some feature without distraction.
Initial Settings for your Photoshop Documents

Dimensions
There are a few guidelines for setting your dimensions:
If you are just building a temporary document to test out a feature or an idea (such as with many of the tutorials in this guide) the dimensions really don't matter as long as they are large enough for you to fit your test content in. Horizontally: Most users have monitors that display 800 pixels across horizontally, so 750 pixels is a pretty safe width accounting for scroll bar etc. Vertically: Make the document as tall as you expect the tallest page on your site to be. The browser will know where the lowest element on any particular page ends and take care of scrolling automatically.
10
Other Settings
The following additional document settings should be used:

Color Mode: RGB, 8 bits per channel Color profile: sRGB Pixel Aspect Ratio: Square Resolution: 72 pixels/inch Background Contents: whatever you prefer, but using the background color you plan to use for the page makes the most sense (see note below)
A Note About The Document Background

If your bottom-most layer is filled with a solid color, SiteGrinder will use that color as the background color for your built pages. (You don't need a hint on this layer.) No graphic file will be created for this layer. The background color is set using HTML. If you don't use a background layer SiteGrinder will default to using white as the background color.
11
Photoshop Palettes
There are a few palettes you'll use a lot when designing sites and should make visible (from Photoshop's Windows menu) for these tutorials:

The layers palette. You probably use this a lot anyway, but it is crucial for SiteGrinder. The info palette. This is very helpful for viewing the dimensions of selections or text layers. The Character & Paragraph styles palettes. These are commonly used enough to keep them visible most of the time you are working. The Layer Comps palette (Photoshop CS or later). You've probably never used this awesome palette before, but it is crucial for making SiteGrinder pages. You'll learn about its function below.
Hints: How to tell SiteGrinder what you want it to do with layers

Some layers are simply for decoration on web pages. Others respond to clicks and rollovers or have other special SiteGrinder-enabled behaviors. These layers need particular words, called "hints", added to their layer names after a dash to indicate what their function is. These words include "button", "rollover", "link", "menu", etc. A layer named "home" is just decoration until you add "-button" to the end of its name. Once you add that hint, SiteGrinder will know to treat that layer as a button when it builds, and it will look for a link to program it with. (You'll find out about adding links later.) There are many hints, but you only need to be familiar with the ones you require for your site. If your site needs no image gallery, you don't have to learn anything about the "gallery" hint. If you are a new user you will want to take a look at the full list of hints on page 98. That's a great way to get a feel for the breadth of SiteGrinder's capabilities. From the learning center on the Media Lab site you will also find a full list of hints, each linked to appropriate documentation pages. Using hints is a pretty straightforward process: just edit a layer's name and add a dash and the hint to the end of it. The main rule is that each hint follows a dash, and there can be no space between the dash and the hint. "-button" is correct, "- button" is not. For the full list of rules about using hints, see page 98.
12
Key concept: Sometimes the part of the layer name that comes before the hint is important, especially with buttons. SiteGrinder will match a layer named Home-Button with a layer named Home-Rollover to make a rollover button, for example. Hints are not only applied to individual layers. Some hints can be applied to layer sets/groups (those folders in the layers palette). Still others are used in conjunction with layer comps.
Your First Hint: Making styled web text using the "-text" hint
As you may have noticed, hints mainly indicate interactivity. There are a few exceptions, including the hint we will now introduce, the "-text" hint. The purpose of the "-text" hint is to tell SiteGrinder that you want a type layer to appear as true styled text on a web page, rather than an image of the text. SiteGrinder can recreate any character or paragraph styles supported by both Photoshop and web browsers, including left and right margins, space before and after, etc.
Step 1. Create a text layer

1. 2. 3. 4. 5. In Photoshop create an empty document at least 500X500 pixels Select the text tool Click and drag a rectangle in the document large enough to hold plenty of text Type or paste in some text. Add some character and paragraph formatting Double click the name of this new text layer in the layers palette to edit it. (It sometimes surprises people that you can edit the names of text layers since at first they match the layer contents. You can edit these names just like any other layer.) 6. Change the name to Sample-text
Step 2. Build and try

1. 2. 3. 4. Save your document Open SiteGrinder Click the "Build" button After a quick build, your page will open in a browser
Examine the page that opens to see that SiteGrinder has reproduced the text and styles on the web page.
Scrolling Text
Sometimes a design calls for text to be displayed within a constrained area that isn't large enough to fit all of the text. The solution to this is to provide a scroll bar. SiteGrinder
13
makes this embarrassingly easy: adding the "-scroll" hint to the end of a type layer's name will cause it to be scrollable on any of the pages it appears on. Just create a type layer that contains more text than it can fully display in its rectangle and add the "-scroll" hint. You can add both the "-text" and "-scroll" hints to the same layer. (ie "my layer-text-scroll") Photoshop's character and paragraph styles will still be displayed in scrolling text areas, so you can use the margin indent setting to create space between the text and the right side scroll bar, the left side, the top and the bottom. NOTE: Custom scroll bar graphics or colorization are not supported. Here is a start-to-finish example: 1. Select the horizontal type tool from the Photoshop tool palette 2. Click and hold down the mouse button in the document where you want the top left of the text area to be. 3. While continuing to hold down the mouse button, drag down and to the right to create a rectangle that can easily fit all of your text. (It is important that you create the text by clicking AND dragging out the rectangle. If you only clicked and let go then you created what is called "point text" as opposed to "paragraph text" and SiteGrinder won't be able to tell what size rectangle you want the text to appear in.) 4. Type or paste text into the layer. 5. While still editing the text, drag the handles of the rectangle until it's the size and location where you want it to appear on the final page. Make sure you are in text editing mode when you do this so that you only resize the rectangle and not the text itself. (The quickest way to enter text editing mode is to double click on the thumbnail of the text layer in the layers palette.) This will crop some of the text off the bottom, but that's what the scroll bar is for, right? 6. Name the layer something like "sbar example" 7. Set the text to anti-alias "None" or add the "-text" hint to the end of the layer name to tell SiteGrinder you want this layer to be text and not a graphic of text. 8. Now add the word "-scroll" to the end of the layer's name and build. (If you added "text" in the previous step, just add "-scroll" after "-text" since you can add multiple hints to a layer. In this case the final name will be something like "sbar example-text-scroll")
14
Important tips about text
Stick with the common web fonts for best cross-platform consistency. These include Arial, Comic sans, Verdana, Courier, and Times New Roman. If you need a very particular text look you are better off using an image of the text. Don't use returns to create empty vertical space between lines of text - web browsers treat this unpredictably. Instead use Photoshop's "Space Before" and "Space After" paragraph styles. You'll almost always want to use "Paragraph Text" instead of "Point Text." Setting a type layer's anti-aliasing to "none" has the same effect as the "-text" hint. It's a good idea to do this so you can tell the difference visually right in Photoshop which layers are going to be real text and which will be images of text. Never use Photoshop's Move tool to resize a type layer that you plan to output as text. If you need to change the size of the containing rectangle, start editing the text first. The easiest way to enter edit mode with a text layer is to double-click the layer's thumbnail in the layers palette. Once you do that you can resize the text rectangle without resizing the text.
Adding hyperlinks to text layers

There are two ways to add hyperlinks to portions of your styled web text: 1. Simply type a URL, as in "www.medialab.com" (you won't need quotes and you don't even need to use "http://"), anywhere inside a type layer. SiteGrinder will notice any URLs in your text and automatically make them clickable for people viewing the resulting page. 2. If you want to add hyperlinks to specific words or phrases within a text layer you identify them to SiteGrinder using a second type layer with the same layer name in combination with the "-links" hint. This separate "-links" layer contains the words and phrases that need hyperlinks along with the links themselves. Thus if a layer named "Sightseeing-text" contains text that will appear somewhere on one of your pages, a layer named "Sightseeing-links" will contain copies of the hyperlinked words and phrases along with their links. See instructions below for each. Lazy: Using A Single Type Layer You can add URLs directly into a type layer and if it is recognized by SiteGrinder as "true text". To do that, simply set the layers anti-alias text setting to "None". Or, alternately, add the "-text" hint to the layer. Then SiteGrinder will make those URLs clickable on the page, but won't apply the link to other text. If a type layer contains the text "Check out great products here: http://www.medialab.com" then SiteGrinder will make the included link "live" and clickable, as such: Check out great products here: http://www.medialab.com SiteGrinder 2: Zero-To-Hero Guide 15
This technique does support SiteGrinder's link shorthand, so you can add web links without the "http://" prefix and email links without the "mailto:" prefix. SiteGrinder will automatically add those things in the invisible HTML code if you leave them out. Less Lazy: Using Two Type Layers and the "-links" Hints Often you will want to apply links to parts of text instead of showing the URL in the text the way we did in the previous example. This sentence, containing this link to a discussion of text buttons, is a perfect example. SiteGrinder allows this using two text layers. The first layer should contains the text that will appear on the web page and be recognizable by SiteGrinder as "true text". (Its anti aliasing should be "none" or it should have the "-text" hint.) For the links, create a new type layer that will contain the URLs you will be using as well as the copies of the parts of the text you want to to apply them to. Name this layer the same as the layer containing the text, but add the "-links" hint to its name. Thus if you have a text layer named "sightseeing-text" it will match to a text layer named "sightseeing-links". The text in the "-links" layer consists of words and phrases from the text layer that you want to add URLs to paired with the URLs themselves. Each word or phrase from the first text layer that you want to add a link to should appear on a line in the "-links" layer followed by the URL itself on the next line. You can have as many of these as you like, each separated from the previous URL by one or more empty lines. If it sounds tricky, the example below will show you how easy it is.
16
Example: Below is a line of text with multiple links: I found an awesome waikiki whip recipe at this website! If you want to discuss it, email me. The preceding sentence contains three different links on three different phrases in the text. To achieve this in Photoshop we'll create two layers, one for the text and one for the links. The type layer containing just the plain text with no styles or URLs we'll name "recipe idea-text". Then we'll create a second text layer named "recipe idea-links" containing the following text : waikiki whip recipe http://www.medialab.com/sitegrinder/screenmovietutorials.html this website www.medialab.com email me recipe-help@medialab.com SiteGrinder uses this as a key to apply links to the text in the source layer. Each pair of lines contains a word or phrase for SiteGrinder to find, and a link for SiteGrinder to apply to that word or phrase. The pairs must be separated by at least one blank line. Link appearance: When SiteGrinder finds a linked word or phrase in text it thinks of it much like a text button. SiteGrinder will use the style you placed on the linked text in Photoshop as the look for the "normal" (non-rolled over) state and the default Text Button rollover style you set in SiteGrinder's Text Buttons panel as the rollover state. You can change this on a layer-by-layer basis in using SiteGrinder's Text Buttons panel. You can add custom "normal" and "rollover" styles.
17
Types of links supported: Any valid full URL can be entered as a link. This means you can have ftp links (with usernames and passwords) or http links that pass arguments. There are a few shorthand techniques for common link types. Email addresses should be entered without the "mailto:" label, as in the example above. This allows SiteGrinder to create a true email link that will open in the user's email software. Web page links can start with the simpler "www" instead of the full "http://www". This makes the "-links" field more readable. If you want to put in a placeholder empty link that you will enter later in another package you can enter "#" as the link. It will show up as a link, but won't go anywhere. Or you can just leave a blank line as the link and set the link using SiteGrinder's Buttons panel. Limitations:

Linked text cannot spread across multiple paragraphs If a linked word or phrase appears multiple times in the field, each occurrence will be linked, not just the first one.
18
Buttons and Popups

Making an Image Button with a Hyperlink using the "Button" hint
A button is just an image or some text on a web page that the user can interact with. Most commonly buttons have a link to a different page that will open in the browser when the user clicks on it. The simplest kind of SiteGrinder button is a single layer with the "-button" hint added to its name. Your first button will be an image button with a link. You'll make the button from a single image layer in Photoshop, then specify its link using the SiteGrinder window.
Step 1. Create The Button

1. 2. 3. 4. Create a new 500X500 pixel document in Photoshop Create a new image layer Choose the rectangular marquee selection tool (press m) Click and drag in the document to select a reasonably "button-sized" area, say 300 wide by 100 tall 5. Fill that area with a color different from the background color. (You can paint any kind of image you want here, but a solid filled rectangle is quickest for this demonstration.) 6. Double click on the layer's name in the layers palette 7. Change the name to Home-button
Step 2 Give it a link

1. Save the document and open SiteGrinder 2. Check for errors in the report pane. If you didn't spell "-button" correctly, for example, it will tell you there is an unknown hint. 3. Click on the Buttons tab in the SiteGrinder window
19
4. Notice the Home-button is listed here because of its "-button" hint 5. Click in the "Link" column in the area to the right of the "Home-button" entry (shown above) 6. In the dialog that appears (shown below) take a moment to notice the variety of links you can set
7. Click on the "URL" radio button 8. Type "http://www.medialab.com" into the URL field. (If you leave out the "http://" in this field SiteGrinder will automatically add it when it builds) 9. Click OK 10. Think about what you have done. You have created a layer in Photoshop and painted something in it. By adding the "-button" hint to it you have made it ready for SiteGrinder. When you open SiteGrinder you can see that that layer appears in the "Buttons" panel and you can assign a hyperlink to it. 11. Click SiteGrinder's "Build" button When the page opens in your browser click on the button you made to verify its functionality. That's it!
20
Pretty easy, right? If you think so you'll be happy to know that almost everything in SiteGrinder works this way. When you close SiteGrinder it will store the link setting in the Photoshop document next time you save the document.
Important notes about links:
If you are linking to a page in the site that SiteGrinder is building you don't even need to set a link if the button name matches the page name, as in Home-button and Home-page. (You'll find out how to make and name pages a little later.) You can set a link to literally anything (javascript, database lookups, etc) using the "Literal" link type. Choose the "Literal" radio button in the dialog shown above and paste whatever you like into the field. Email links allow you to set subject as well as an email address Next, Previous, Up, and Thumb links are all for SiteGrinder's Gallery system You can also set links using a text layer and the "-link" hint instead of using SiteGrinder's Buttons panel (see below). This makes it easy to move buttons and their links between documents. Use "None" as the link type for buttons that you don't want to link to anything If you put URLs in type layers that are outputting as styled text SiteGrinder will automatically find them and make them clickable. Very handy.
Layer Name Matching and the -Rollover Hint

Now we will add a rollover to the button we created in the previous example. We will do this by duplicating the button layer and giving it a different appearance and adding the rollover hint. We'll use solid color filled image layers just for simplicity - you can have the image layer be as fancy as you like.
Name Matching
SiteGrinder needs to match image button layers to the layer containing the rollover image you want to use. It does this using the part of the layer name that appears before the hint, in this case "Home". SiteGrinder uses this technique to match buttons to rollovers, to popups, to pages. You'll find it uses this in other ways as well, so it is good practice to name your layers usefully rather than using Photoshop's default names.
21
Step 1. Create the rollover layer

We are starting with the document created in the previous section. 1. 2. 3. 4. 5. 6. 7. 8. Close SiteGrinder if it is still open Select the "Home-button" layer you created in the previous tutorial Select "Duplicate layer..." from the layers palette menu Set the new layer's name to Home-rollover Select the paintbucket tool Choose a foreground color different from the fill of the Home-button layer Fill button area of the Home-rollover layer with the new color You can rehearse the rollover effect by hiding and showing the -rollover version
Step 2. Build and verify

1. Save the document and open SiteGrinder 2. Check the report for any problems. If there are any, close SiteGrinder and fix them. 3. Click "Build" 4. When the page opens up, give it a try
Important notes about graphical rollover buttons:
Buttons and rollover don't have to be rectangles, they can be any graphic as long as at least part of the "-rollover" version intersects with the "-button" version. The "-button" and "-rollover" hints can even be added to layer sets! In those cases SiteGrinder will use the contents of the layer sets to make the button states. The "-button" and "-rollover" hints can be abbreviated as "-b" and "-r", as in Home-b. If the part of the button layer name before the hint (i.e. the "sample" part of the "sample-button" layer name) matches to a page SiteGrinder is building, SiteGrinder automatically programs the hyperlink for you. If a button is hidden, SiteGrinder will not output it, even if the rollover version is visible. The rollover version can be visible or hidden. Sometimes, in a navbar for example, you will want the rollover state of the button representing the page you are currently viewing to stay on even when the button is not rolled over. This is a visual cue to indicate which page in a navbar is currently active. SiteGrinder can do this automatically in conjunction with the "-menu" hint discussed below.
22
Fun With Popups and Popdowns

Just as you can make a button change appearance when the user rolls over it with the mouse using the -rollover hint, you can also make layers elsewhere on your page either appear or disappear using the -popup and -popdown hints and the same kind of layer name matching you saw with the -rollover hint. The basic idea is that any layer named Home-popup will be hidden until the user rolls over Home-Button. By the same token, any layer named Home-popdown will be visible on the page only when the user is NOT rolling over Home-Button. You can create any number of popups or popdowns for a given button as long as the names match. There is also the "-hide" hint which causes the layer to disappear whenever any popup appears, regardless of which button triggered the popup. If you have followed the previous two tutorials you may want to just add some Homepopup and Home-popdown layers to the document you made and build.
Important notes about popups:
Often you will want to show or hide a particular popup on a particular page regardless of whether the user is rolling over its triggering button. SiteGrinder supports this. You can also turn off all popups on a page-by-page basis using SiteGrinder's "Pages" Pane. Popups work the same with text and image layers
Sample Files: There are some very useful sample Photoshop files demonstrating buttons with rollovers and popups that you can open from SiteGrinder's report panel. Explore them to see how they are laid out, and build them to see how they work in a browser.
Text Buttons and Text Rollover Effects

Key concept: Text buttons are very similar to image buttons, but their rollover effects are handled using the SiteGrinder "Text Buttons" panel. (Image buttons use separate "rollover" layers.) Browsers have many text rollover options, such as dotted borders and color changes, that are not representable within Photoshop and are much more easily set through SiteGrinder's controls. To make a text button you need to add the "-button" hint to a type layer. You also need to make sure that layer is being output as text.
23
Review: To ensure a type layer is output as true text you either add the "-text" hint or set the layer's anti-aliasing to "none" in Photoshop's character styles palette. Luckily SiteGrinder lets you add multiple hints to a layer, so to create a text button you have two choices:

Add both the "-text" and "-button" hints, for example "Home-text-button" Set the anti-aliasing to "none" and use only the "-button" hint
Just as with image buttons you can place text buttons wherever you like on a page.
Step 1: Make the Text Button Layer

It is best to use Paragraph type layers rather than Point type layers because SiteGrinder uses the boundary of the layer to determine border and background color decorations for the normal and rollover state. 1. Create a new 500X500 pixel document in Photoshop 2. Select Photoshop's text tool (Press T) 3. Click and drag in the document to make a type layer approximately 200 pixels wide by 40 pixels tall. Clicking and dragging, as opposed to just clicking, makes this a Paragraph type layer. 4. Select center alignment from the paragraph settings palette 5. Enter "SiteGrinder Text Button!" in 14 point Regular Verdana
6. Change the layer's name to Sample-text-button
24
Step 2: Adjust the Button Settings in SiteGrinder

1. Save the document and open SiteGrinder. (You'll probably want to make a Photoshop Action that saves the doc and opens SiteGrinder.) 2. Switch to the "Buttons" Tab and notice that our Sample button is listed. Feel free to add a hyperlink here for practice. 3. Notice that there is now a "Text Buttons" Tab. You'll only see this tab when text buttons are defined in your document. Click on it to switch to the "Text Buttons" panel. 4. This panel is where you specify the rollover behavior of text buttons and, optionally, their "normal" (non-rollover) state as well. (Generally you will set the "normal" state by using Photoshop's character styles in the document, but you can set them here instead. Normal state settings you make here will override the style in the type layer.) 5. Let's see what happens when we make the rollover state have a dotted border and a colored background. Click on the checkbox next to "custom backcolor" and then click the color chit to it's right to set the color. Then click the "custom rollover border" checkbox, select a border style from the menu, and click the LTRB checkboxes to make the border visible on the left, top, right, and bottom sides.
6. Now click the build button and try out your new text button. Notice that when you roll over the button SiteGrinder fills a background area the size of the text rectangle that you made with the rollover backcolor you specified. Notice also that it has shifted the rectangle to place the button text in the center.
Important notes about text buttons
A text button's "normal" (not rolled over) state matches the style you gave the text in Photoshop. As with the "rollover" state you have the option of changing the "normal" state within SiteGrinder's Text Buttons panel. If you set a normal state there it will override the style of the text in Photoshop. The Text Buttons pane, like several other SiteGrinder panes, allows you to create both a Default setting and specific exceptions to the default on a layer-by-layer basis. The setting that you define at the top of this pane will affect all text button
25
layers except those you create special settings for using the "Add" button and the dialog that appears when you click it. You can create as many exceptions as you like and change them individually before each build. Text buttons preview accurately in the "lightning build", so if you find yourself tweaking a lot of them be sure to use that build style. Like standard text layers, if you want to resize the text rectangle be sure to go into text edit mode first. This is easily done by double-clicking the thumbnail of the type layer in Photoshop's layers palette. Just like image buttons, text buttons can have any number of popups using name matching. Notice that the button name does not have to be the same as the content of the text button. The content of the text button layer (what you see on the page) can be "Click here to return to the home page", but the name of the button layer can be Home-button.
Sample Files: There are some very useful sample Photoshop files demonstrating this feature that you can open from SiteGrinder's report panel. Explore them to see how they are laid out, and build them to see how they work in a browser.
Image Compression: Making "Save for Web" work for you

Until now we have allowed SiteGrinder to turn our image layers into web graphics however it sees fit. But what's really going on? How does SiteGrinder decide whether to use jpeg, gif, or PNG formats and how much quality loss to allow? The answer lies in SiteGrinder's "Compression" panel. In this panel you choose a setting to use for most graphics, and, like several other panels, you can choose any number of exceptions to the general rule. The settings that you choose come from Photoshop's "Save for Web" dialog. Even custom settings you create there are selectable in SiteGrinder's Compression panel. As a general rule jpeg compression is best for photography and gif works best with images made using a computer. Jpeg files do not support transparent areas, which can sometimes cause problems. You can usually wait until your site is almost complete before worrying about compression. Once your design is close to final, take a careful look at the quality of the graphics, and take a look at their file sizes. If there are particularly large files or images that are too visually degraded you can tweak their compression settings in Photoshop's "Save for Web" dialog to find the settings that best balance file size and image quality and then build your pages again after telling SiteGrinder to use the new settings you decided upon. SiteGrinder 2: Zero-To-Hero Guide 26
NOTE: SiteGrinder automatically merges non-interactive layers when it can to reduce the number of image files to speed up downloading. If you have a layer that you need SiteGrinder to keep separate from others so you can change it later or so you can give it a unique compression setting you can use the -nomerge hint on the layer.
The Compression Panel

The Compression pane is where you select the compression settings for all of the layers that SiteGrinder will output as graphics. This is how you determine what kind of files are produced (i.e. gif or jpeg) and how much or how little compression is applied. As with the Pages and Text Buttons panels you select a default choice that will be applied to all layers except those for which you create custom settings.
The "Save For Web Preset" menu lists all of the named settings from Photoshop's "Save for Web" dialog. This includes any settings you have created in that dialog and saved with a name. If you decide that you want to apply different compression settings to a layer or button, click the "Add" button. A dialog will appear allowing you to choose a layer to add, and the custom setting you wish to use for that layer. You can later change or delete these custom settings by selecting a layer from the layer list and then clicking the "Edit" or "Remove" buttons. When you remove a layer from the list it will once again use the default settings that you see displayed. Some layers may not show up in the layer list because SiteGrinder is auto merging them with other layers. If you need to set a special compression setting for a layer you don't see in the list, close SiteGrinder and add the -nomerge hint to the end of the layer's name.
27
Pages and Navigation Between Pages

Creating Multiple Pages
So far in this guide we have only built single page sites to test one feature or another. It is time to learn the surprisingly easy way that SiteGrinder can create as many separate pages as you like, with arbitrary content on each page. On websites there are often elements like navbars and logos that appear on most or all pages, and then there are content elements that appear only on individual pages. Clearly we need some method for indicating to SiteGrinder how many pages we want to make and which layers should appear on which pages. Luckily Photoshop CS (and later) has a tool called "layer comps" that makes this task very simple. (For users of older versions of Photoshop we have provided a similar method for specifying page content in the SiteGrinder Tools plug-in.)
Key concept: Basically layer comps allow you to take a kind of snapshot of which layers are visible and which hidden at any given time. These snapshots are called "layer comps", and are saved with the document. They can be recalled quickly whenever you like and, crucially, you can name each one. They can also be updated after they are created to reflect any changes you make to page content.
28
To define a page you make the layers you want on the page visible and hide the ones you don't. Then define a comp in the layers palette and add the "-page" hint to it's name. (Note: the "-page" hint is one of the hints that is only applied to layer comps in the layer comps palette, never to layers themselves.)
Layer Comps
Layer comps were introduced in Photoshop CS. They are a convenient way to store a snapshot of certain key aspects of your document: layer position, layer visibility, layer fx ( layer styles), or any combination of the three. Once you create a layer comp you can call it up at any time by clicking on the icon to the left of the layer comp's name. This is really useful for web site designs because with web sites you usually have some content (layers) that are on all pages (i.e. the navigation bar or company logo) and other content that appears only on one specific page. A typical web project using layer comps might go like this: 1. Create the overall look of the web site with layers 2. Create a layer comp called "static background" with all of the "global" layers (ones you want on every page) visible 3. Create the elements that will appear on the home page 4. Create a layer comp called "home-page" containing the background elements and the home page elements 5. Restore the "static background" comp 6. Add elements for another page, say "contact" 7. Make another comp called "contact-page" 8. And so on for each page The biggest potential problem with layer comps is that a comp only knows about layers that existed at the time the comp was created. In the above example you may decide to add another layer or two to the background elements after you have already set up the background layer comp. This requires some extra steps because of the following crucial fact: layer comps never include layers added to the document after the layer comp was created unless you update the comps. You update a layer comp by first setting the document the way you want it in the comp (manually setting the layer visibilities, positions etc.) and then selecting the comp in the layer comp palette. At this point you can click the "update layer comp" button at the bottom of the palette or call up the command from the layer comp palette menu. If you want to add global elements that will appear on every page SiteGrinder will produce but if you have already made the comps for those pages you will have to update them all. This means calling up the a comp, which will cause the new elements to become hidden, unhiding those elements, updating the comp,and repeating for each page.
29
Before you call up SiteGrinder to build your site you should restore each "-page" comp in turn to verify that they all look the way you want them to. Some layer comp useage tips:

Clicking on the name area of a comp doesn't restore it. You must click on the restore area to the left of the name to restore it. Double clicking the name of a comp let's you change it in place just like layer names. Right clicking a comp (ctrl-clicking on one-button Macs) brings up a useful contextual menu You can use this layer comp menu to update a comp without activating it by clicking on the comp's name instead of on the icon to the left of the name You determine what layer attributes comps remember (position, visibility, style) in the comp options dialog
Creating pages 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. 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
30
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. Open the page you just 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. Best practice: Once you have defined your pages you can click in the little icon area to the left of the layer comp names to quickly switch back and forth from one comp to another to make sure they all look as you expect them to before opening SiteGrinder and building. This can save a lot of time.
Important notes about layer comps and pages
Layer comps can optionally store layer position and style for each layer in addition to visibility. This can be useful, but if you elect to use these attributes we recommend that you turn them on for ALL of the comps you use. Photoshop can give hard-to-predict results when switching between comps if different comps are storing different things and SiteGrinder will warn you in the report if this is the case.
31
Creating Button Navigation Between Pages

Key concept: SiteGrinder automatically matches buttons to pages using the parts of their names that come before the hints, in the same way that it matches buttons to rollovers and popups. If you name your button layer Home-button and you name the layer comp representing your home page Home-page you don't need to do anything else to link them together. SiteGrinder will notice that the parts of the layer and layer comp names that come before the hints match each other and will program the hyperlink accordingly. This name matching works for any button named Home-Button that appears on any page in the site you are building. You can even have several buttons named Home-Button on the same page and they'll all link back to the page defined by the Home-page layer comp. Most or all of the buttons on the web pages you will make will represent links to other pages within the same website, often pages you will be building with SiteGrinder. SiteGrinder generally assumes you want to make a page for every button in your document that has a unique name. If you have two layers in Photoshop, one named "page one-button" and one named "page two-button", SiteGrinder assumes you are making 2 pages. If both of the layers are named "page one-button" then SiteGrinder will assume you are making only one page and that both buttons will link to it. SiteGrinder matches the names of your buttons with the names of your pages. So if you have a button layer named "gallery-button" and a page named "gallery-page" then SiteGrinder has all the information it needs to link the button to the page. If you add a button with a corresponding"-link" layer to some other site, like "www.google.com", SiteGrinder is smart enough to know this button doesn't represent a page you want to build. Example: Making a basic multi page site with SiteGrinder from scratch. From a Photoshop document with two "-button" layers and no "-link" layers, SiteGrinder will, by default, build two web pages corresponding to these buttons and set up the links on both pages so the buttons navigate correctly between them. This is very important to understand and is the primary concept demonstrated in the following example.
32
Begin with a blank Photoshop document. 1. Create a type layer and type "Apples" into it. 2. Change the layer name to "Apples-button" 3. Create another type layer and type "Oranges" into it 4. Change its name to "Oranges-button" 5. Save the file and open SiteGrinder from Photoshop's File->Automate menu 6. Click the "Build" button. You're done! That's it! Sitegrinder has now created two HTML web pages named after the buttons, each with the two buttons on it. It has also programmed the buttons to jump to their corresponding pages. This is a most dramatic example of how much information SiteGrinder can glean from your Photoshop document with just a few hints. From a two layer document we have two HTML pages with text buttons that respond to rollovers and link between the two pages. The pages are automatically coded so that their names ("Apples" & "Oranges") show up as the title of the internet browser window. Their file names ("apple.html" and "oranges.html") also reflect the button names. All with one click of the build button! Using graphic layers for the "-buttons" instead of text will accomplished the same purpose. Try it yourself.
Important notes about buttons and linking
While matching your button names to your page names is the easiest, quickest way to link buttons to pages, SiteGrinder does not require the names to match at all. You can link any button to any page using SiteGrinder's "Buttons" panel. The "Page" button type presents a menu of your defined pages to select from. If you create a button that doesn't match any page name and you don't set some link for this button with either a "-link" layer or SiteGrinder's "Buttons" panel then SiteGrinder will add a page to the page list named after this button just in case you want a page built that for the button. What will this page look like? You'll have to pick one of your existing pages for SiteGrinder to "clone" to make the page. This technique is used to create a number of linked template pages to which you can add content after the build in another tool.
33
Page Workflow: When to define pages

Key concept: You can define and update pages whenever you like, depending on your work style and the type of site.
You can wait until most/all of the layers that will be in your site are in the document. If you do this then you won't have to worry about updating your pages when you add elements later. We generally prefer to define pages early in the process to make it easier to manage layers and to test small parts of the site as they are under construction. If you do it this way you will have to go through and update layer comps when you add new layers. This can be minimized by finalizing the global elements (the ones that will appear on all of the pages) before working on page-specific content. As you have seen in many of the tutorials you don't even need to define a page if you are making a one-page site. You can just use the Last Document State.
The Last Document State: A special page

As you have seen from some of the tutorials you don't even need to define a page to try out a technique. So what defines the page you see when you build your site with no pages defined? Key concept: SiteGrinder uses whatever the document looks like when you launch SiteGrinder as a special page. This page is called "last document state", and it allows you to conveniently build an arbitrary set of layers (whichever layers are visible when you launch SiteGrinder) whenever you like without having to define a page with a layer comp. The last document state is mostly useful for quick experiments. Just create a new document, add a couple of layers for a technique you are trying out, open SiteGrinder and build. The page that is built will be the last document state. Using a combination of the "-menu" hint and the"-xmedia" hint you can actually build an entire site from the last document state and a folder of HTML files. The sample file "Growing xmedia with tile" that you can open from SiteGrinder's Report Pane creates a 4 page site with navigation from the last document state.
34
The Pages Panel: How to determine which pages are built

If, after defining a few pages in your document, you simply open SiteGrinder and click the "Build" button, every one of your pages will be built and SiteGrinder will choose a random one to open in your browser. Key concept: SiteGrinder's Pages Panel allows you to choose which pages will be built, which page will be the "Home" page, and what page layout settings will be applied to your pages. The upper part of this panel is where you set default settings for background colors and tiles, alignment, etc.
The lower part of this panel lists all pages SiteGrinder thinks you might want to build. These include:

Pages you define with layer comps or SiteGrinder Tools The last document state is listed here and can be built as a page (see below) Pages in purple with grey backgrounds are "clone" pages. There will be one of these for every button in your document that you haven't set a link for. (Remember, if a button name matches a page name that's the same as setting a 35
link.) Page cloning can be very useful for building template pages. It is a more advanced technique mentioned here only for completeness. You can set which page is your "Home" page by clicking the radio button in the "Home Page" column to the right of that page. SiteGrinder will automatically name the html file it creates for this page "index.html" and will set the links for all buttons linking to this page accordingly. Once you have set a home page, SiteGrinder will open that page in a browser after the build is complete. Web tip: Home pages are almost always named "index.html". This is a web convention that tells web servers what page to display when the browser asks for a website or directory without requesting any particular file. If you type "www.medialab.com" into a browser window it is really just a shorter way of typing "www.medialab.com/index.html". The column of check boxes to the left of the page names determines which pages SiteGrinder will build next time you hit the "Build" button. You can select or deselect any of these. Best practice: When you are first developing a site you can build individual pages for testing to shorten the build time. When you finish the initial design you should build the entire site in one build. This allows SiteGrinder to produce a more efficient site by eliminating duplicate graphics and CSS code. Once your site is already built you can rebuild only a page or two if you have a small change. Be warned that this will reduce some of the efficiencies you will get from a full build.
Buttons, Pages, and "Cloned" Pages

It's worth taking a bit of time to talk about how buttons relate to pages. Buttons in SiteGrinder can be in one of three linking situations: 1. Automatically inking to a page you have defined using layer comps (or the page definition tool for Photoshop 7) 2. Linking to something you specified using a "-link" layer or using the Buttons panel of the SiteGrinder window. 3. Not yet linked to anything. The first two cases should be familiar to you at this point. The question is, "what should SiteGrinder do with buttons that have no links?" While SiteGrinder could just choose to ignore buttons with no links, we have done something much more powerful.
36
When SiteGrinder finds a button with no link it assumes you might want to generate a page for that button anyway, so it places a page named after each unlinked button in the list you'll find on the "Pages" panel. Below you see the Pages panel for a document containing two buttons with links already set, Tower and Spider, and one button with no link, flower.
You can tell the "flower" button has no link because it is in purple with a grey background. Because there is a checkmark next to the page name SiteGrinder will generate a page for this button when it builds, but what will appear on that page? The answer is that SiteGrinder will create a duplicate, or "clone", of some page you have actually defined. Which page SiteGrinder clones is determined by the "Clone New Page From" option you can see in the screenshot above. You can set this globally so that all cloned pages use the same source page, or you can set individual buttons to use different pages as their source. You can even use the Last Document State as the source. Using this technique you can create a five page site in about ten seconds by creating five text buttons and then just building. SiteGrinder will create five pages named after the five
37
buttons. They will look like the last document state but they will be individually named HTML files and the buttons will link all of them to all of the others. The primary reason you might want to do this is to create identical "template" pages that are already linked together by a navbar but are empty of content. You can paste the content in later using another tool. You can also, as we will see later, tell SiteGrinder to do the equivalent of pasting different content into otherwise identical pages for you using cloned pages in conjunction with the -xmedia hint. Best Practice: For faster building you can turn off cloned pages that you don't need.
Page Backgrounds and Tiles

Background Colors
With SiteGrinder 2 Basic you can specify internal and external background colors using SiteGrinder's "Pages" panel. Key concept: The "internal" color is the color that will appear behind the area of your page that contains actual content layers. The "external" color is what appears outside the content are when the browser window is opened larger than than your content area, like margins. If you want the same color for both you need only specify the exterior color. Best practice: If you have a solid color background layer that is lowermost in the layers palette, SiteGrinder will assume you want this color as your exterior background color so you don't have to set it manually.
Background Tiles
With SiteGrinder 2 Pro you can set repeating tiles in the interior and exterior of your pages for dramatic and download-friendly results. This is accomplished using a combination of the Photoshop "Pattern Overlay" effect and the hints interior-tile and exterior-tile. The exterior-tile hint is used as the full name of an image layer that has Photoshop's "Pattern Overlay" layer style applied. The pattern assigned to the layer will become the full background tile of the web pages produced from this Photoshop document by SiteGrinder. No matter how large the user makes the web browser window, this tile will fill the entire background horizontally and/or vertically depending on the tile "repeat" settings found in SiteGrinder's Pages pane.
38
The only visible page element beneath the exterior-tile is the exterior background color, which can show through transparent areas of the tile.
NOTE: This layer only serves to indicate the pattern that should be used as an exterior tile. The exterior-tile layer can be any size and positioned anywhere in the document. For preview purposes it is useful to assign this hint to a layer that is the full size of the Photoshop canvas, but it is not necessary. The interior-tile hint is used as the full name of an image layer that has Photoshop's "Pattern Overlay" layer style applied. The overlay pattern assigned to the layer will become a background element of the web pages produced from the Photoshop document by SiteGrinder. The interior-tile will generally cover an area equal to the canvas size of the Photoshop document. This is in contrast to an exterior-tile layer, which can fill areas outside the canvas dimensions when a page is viewed in a browser window that is open larger than the canvas size. The interior-tile is the "highest" background element. The page background elements beneath the interior-tile are the interior background color, an exteriortile (if any), and the exterior background color (if any).
NOTE: This layer only serves to indicate the pattern that should be used as an interior tile. It is very helpful to make it as large as the document in order to audition it visually, but it is not necessary. The interior-tile layer can be any size and positioned anywhere in the document. What matters is the pattern assigned to it.
39
Intermediate Techniques
Layer Management: Tricks for keeping track of everything
A SiteGrinder document can grow to contain a lot of layers. Luckily Photoshop has tools to make them easy to manage if you take a little effort. There are various strategies for keeping track of and manipulating layers more easily.
Layer contents
As you can see from the guide so far, SiteGrinder encourages and sometimes requires you to separate your layers into functional pieces. A button and it's rollover cannot exist in the same layer. It can also be useful to split non-functional decoration layers into pieces where appropriate. If you have layers with large empty areas separating disconnected pieces it can often be helpful to split the pieces into separate layers. (Selecting with the marquee and using the "new layer via cut" command is a very quick way to do this.) This is mostly to avoid "blocking" elements below the layer from receiving mouse clicks. You may be tempted to merge the layers that make up a button to add the "-button" hint to the merged version, but you don't have to do this if you want to retain the flexibility of keeping your layers separate. You can add many hints, including "-button" to layer groups to keep your layers separate. See the "Using Hints With Layer Sets" section below.
Layer Order
The top-to-bottom order of layers can be very important for both organization and function. Layers, even empty areas of layers, should not rest above other layers that need to receive mouse input.
40
Layer Naming
Technically SiteGrinder only requires you to use special names for special layers, like buttons and menus. You are free to name your other layers "Layer 1", "Layer 2", etc, but we don't advise it. You don't have to name every tiny graphic accent layer, but such layers should ideally be placed in groups with clear names like "Top Menu Background Stuff" to help you find things and to help you manipulate
Layer Sets/Groups
Layer sets/groups (the little folders you can use to organize the layers palette) make managing all of the layers in a website much easier.
You can put layer groups inside other layer groups. (Photoshop CS2 let's you nest layers 5 deep!) This makes the layers palette more like the folders and directories on your hard disk, allowing you to have many, many layers but to keep track of them easily. You can make buttons, menus, and popups using layer sets so you can keep the constituent layers separated and also achieve features like buttons that combine true text labels with image backgrounds.
41
On the right you will see an organization of layer groups for a site with "Home", "Content", and "Gallery" pages. The actual content layers have been divided among these layer groups. In this case we also used Photoshop's layer color setting to differentiate global content (green) from page-specific content (purple). None of these groups are required by SiteGrinder, and none of them are using hints. They are simply there to help reduce the clutter of layers so they are easy to find and edit.
Layer Comps
As you have seen you can use layer comps to define pages, but you can also use them as a sort of virtual workspace for laying things up experimentally. Layer comps can be a good way to work with an arbitrary collection of layers whether they are close to one another in the layers list or not.
Smart Objects
Adobe introduced smart objects with Photoshop CS2. They allow you to bundle up a set of layers into a single "virtual" layer, and can be very helpful with web page design. When you create a complex effect, like a button background made up of several layers, it is a good idea to turn them into a smart object. The primary advantage of this is that you can make several copies of the smart object which will all change if you make a change to one of them.
Locating Layers
When you have a lot of layers in your document they can sometimes be hard to locate in the layers palette. Here are two strategies for quickly selecting a layer in the document window, which will cause the layers palette to jump to the layer you selected.
If the layer is a text layer, use the text selection tool to click in the text of the layer. Look carefully at the text cursor to determine if clicking will create a new text layer or edit the existing layer. If the cursor is in the wrong place you'll end up creating a new text layer, which you can quickly get rid of by pressing Esc. You can select the move tool and activate its "Auto Select layer" option. Unfortunately this is pretty buggy and you will often end up selecting a layer you didn't click on, even if it's hidden.
42
Arbitrary Selection of Multiple Layers

Photoshop CS2 introduced the ability to select multiple layers at a time, even multiple layers that aren't right next to each other. This is similar to the old layer-linking method of creating arbitrary collections of layers and doing something to them, but is more straightforward and easier to manage. To select multiple layers, click in the layers palette on each layer you wish to add to your selection while holding down the Alt key under windows or command key on the Mac. Once you have done this you can do some useful things:

From the layers palette menu you can create a new layer set from the selected layers If you have used the "Copy layer style" command on a layer you can then paste it onto multiple layers. This is a great time-saving trick.
Making room with the SiteGrinder Layer Mover

Sometimes you need to make vertical room in your document to fit some new element. Even if your layers are well-organized it may be annoying to find and select all of the relevant layers in order to move them. For this reason SiteGrinder provides, in the SiteGrinder Tools plug-in, a way to shift layers without having to select them all. Simply click on a layer whose bottom edge in the document is just above all the layers that you want to shift down. Then open SiteGrinder tools and select the "Move Layers" pane. Type in how many pixels to shift the layers and click the "Shove!" button.
Intelligently Duplicating Groups with SiteGrinder Tools

Duplicating layer groups with Photoshop can have some annoying side effects, such as adding "copy" to all of the layer names. That's why we provide the Smart Layer Set duplicator in the SiteGrinder Tools plug-in. This tool is so useful, especially for buttons, that we have dedicated a whole section to it below.
43
Adding Flash and Multimedia

SiteGrinder 2 Pro's -xmedia hint makes it easy to incorporate external multimedia into your pages. These include:

Flash movies MP3 files Quicktime and Windows video files Animated gifs Remote images that are on web servers
Adding Flash and other multimedia is as simple as creating image layers to be placeholders for these elements, adding the -xmedia hint to their layer names, and then linking the external media files to the placeholders. The image layers just need to contain filled rectangles matching the dimensions and desired position of the linked media files. There are two ways to link media files to -xmedia layers: 1. Browse to the files using SiteGrinder's External Media panel 2. Set a "media folder" using SiteGrinder's External Media panel. Once you do this SiteGrinder will use name matching between -xmedia layers and the files it finds in the media folders you specify. If you have a file in your media folder called "Russian Ark.mov" then SiteGrinder will match it to a layer named "Russian Arkxmedia" When you build SiteGrinder will copy external media files that are local to your computer into media Directories that it creates within the build folder.
Using External Media with SiteGrinder

The -xmedia hint allows you to easily incorporate eXternal Media files into your Photoshop designs. These files can be local to your machine or can be linked to remotely across the internet. All you have to do is create a rectangular area in an image layer, give it the xmedia hint, and tell SiteGrinder what media file you want to play there! The following file types are supported as of SiteGrinder 2 Pro:

Flash .swf files Flash flv, MPEG, QuickTime, and Microsoft Video files Animated gif files HTML files MP3 Audio files 44
Static JPEG, gif, and PNG files
Layers with the -xmedia hint act only as placeholders. This means the layer contents indicate the size and position to be used for imported media, but the contents of the layer do not actually appear on the built page. When the xmedia hint is used in a document the External Media panel will become visible in the SiteGrinder Pro Window. For each combination of an xmedia layer and a page there will be an entry in SiteGrinder's External Media Panel where you can select the source media file, output format and other settings. There is a sample file employing an xmedia layer to import a flash file that you can access from the SiteGrinder report pane.
Tutorial: Using a multimedia file

Whether using Flash, Video, animated GIF, or remote image files, the steps are the same. 1. Identify the dimensions of the media you will be importing 2. Create an image layer in your Photoshop document 3. Select an area that matches your media dimensions with a color. (This is easily done using the marquee tool's Fixed Size style, or by watching the Info panel as you drag out the selection. 4. Fill the selection with a color 5. Pick a name for the layer and add "-xmedia" to the end of the name, ie "Home Movie-xmedia". The name doesn't have to match the file name, but if it does, and the file is in the folder that you optionally choose to be your Media Folder, SiteGrinder will match the layer to the file automatically. 6. Save the document and open SiteGrinder 7. Select the "External Media" panel At this point you have two choices:
you can click the folder icon next in the "External Media Folder" area at the top to locate your media folder. Once you do this SiteGrinder will match any xmedia layers to files in the folder you selected that match your xmedia layer names. ie "Simpsons Movie-xmedia" will match "Simpsons Movie.mpg" on the disk.
Or
alternately you can locate the media for each media layer individually by clicking in the column to the "Type" column to the right of each entry and using the dialog that appears. If you type in a path or URL to a file you will need to click the "Update" button in this dialog.
45
Now you can build your document. SiteGrinder will copy all required media files that are on your disk (as opposed to remote files on servers) into a media folder inside your build folder.
Matching placeholder layers to files: The External Media Folder

While you are free to browse for media files manually for each -xmedia layer in the External Media panel of SiteGrinder, setting a specific external media folder allows for a convenient shorthand. Rather than having to individually set a source file for each and every xmedia layer on each and every page or derived page, users can put all their media willy nilly into a single folder folder, point SiteGrinder to that folder, and SiteGrinder will correctly match media to pages and layers and select output formats for you. Thus a layer named cool movie-xmedia will be replaced by the file cool movie.swf located in the assigned external media folder when SiteGrinder builds the page.
Importing External HTML Files

WARNING: Including HTML from an external document into a SiteGrinder page can be dangerous. If the external douments contain nonstandard or broken HTML then the entire page may not display properly in a browser. Because SiteGrinder is not directly involved in creating these external source files, and because the potential for invalid documents to create havoc in the layout of the page is almost infinite, expect tech support to be limited for this feature. SiteGrinder Pro can import and process both simple formatted HTML text and also complex HTML documents that contain hyperlinks, that reference external files, that contain javascript, and that use CSS styles. Because the pixel height of the imported HTML an unknown size, it is extremely useful to combine the -xmedia hint with either the -grow hint or the -scroll hint. Click here for a detailed discussion of importing html with -xmedia.
Advanced External Media Name Matching

If the file name of the media contains both the name of the page layer comp (minus the page hint) and the name of the placeholder (minus the -xmedia hint) , more powerful matching is possible. Example: if the page name is bugs-page, and the -xmedia placeholder layer is named bunny-xmedia, then a file named BugsBunny.mpeg (or Bunny Bugs.mpeg in the external media folder will automatically get placed into that placeholder when the page is built. SiteGrinder 2: Zero-To-Hero Guide 46
If that file doesnt exist, then a file named Bugs.html (for example) would be chosen. And if no file exists that contains the page name, then a file named after the placeholder itself (Bunny.swf) would be used. This is particularly useful when using existing external HTML files. It essentially allows SiteGrinder to use Photoshop files to skin a website. Rather than individually using the UI to link up each external source file to a placeholder on a page, you can have SiteGrinder do it. This feature is specifically made to work in concert with derived pages. So if you have a folder of HTML files (or other media) and a Photoshop design or two, you can have a complete site in minutes.
Using Hints With Layer Groups

One of SiteGrinder's most useful features is its ability to utilize hints in the names of layer groups as well as in the names of individual layers. (Layer groups, introduced in Photoshop CS and formerly called "layer sets", are the little folders you can create in the layers palette. Layer group names are changed in exactly the same way you change layer names.) You could, for example, have a button named "store-button" trigger five separate popup layers each named "store-popup". A quicker way to accomplish the same thing would be to name the five layers whatever you like, then place them in a layer group and name that group "store-popup". The end result will be the same. The -button hint is one of the most useful to employ with groups because it allows you to create buttons from a combination of true text and image layers. (See "Layer Group Buttons", below) The following hints can be used with layer groups:

-button -rollover -popup -popdown -hide -menu -nomerge -ignore next-button, prev-button, up-button -thumb
47
Layer Group Buttons

Using the button functionality hints (button, rollover, etc) with layer groups is both powerful and flexible. The most basic use of layer groups with the button hints is just to keep your layers separate in your Photoshop document so they are easy to modify later. You might have one layer group with 5 image layers named "fancy-button" and another layer group with 3 image layers named "fancy-rollover". In this case you don't need any hints on the layers in the groups, just on the groups themselves. SiteGrinder will merge each group and program the resulting graphics as if you had simply placed the hints on individual layers. The next level of power comes from using the -rollover hint on constituent layers within the layer groups instead of using a separate layer or group as the rollover state. You might create a layer group named Home-button. Within this group you might have a layer named fancy background. If you add another layer in the same group named fancy background-rollover then it will swap with the fancy-background layer when the button is rolled over. The other layers will stay the same. You can also create "hybrid buttons" that have both styled text and image elements. In this case you can take advantage of both the text button rollover effects and the image button layer swapping rollover effects simultaneously! Sometimes a design will call for a button with a graphical background but a text label. We call this a "hybrid" button and it is amazingly easy to create them in SiteGrinder using layer sets. Here is how it's done starting with a new empty document in Photoshop: 1. Create a button sized graphic in a new empty graphic layer (Put a nice effect on it for fun. We used bevel & drop shadow.) 2. Create a type layer with some text for the button with anti-aliasing set to "None" 3. Create a new layer set 4. Name the set whatever you like followed by the "-button" hint (in the example at right we called it "Coolbutton") 5. Put the graphic and text layers inside the new set 6. Make sure the text is on top of the graphic layer so you can see both 7. Save the file and open SiteGrinder from Photoshop's File->Automate menu 8. Click the "Build" button. You're done!
48
That's it! Sitegrinder has now created a page with a hybrid button on it. You can even create a separate graphical rollover layer so that a rollover swaps with the graphic background and applies the text rollover effect at the same time! The graphic rollover layer doesn't need to be in the "-button" set, it only needs to match the "-button" set name, so in this case you would use "Cool-rollover". To recap: Sets can be used like layers for rollover, button, popup and other purposes. You can also mix and match layer types for hybrid buttons and you can do this in any combination. You could have one layer that is a button and a layer set that is its rollover, etc. At this point you should be getting a good sense of exactly how flexible and powerful SiteGrinder is. You may even feel a little dizzy. Don't worry, this is normal.
The Button Workflow and the Smart Layer Group Copy Tool
There are a number of ways to speed up the creation of layer group buttons. Best Practice: If you decide to add layer group buttons to a document that already has a lot of layers, you can work more efficiently by creating a new empty document for experimentation. Design the buttons in this new document so you can build and test very quickly, then, once the buttons function exactly the way you want copy the layers to your main document. Best Practice: Often you will create a number of layer set buttons that are identical except for the text on the button. SiteGrinder 2 includes a "Smart Layer Set Copy" tool to make this easy. It will not only duplicate your layer groups it can find and replace text in your layer names making, for example, "Home-button" into "Gallery-button". It can even shift the copies vertically or horizontally to lay out a menu bar for you.
49
Menus
Introduction to SiteGrinder Menus
SiteGrinder supports three basic kinds of menus: 1. Horizontal text menus made from a single , one-line type layer with the -menu hint. Such menus are often used as navbars at the top or bottom of a page. Here's an example of a horizontal text menu with the "Contact Us" item hilited:
2. Vertical text menus are made from a single, multi-line type layer with the -menu hint. These are often used on the upper right of a site page as a site menu. Here's an example of a vertical text menu with the "Servers" item hilited:
3. Menus made from a layer group with the "-menu" hint. These menu groups contain "-button" layers that can be image or text. These kinds of menus can look pretty much however you like since they can be entirely made of image layers, including text layers outputting as images. Here is an example of an image menu with the "Account" item hilited:
50
(These screen captured menus weren't made with SiteGrinder, but all of them could have been.) When SiteGrinder encounters the "-menu" hint it considers all of the menu items to be buttons. Because menu items are just like buttons they can do all of the following:
Menu items can auto-link to pages by matching to page names. Because the items appear in a "-menu" layer they don't need the "-button" hint. If a line of text in a type layer with the "-menu" hint consists of the word "Home" then that menu item will automatically link to the page named "Home-page". Other kinds of links can be set on each menu item in the "Buttons" panel, just like they are standard "-button" layers. Menu items can trigger popups in the same way. A text menu item named "Home" will trigger any and all "Home-popup" layers. This is also true for the "hide" and "-popdown" hints. For text rollover effects on your text menu items you use the "Text Buttons" panel just like with individual text "-button" layers. The difference is that you set the rollover effect for the all of the menu items at once rather one button at a time. You can set unique rollover effects for each text menu, but not for each button within the text menu. Image items in a layerset menu are just "-button" layers, so they need separate "rollover" layers if you want them to change in appearance on rollover. Layer groups buttons are allowed in layer set menus
Menus have three advantages over just using individual button layers:
51
1. It is much quicker to make a single type layer with 8 lines than it is to make, name, and position on the page 8 individual "-button" layers 2. Menus items which link to pages in your site can remain in their hilited state when you are viewing the page they link to. This helps remind your site visitors which page they are currently viewing. 3. A menu can remain hidden until a button trigger causes it to appear, like a popup. (See "Multilevel Dropdown Menus" below.)
Introduction to Text menus

In most respects text menus simply provide a very fast and convenient way to make a set of text buttons contained in a single type layer. When SiteGrinder looks at a text "-menu" layer it identifies the menu items contained within and treats them just like regular text buttons. These items obey the default text normal and rollover styles unless you add a custom rollover style for them, which is done on a menu-by-menu basis. These items auto-link if their text matches a page name. They can also be given custom links of any type using SiteGrinder's "Buttons" panel just like "-button" layers.
Horizontal Text Menus

To make a horizontal text menu you create a single type layer containing just one line. On this line you enter your menu items, separated either by 2 or more spaces or by the "|" vertical bar character. That's how SiteGrinder knows which phrases represent individual menu items. The previous example demonstrated the creation of a vertical text menu using a multiline text layer. This example demonstrates a similar technique that allows you to create a multi-item horizontal text menu using a single-line text field. As with other text layers you wish to keep as text on the final web page you should use paragraph text rather than point text. In vertical text menus SiteGrinder creates a menu item from each line. In horizontal text menus SiteGrinder checks for items are separated from one another using either two or more spaces or else the common technique of using the vertical bar character (found on the keyboard over the backslash character). Thus a one-line type layer with the "-menu" hint that contains either "Item 1 Item 2 Item 3" or "Item 1 | Item 2 | Item 3" will produce a three item horizontal menu. These Guidelines will avoid problems with horizontal text menus:

Always center align the "-menu" type layer Use extra spaces to separate menu items Make sure Photoshop's "Space Before" setting is set to zero for the layer
52
As with vertical menus SiteGrinder will generate a page for each item and automatically add links to the right page for each item. Here is how it's done starting with a new empty document in Photoshop: 1. Create a new Paragraph type layer by dragging out a rectangle with the type tool. 2. Enter four or five likely page names on one line, separating each item from the next using two spaces. (Each menu item can have multiple words as long as they are separated by only one space) 3. Now rename the layer "sample-menu" 4. Set the alignment for the layer to Centered 5. Save the document and open SiteGrinder from Photoshop's File->Automate menu 6. Click the "Build Preview" button. You're done! That's it! Sitegrinder has now created the correct number of HTML web pages each with a menu for jumping to the others. Click on the items in the built page to see. As with a vertical text menu a new page is generated for each item. Menu items are much like buttons and appear in the list of buttons in SiteGrinder's "Buttons" and Text Buttons" panes. They will automatically match pages that match their name. If you want a menu item to match to something else you can add a -link layer matching the menu item's name (i.e."Home-link" for the "Home" item in the above example) or you can reassign links in SiteGrinder's Button's pane. You can control how the items change appearance on rollover in the SiteGrinder window's "Text Buttons" pane.
53
Vertical Text Menus

To make a vertical text menu you create a paragraph type layer with a menu item on each line. SiteGrinder considers each line to be equivalent to a unique text button. Even though there are no graphics involved used in text menus you can get some very nice visual effects Vertical text menus obey most of Photoshop's paragraph settings, so you can indent menus items and place vertical space between items. When applying background colors for a vertical text menu's normal and rollover states, SiteGrinder uses the full width of the paragraph type layer's box. You can always check this box by selecting the layer and then selecting the move tool. If you want to change the size of the box make sure to enter text editing mode for the layer before you do so. (Enter text editing mode by double clicking on the text layer's thumbnail in the layers palette.) While you can create a text menu by just creating and aligning individual text buttons, because text menus are so common SiteGrinder provides an amazing shortcut for creating them along with the pages they link to. The faster and more convenient way to create a text menu in SiteGrinder is to use a single text layer. If a multi-line text layer has the "-menu" hint then SiteGrinder will assume each line of text corresponds to a hyperlink to a page SiteGrinder will be creating. In other words, a five line text layer with a "-menu" hint is similar to five individual text layers each with the "-button" hint. Thus in the following example SiteGrinder will generate a text menu and the pages the menu items link to all from a single "-menu" text layer. Here is how it's done starting with a new empty document in Photoshop: 1. Create a new type layer 2. Type four or five likely page names, one on each line. (We'll use Home, Gallery, Contact, and Store) 3. Now rename the layer, adding "menu" to the end of the name. We used "mysite-menu". (The fastest way to rename a layer is to double click directly on the name in the layer palette.) 4. Save the document 5. Open SiteGrinder from Photoshop's SiteGrinder 2: Zero-To-Hero Guide 54
File->Automate menu 6. Click the "Build Preview" button. You're done! That's it! Sitegrinder has now created the correct number of HTML web pages each with a menu for jumping to the others. By looking at the address area of your browser as you click between the pages you can see that each page has a different name, and that the name is based on the name of the menu item that links to it. The pages themselves don't look like much because we haven't added any content to them other than the menu itself, but we're well on our way to creating a very functional site. And all with one click! Notice that we never added any "-link" layers and yet the menu links are all functional! Since SiteGrinder created the pages it automatically knew how to link them so no explicitly defined "-link" layers were required. When building a site SiteGrinder will create a new HTML page for every button you have defined whether in a menu or not. Often you will have a few buttons that link to pages that SiteGrinder isn't generating. Sometime you might want to link to pages on your site that already exist and other times you may want to link to outside web sites. Once you open SiteGrinder you can specify which buttons should create pages and which will just be links to already existing pages before you build. Virtually every button on a web page, whether a graphical rollover button or a phrase or line in a text based menu, represents a link to a web page. Generally these links are to other pages in your own site. SiteGrinder assumes that every button you specify in a "-button" or a "-menu" layer corresponds to a page you want to generate unless you have designated a "-link" for that button. The reason for this is that you don't need to specify "-link" layers for buttons that link to pages SiteGrinder is generating, only for URLs for pages that already exist or for things that aren't web pages like email addresses or files to download. If you create a layer comp or page definition that corresponds to a button name (i.e. a layer named "About-button" and a layer comp named "About") then you don't need to do anything else to hook the button to the page. SiteGrinder will program the link automatically. Menu items are just like buttons in this regard. If you create a text layer named "my sitemenu" and its contents are "Home | Gallery | Store" then SiteGrinder will automatically connect the three menu items to layer comps named "Home", "Gallery", and "Store". If you want the "Store" item to link to a page that already exists you can set this in the "buttons" pane of SiteGrinder's user interface, or you can create a text layer called "Storelink" and place the URL in this layer's contents.
55
Layer Group Menus

Layer group menus are made up of individual "-button" layers or "-button" layer groups that you place in a layer group with the "-menu" hint added to its name. There are two reasons to use layer group menus:

The hilited (rollover) state of the buttons/menu items can visually track the page being viewed They can be used to turn an arbitrary set of buttons into a popup (ie dropdown) menu for total flexibility(see below)
Otherwise a layer group menu is just a bunch of buttons in a layer group. This means they can be placed anywhere on the page and be made up of text, images, or even hybrid buttons made from layer groups placed inside the "-menu" layer group.
Three different ways to make a menu

SiteGrinder is powerful, and so there are often multiple ways to achieve essentially the same goal. Here we will use three different techniques to make a text menu. This exercise will help you understand text buttons, links within text, and menus. The goal will be to create a text menu of failed presidential candidates like this one: Thomas Pinckney Daniel Webster Eugene Debs Robert Dole Here are the items and their links:

Thomas Pinckney, www.schistory.org Daniel Webster, www.dartmouth.edu Eugene Debs, www.eugenevdebs.com Robert Dole, www.bobdole.org
There are three obvious ways to accomplish this with SiteGrinder:

4 text buttons using the "-button" hint A single type layer containing all four names and an accompanying layer with the -links hint A single type layer using the -menu hint
The "-menu" hint is the best way to go, but we'll work through all three so you can see the differences. 1. Creating the menu with individual text buttons
56
1. In an empty Photoshop document create four type layers each with the name of a candidate and position them in a horizontal line as shown to the left. 2. Add the "-button" to the end of each of their names. Thus the layer containing the text "Robert Dole" should be named "Robert Dole-button" 3. Now create four new type layers and type one of the links above into each one 4. Now rename the layers you just made to appropriately match the name of the corresponding candidate layer, adding "-link" to the end. Thus the layer containing "www.bobdole.org" should be named "Robert Dole-link" 5. Save the document and open SiteGrinder from Photoshop's File->Automate menu 6. Click the "Build Preview" button. You're done Things to note:
The button name doesn't have to match the contents, but does have to match the link layer's name. Notice in the example we used shorter versions of the candidate's names in the layer names The "-link" layers are just for storing link information. They aren't visible on the final page even if they are visible in the Photoshop document. Because of this their horizontal and vertical positions don't matter. It is generally convenient to draw them near to their buttons for convenience and keep them hidden most of the time so they aren't distracting.
57
We could have used the Buttons pane of the SiteGrinder Window to set the links instead of using "-link" layers This is the least efficient way to make a text menu, but has the advantage of allowing you to position the buttons wherever you like, not just in a line. The buttons are independent of each other. When entering URLs in links layers you don't have to include "HTTP://" at the beginning. if you leave it out, SiteGrinder will fill it in for you when it builds the page. Normally SiteGrinder builds a page for every button, but since these buttons all link elsewhere it will only build one page
2. Creating the menu with one text layer and one "links" type layer
1. In an empty Photoshop document create a new Paragraph type layer by dragging out a rectangle with the type tool. Make it big enough to contain all four candidate names on one line 2. Enter the candidate's names into the field all on one line. 3. Name the field "also rans" and set its anti-aliasing to "none" in Photoshop's character palette. This will be the menu. Now it needs a "-links" layer so it can know what the links are. 4. Make a new type layer and type each candidates' name on a line followed by the corresponding web address on the next line, followed by an empty line, followed by the next candidate until done. (See left) 5. Name this layer "also rans-links" (Note, the hint here is "-links" with an "s" to distinguish it from the "-link" layers in the previous example! 6. Save the document and open SiteGrinder from Photoshop's File->Automate menu 7. Click the "Build Preview" button. You're done! Things to note:
"-links" layers are only used with plain text layers that SiteGrinder is going to output as real text (ie set anti-alias to "None")
58
This technique is not generally ideal for menus, it is more for placing links on text within type layers. It will locate text to link within other text, so if you added "lost by a landslide" after "Thomas Pinckney" in the text layer the links will still all work when SiteGrinder builds the site, but "lost by a landslide" will correctly have no link. Try it!
3. Creating the menu with one "-menu" type layer
1. In an empty Photoshop document create a new Paragraph type layer by dragging out a rectangle with the type tool. Make it big enough to contain all four candidate names on one line. 2. Enter the candidate's names into the field all on one line, separating each full name from the next with two spaces 3. Name the field "also rans-menu". 4. Set the paragraph alignment of the layer to "Centered" 5. Save the document and open SiteGrinder from Photoshop's File->Automate menu
59
6. Click on the "Buttons" tab near the top of the window 7. For each candidate in the list of buttons, click in the link column to the left of the candidate's name, select "URL" from the "Type of Link" area, and enter the URL for the candidate. (see above) 8. Click the "Build Preview" button. You're done! Things to note:

Menu items are a lot like buttons. They show up in the "buttons" list, for example, allowing you to set links for them The main difference between menu items and buttons are that the name of the menu item button is the same as the item itself, whereas for buttons such as those in the first example the name of the text button is the name of the layer. We could have used the "-link" layer technique from the first example to put in the links instead of the SiteGrinder UI. For example a layer named "Robert Dolelink" will match the "Robert Dole" menu item. Notice on the resulting pages how the rollover hilite (the default is italic) stays active for the item corresponding to the page you are viewing. This is a text menu feature called "hilite stays" and can be turned off in the "Text Buttons" pane. The buttons in the first example would also obey the "hilite stays" setting if we had placed them all in a layer set and added the "-menu" hint to the end of the layer set's name. Try it!
Multilevel Dropdown Menus

Sometimes you may want a menu to be hidden until a button is rolled over. This is called a popup (or dropdown) menu. The SiteGrinder "-menu" hint supports this functionality automatically. A "-menu" acts as a popup menu when it matches the name of a button or menu item. You don't need to add the "-popup" hint, this is an automatic behavior of SiteGrinder's "menu" layers and "-menu" layer groups. This works both with text and layer group menus. If you have a "-menu" layer named "Portfolio-menu" and you add a "-button" named "Portfolio-button", then SiteGrinder will hide "Portfolio-menu" on the built page until the user rolls over "Portfolio-button". There is no limit to the depth the menus can go. If "Portfolio-menu" has an item named "Sports" then it could conceivably trigger another menu named "Sports-menu". The positions of these popup menus when they appear is entirely determined by their placement in the photoshop document.
60
There are pre-built sample files to help you learn about this feature. To access them open SiteGrinder and click on the "Sample Files" area of the report panel. Scroll through them to find a file of interest and click on it to open it in Photoshop. Close SiteGrinder and examine the layers and layer names. Try to imagine what their functions rill be when SiteGrinder builds them. Then open SiteGrinder again, click the build button, and examine the results when they open in your browser.
Making a text popup menu

Popup menus are accomplished simply by naming a "-menu" set after the button that should trigger the popup menu. If there is a button named "Personnel-button" and a set named "personnel-menu", then that menu will appear when "Personnel-button" is rolled over. The buttons inside the "personnel-menu" set can even have their own rollovers and even their own menus. This is easiest to demonstrate with some multi-line text menus. Here is how it's done starting with a new empty document in Photoshop: 1. Create a "paragraph text" text rectangle To create a text rectangle you drag with the type tool. 2. Put in a couple of lines of text like "Products" "Personnel" This will be our main menu, the one that triggers the popups. Make sure the text box is wide enough so that each item fits in its own line. 3. Name the layer something like "Main-menu" 4. The layer is shown with it's bounding box. Notice we have left a little room on the right side to accommodate increased space that will be taken up by the text if it uses the default italic rollover hilite style. This is a good idea because if you cut it too close turning italic may cause the text to wrap.
5. Create another text rectangle for products and put some lines of text in it. (we used the Media Lab product line) 6. Name that layer "products-menu"
61
7. Create another text rectangle for personnel and put some lines of text in it. 8. Name that layer "personnel-menu" (You guessed it, didn't you?) 9. Now position the products and personnel layers with the move tool so they are flush against the right side of the main-menu layer 10. Open SiteGrinder and click the "Build" button. You're done! 11. That's it! Sitegrinder has now created a page with a text popup menu along with pages for each menu item and the navigation programming to jump between them.
At this point you may wish to open SiteGrinder again and play with some of the text button settings to get some fancier rollover results like changing the background color of the menu items, etc.
62
Notice how the rollover hilite sticks around for the page that you are currently visiting. This behavior is the default and can be turned off. One of the most powerful features of this easy menu system is that menus can mix and match of all of the SiteGrinder elements we have seen so far. In other words you could have a graphical button pop up a text menu and some of those text menus could in turn pop up graphical menus, etc. You can even have a single menu with some text and some graphic elements. The mind boggles. The menu adding process can go on for as long as you can think of new menus and items to fill them with. If you wanted to add submenus to one of the products, let's say "SiteGrinder", you would just create another multi-line text menu with relevant items (let's say "Tech Support", "Download", etc.), name it "sitegrinder-menu" and position it where you want it to popup, probably just to the right of the "products" layer's text box.
Making a graphical popup menu from a layer group

A graphical popup menu is just a graphical menu with a matching button or menu item to cause it to appear. Thus to create a graphical popup menu you need a layer set whose layer name ends with the "-menu" hint containing at least one graphics layer whose name ends with the "button" hint. Here is a screenshot from a Photoshop document with 2 buttons that each trigger a popup menu:
63
Rolling over "graphical-button" will display the "graphical-menu" set when you are viewing the final page. Similarly "menus-button" will trigger the "menus-menu" set (currently hidden). In this case the buttons within the "-menu" sets are layer sets themselves containing the graphics for the buttons and rollover versions for them, but this is not necessary. They could be graphics or text layers with the "-button" hint instead of sets.
Making the menu hilite indicate which web page the user is viewing
If you use a text or graphical menu for navigation of your site you may wish to have the menu item for the page the user is currently viewing remain in it's rollover state to visually reinforce the location. To do this, you merely need to turn on the Menu Rollover Track active page setting in the SiteGrinder Settings UI pane of the SiteGrinder Window.
64
Advanced Techniques
Decorations
Browsers support colored borders and backgrounds for various elements. Even though these kinds of decorations are not supported by Photoshop you can still add them with SiteGrinder using the SiteGrinder Window's "Decorations" panel. Everything SiteGrinder found in your document that is eligible for decoration will appear in the Decoration panel's "layer" column. Clicking in the "Border" column to the right of a layer will open this dialog:
Here you can set:

Whether to use a border Border width (Thickness) Border style (dashed, solid, etc) Border color Which side(s) the border should appear on Whether to use a background color What background color to use
Example: Here is an example of text with a dashed blue border and yellow background color decoration. It is much more efficient for downloading to use these decoration settings than it is to create similar effects with Photoshop image layers.
65
The following layer types may have decorations and will be listed in this dialog:

Text layers Image layers containing only a rectangle of a single color -picturebox layers -xmedia layers
Text buttons, text menus, and thumbnails can also have certain decorations, but they are not set in this panel. Text buttons and text menu decorations are set in SiteGrinder's Text Buttons panel. Decorations for gallery thumbnails are set in SiteGrinder's "Galleries" panel.
Image Galleries
SiteGrinder is very, very good at creating web galleries from folders of jpeg images. SiteGrinder allows you to lay out your galleries in a totally flexible manner, and it allows you to set up navigation any way you like while providing convenient automation to every aspect of the process. The SiteGrinder gallery system, while simple to use, has far too many features to describe here. Totally flexible image galleries are a major new feature of SiteGrinder 2 Pro, with a huge number of options. This feature is aimed at photographers, artists, gallery owners, and anyone else with a number of images they wish to display in an attractive, flexible, and easily navigable gallery format. It is possible to create a gallery of images with SiteGrinder Basic, but it involves the manual creation of many pages and buttons. SiteGrinder 2 Pro supports robust automatic gallery creation from folders of images based on a very small number of buttons and pages in the Photoshop document.
Gallery feature list

Automatic forward / backward sequential navigation between images Custom layouts to match any image width-to-height proportions Choose "Letterboxing" or cropping when image size/proportions don't match display areas Images can be given alt tags for search engine support Custom compression settings for images that require resizing Auto-creation of thumbnail images at user-chosen sizes and positions Auto-linking of thumbnails to full-sized images 66
Optionally place thumbnails on same page as full-sized images Pages with full-sized images can also display jpeg metadata in multiple areas anywhere on the page using custom text styles Auto creation of navigation from image pages back to thumbnail pages Standard SiteGrinder buttons can act as thumbnails Layer sets/groups can function as thumbs Layer set/group thumbs can use image metadata to uniquely label each thumbnail Auto creation of grid layout of thumbnails (thumbsheets) Thumbsheets can be scrolling and have customizable spacing between thumbs Auto creation, when necessary, of multiple pages of thumbs with navigation Optional support for already existing thumbnails Support for "rotated" jpegs
The Gallery Workflow

Galleries are created in the following way: 1. Create a single page design using a layer comp with the -gallery hint and an image layer with the -picturebox layer hint. The -picturebox layer indicates where a full-sized image should be displayed on the page. The -gallery layer comp hint allows SiteGrinder to associate this gallery page with any other pages in the same gallery, such as thumbnail pages. 2. Add next, previous, and, optionally, up buttons to this single design for sequential navigation from one image to another and, optionally, from the full-sized image pages back to thumbnail pages. SiteGrinder will atumatically link these buttons as appropriate on each page of thumbnails or images. 3. Optionally create another layer comp page design with the same name as the first comp indicating size and position of thumbnails images for navigation directly to corresponding images. 4. Open SiteGrinder Pro and use the Galleries pane to identify the folder of images on your hard disk from which to generate the gallery. Thus a folder of image files and one or two Photoshop page designs will generate a complex gallery with both thumbnail-based and next/previous-based navigation.
The Hints Associated with Making Galleries

Click on a hint for documentation:

-gallery -picturebox -thumb -thumbsheet -metadata next-button / prev-button up-button
67
Starting A Basic Auto-Generated Gallery With Next/Previous navigation

The recipe for the simplest auto-generated gallery includes the following ingredients:

A folder of images on your hard disk A layer in a Photoshop document with the -picturebox hint "next" and "prev" buttons to navigate from one image to another A layer comp with the -gallery hint in which the -picturebox is visible
The four layers in the screen-grab below represent everything it takes to make a gallery that has no thumbnails - and technically you don't even need the background layer. (We'll get to the thumbnails, just hold your horses!)
The -picturebox layer is a rectangular image layer which will indicate to SiteGrinder where you want your images to appear on the page and what size to make them. You can use a solid rectangle or, for more of a what-you-see-is-what-you-get experience, use an example picture from your gallery that you bring into the document. What's important is the size and position of the layer, and adding "-picturebox" to the end of its name.
Step 1: Create a facsimile of the document pictured above from scratch:

1. Create a new Photoshop document of about 500X500 pixels.
68
2. In an empty image layer create a rectangular selection for the -picturebox like the one above that's about 2/3 the size of the document. 3. Fill the selection with a color 4. Name that layer example-picturebox 5. Create a type layer and enter something like "Previous Image" as its contents. Name that layer prev-button and position it in the lower left. 6. Create a type layer and enter something like "Next Image" into its contents. Name that layer next-button and position it in the lower right.
Step 2: Create the gallery page

1. Open the layer comps palette from Photoshop's Window menu if it isn't already open 2. Click the "New layer comp" button at the bottom of the palette or select "New layer comp" from the palette's popup menu. 3. Name the new layer comp example-gallery. You are now done with your Photoshop duties.
Step 3: Use SiteGrinder to Locate the Image Directory

1. Save the document and open SiteGrinder 2 from Photoshop's File->Automate menu. 2. Select "Galleries" from the tabs at the top of the window.
Here you can point SiteGrinder to the folder of images you wish to display\in the space indicated by the size and position of the -picturebox layer you made. This panel displays, in the "Page" column on the left, a list of all the sets of gallery pages it found in your document. In this case there is only one, named "example" after the example-gallery layer comps you made.
69
Clicking in the "Source" column to the right of the gallery's name will bring up a dialog in which you can choose a folder of images and set other options.
1. Click the "Image Folder" button. 2. Use the folder selection dialog to find and select a folder of jpeg files. (If you don't have one handy, navigate to your Photoshop plug-ins folder and then into Media Lab SiteGrinder Pro/SiteGrinderDemoFiles and select one of the image folders there.) 3. Click OK. 4. Click the "Build" button at the bottom of the SiteGrinder window. SiteGrinder will generate a web page for each image. The first page will have only a next button and the last page will have only a prev button. All other pages will contain both next and prev buttons. SiteGrinder automatically handles the visibility of next-button and prev-button layers on the first and last pages of -picturebox galleries. Once the pages are generated, SiteGrinder will open one in a browser where you can use the navigation buttons to move between them.
Moving On
At this point you will want to save a copy of your file. There are a number of tutorials linked to below which begin with the file you've just created. Keep an unchanged version of the file you have just finished so you can perform many or all of these with a copy of it.
Be sure to follow at least one -thumb or -thumbsheet tutorial before building your own galleries.
Additional tutorials on creating galleries are on our website: http://www.medialab.com/sitegrinder/support/sg2tutorial_gallery1.html SiteGrinder 2: Zero-To-Hero Guide 70
Creating Flash Slideshows from Folders of JPEG Files

A SiteGrinder slideshow is an animated Flash movie that presents a series of jpeg images with optional visual transitions from one image to the next and optional background music. Slideshows are made from a single image layer with a rectangle representing the dimensions of the show and where on the page it should be positioned. Once you have created that layer you add the "-slideshow" hint to its name and open SiteGrinder. Then you use the "Slideshow" panel to tell SiteGrinder where your images are and what type of transitions, timing, and background music you would like SiteGrinder to use. Slideshows sequentially present a folder of jpegs in the form of a Flash movie with the following options:

Transition animations such as crossfade with customizable settings MP3 music soundtrack Hyperlinks on the whole show or unique to individual images Multiple slideshows per page supported Images scale to fit the slideshow placeholder size Optional controller with next/prev/pause functions
Slideshows can be a fun way to present your portfolio, but they can also act as small eye catching elements on a page to call attention to specials, entice viewers to another part of your site, etc. The slideshow hint is applied to an image layer whose rectangular contents act as a placeholder. The slideshow will be the same size as the contents of the placeholder layer and will replace that layer in the final output. When the slideshow hint is used the Slideshow UI pane will become visible when you open SiteGrinder. For each combination of a slideshow layer and a page there will be an entry in the Slideshow UI where you can select a folder of source images for the slideshow and choose settings. Note: Flash slideshows will automatically come to the top of your page. Any other web graphics or text that overlap this layer will be obscured by the slideshow
71
Basic Steps to Create a Slideshow

This example assumes you have a folder of jpeg images on your local disk. 1. In a Photoshop document add a new layer to be the slideshow placeholder 2. WIth the new layer active, make a rectangular selection with the marquee tool that is the size you would like your slideshow to be 3. Fill the selection with any color 4. Change the name of the layer to anything you like and add the -slideshow hint to the end. (example: "test-slideshow") 5. Open SiteGrinder 6. Select the "Slideshows" panel 7. You should see your slideshow listed in the left hand column 8. Click the left hand column next to your show to open the settings dialog 9. Choose the type of show and any other options 10. Use the Browse button to find your folder of jpegs 11. Close the Slideshow settings dialog and click SiteGrinder's "Build" button SiteGrinder will build the page and the slideshow will automatically load and play when that page is opened in a browser.
How Images Fit Into the Slideshow Rectangle

The Flash slideshow will always proportionally size the source images to the correct size when source images are larger than the slideshow layer contents. It will never distort the shape of the images. Source images that are smaller than the slideshow rectangle are never stretched larger they are simply centered in the slideshow rectangle.
Adding Music
You can add music to a slideshow by placing an MP3 music file in the folder of images you are building the slideshow from. SiteGrinder will copy this file to your build folder. Music will pre-load so it can begin playing at the same time the slides do. This can potentially delay the start of a show. Pausing the show with the navigation controls will also mute the music.
72
Navigation
The Flash slideshow has a built in control for forward, previous, pause and play. This control is only visible when the person viewing the slideshow has rolled over it with their mouse. You can optionally turn this control off in the Slideshow settings dialog accessible in the Slideshows panel of the SiteGrinder window.
Requirements for Viewing

In order to view your slideshow, users will have to have Flash Player 7 or later installed in their browsers. You may wish to provide them with this link in order to obtain the latest version of Flash: http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=Sh ockwaveFlash Currently non-progressive jpegs are the only supported image format.
Options
Different slide show styles have different playback options. These include fade in time, fade out time, and duration for each slide. You set these options in the Slideshow settings dialog accessible from the Slideshows panel of the SiteGrinder window.
Hyperlinks
You can set a hyperlink for your show in the Slideshow settings dialog accessible from the Slideshows panel of the SiteGrinder window. If you type a URL into the "Link URL" field then it will be the same for every image. You can provide unique links for each image using metadata by following these steps: 1. Select a metadata field to hold the link. The "description" field is a good one. 2. Use a tool like Adobe Bridge to add your URLs to the JPEG metadata of each image in the field you selected. 3. In the "Link URL" field enter the metadata code for the field you selected. In this case it would be "[[description]]" (without quotes)
73
Advanced Features For Exploration

SiteGrinder 2 Pro contains a number of other features that are beyond the scope of this guide. Here is a list with links to further resources: Forms. SiteGrinder 2 Pro let's you create forms that users can enter information into. You can use these to create email feedback forms, google map "get directions from your location" forms, etc. http://www.medialab.com/sitegrinder/support/sg2hint_form.html Growable pages. SiteGrinder 2 Pro allows you to create page areas that can grow or shrink vertically after the pages are built in such a way that footer elements below the expanding/shrinking ares move up or down accordingly. Such resizing might occur because the user changes text size or because you or someone else edits the contents of these areas after building. This feature is only necessary when footer elements below the expanding areas are involved. http://www.medialab.com/sitegrinder/support/sg2hint_grow.html External HTML. SiteGrinder 2 Pro provides various ways of incorporating external HTML into the pages it creates. You can import such HTML when pages or built, or even later, when the page is requested by the user from the web server. This feature is very powerful but must be used carefully. Invalid, poorly formed HTML files that are imported using SiteGrinder Pro can ruin the display of your pages in many or even all browsers. http://www.medialab.com/sitegrinder/support/sg2overview_xmedia_html.html
74
Reference Guide
Complete List Of SiteGrinder Panels
The SiteGrinder Window
The Global Controls
Certain controls are always available along the bottom of the SiteGrinder Window:
Close Button Closes the SiteGrinder window, storing custom SiteGrinder settings inside your Photoshop document. Once you close SiteGrinder you must use Photoshop's Save command to save your document or the settings will not be preserved. Register Button Opens the Register dialog. Use this dialog to enter your SiteGrinder 2 Basic or SiteGrinder 2 Pro unlock code. Documentation Button Opens the SiteGrinder documentation navigator. Build Button and Build Menu Builds your web site based on your current settings. The type of build and the location of the built pages depends on the setting of the Build Menu. About Button Opens a panel with general information about SiteGrinder and how to contact Media Lab. Settings Button Opens the Settings panel, where you can change certain aspects of how SiteGrinder builds your pages.
75
The Tabbed Panes of the SiteGrinder Window

Many features of SiteGrinder are accessed simply by adding hints like "-button" and "rollover" to the names of certain layers of your Photoshop document. Other features are more easily set using custom controls. These controls are found in the SiteGrinder Window that opens when you select "SiteGrinder 2" from Photoshop's File>Automate menu. It is here that you will find panels that allow you to set or adjust things like page settings, button settings, etc.
SiteGrinder only makes panels visible when they are relevant to the content of your document. You won't see the Slideshow panel unless you have a layer with the -slideshow hint, for example. Each panel contains a column of elements (usually layers) on the left and a corresponding column of settings on the right. To change the settings for any particular entry, click in the settings column next to the desired entry.
76
The Report Panel

When you open SiteGrinder it analyzes the topmost Photoshop document and then displays the report pane:
This Pane has four main sections:

The Summary The Pre-Build/Post-Build Report The Learning SiteGrinder Area The Control Panel
The Summary
At the top of the report you can check a brief summary of whether or not SiteGrinder thinks your file is ready to build.
77
If SiteGrinder has found problems, you should review the Pre-Build report, which appears below the summary. After the build this area will contain a link to the folder where SiteGrinder built your pages. Click on the link to open the build folder. The "Control Panel" button will give you access to ftp and PHP functions.
The Pre-Build/Post-Build Report

This is the largest area of the report. Before you build you can read through any error or warnings. SiteGrinder will catch most common errors, often caused by typos in your layer names, and report them here. You can save time by reading them carefully and fixing the problems without instead of waiting to build before you discover them. Errors messages include hyperlinks to relevant documentation. Clicking the Details button of the Pre-Build Report reveals which layers will be output as text and graphics, and how many pages are defined. Clicking the Menus section of the Pre-Build Report displays information about the menus and popups SiteGrinder will build. Once the site has been built you will see a post-build report in this area with details about how many files were created, how big they are, and how this will affect the download sizes of your pages.
The Learning SiteGrinder Area

On the left you will notice four buttons containing resources to help you learn SiteGrinder:
The Sample Files button shows a list of files that demonstrate a variety of basic and advanced SiteGrinder features for you to examine and build. Clicking on one of these files will open it in Photoshop and tell SiteGrinder to analyze it. At this point you can build the file and examine the results in a browser or you can close SiteGrinder and look at the layers that make up the file in Photoshop. We recommend you do both. The Tip of the Day button will show information about random features of SiteGrinder you may not be aware of. Each time you click a new tip will be displayed. The Tutorials button provides links to step-by-step tutorials demonstrating various SiteGrinder features The Documentation button provides links into various subject areas of SiteGrinder's User Guide.
78
The Control Panel

Clicking the Control Panel button in the summary area gives you access to several SiteGrinder utility functions:

The Save Report button allows you to open the report in a browser so you can refer to it even after closing SiteGrinder to help you fix any problems that it lists. The Delete Old Previews button frees up space on your local disk by deleting any files created by "Preview" builds. These files are stored in the SiteGrinderData folder in your personal documents directory. The FTP Staging Upload button (Windows only) The FTP Upload Site button (Windows only) The Test PHP button attempts to upload a PHP test file to the ftp server specified in the Settings Panel and then open it in a browser. You will be able to tell if your server supports PHP from the results shown in your browser.
The Photoshop Files Panel
SiteGrinder can create pages from more than one Photoshop file at a time. Normally SiteGrinder assumes that the active (topmost) Photoshop document is the one you want to generate pages from. The pages panel lists all of the other open Photoshop files in case you would like to add additional files to your build. You can also choose files that are not yet open in Photoshop by clicking the "Add" button. After you have included additional files in the build by activating the checkboxes next to the file names you must click the "Update" button in order for SiteGrinder to pre-process them. Otherwise they will be ignored. Pre-processing can take time for complex documents, so SiteGrinder waits for you to add all of the additional documents you want and then click "Update". Once the documents have been chosen and the "Update" button clicked, SiteGrinder treats multiple files as if they were one large file with the layer names and layer comps from all of the files. This means that buttons from one file can refer to pages in another if they use the same name.
79
The Pages Panel
All of the pages SiteGrinder will generate from your document are listed here and can have their page settings modified or can be omitted from the build. The list of pages contains a page for every button SiteGrinder identifies in your document that doesn't have a corresponding "link" layer leading to a page that already exists in your site or else's site. The page names are created from the button names. Thus if a button is named "homebutton" and you haven't linked this button to something else with a "-link" layer or the SiteGrinder Buttons Pane, then SiteGrinder will assume you wish to make a page called "home.html." If there are buttons in your document which are not linked to anything (ie they do not match any page layer comp name and you have not set a specific link for using the "Buttons" panel or a "-link" layer) then pages named after these "orphan" buttons will show up in purple with a grey background. These are called "cloned pages" because you can build them as copies of pages that you have defined for other buttons and they are very useful for creating template pages. (See below.) Default Settings and Custom Settings The "Default Page Settings" can be changed here and will apply to every page SiteGrinder creates unless you add custom settings for specific individual pages. This means, for example, that you can set the default alignment to center all pages
80
horizontally, but you can make an exception for one particular page that should be left aligned. To change a page's settings you click in the settings column of the page list in the row of the page you wish to modify.
At this point a dialog box will appear in which you can specify custom settings or choose to use the default settings:
If you click OK the custom settings for this page will be displayed in the appropriate row of the settings column. To get rid of custom settings bring up this window and click "Use Defaults."
81
Setting Alignment
The alignment choices are Left, Center Horizontal, Center Horizontal and Vertical, and Right. NOTE: Due to a bug in Microsoft Internet Explorer 5, that browser will not center vertically correctly within the constraints of XHTML 1.1. This means you must choose between XHTML compliance or IE5 compatibility. This problem does not affect horizontal centering. If you decide that vertical centering that functions properly in IE5 is more important then it is relatively easy to work-around this problem. If you open up any document created with SiteGrinder, you'll see the following first line:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Just replace that line with this one:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
We will try to address this more elegantly in the future, but XHTML 1.1 compatibility is a major feature of SiteGrinder and if it performed the above step we could no longer make this claim.
Setting Background Colors & Tiles

Use the Exterior Background and Interior Background area to control what colors and tiles appear behind your page contents. See page 38 for a full discussion of background colors and tiles
Setting the "Home Page"

In this pane you can specify a page to be the "home page" of the site by clicking the radio button to the right of the page in the "Home Page" column. This primarily means that the html file for that page will be named "index.html" so that browsers will automatically open that file when they look in your site directory if no specific file is specified. SiteGrinder will automatically adjust buttons linking to this page to link to "index.html". Normally if you have a page called "Gallery Main-page" and a button layer named "Gallery Main-button", a file named "gallerymain.html" will be created and the button will link to it. If you set this page to be your home page then its file name will be "index.html" and SiteGrinder will automatically set "Gallery Main-button" to link to "index.html" instead.
82
Setting Popups that Function on this Page

Sometimes you will want a popup layer to be "sticky" on the page it corresponds to. For example if you had a popup graphic representing the "gallery" page that pops up when the "Gallery-button" layer is rolled over, you may want it to display permanently when the user is actually viewing the "Gallery-page". To achieve this you can set this menu to "Only popups representing other pages" and SiteGrinder will handle the rest. You can also turn off all popups for a given page with this menu.
Setting the page title

Normally SiteGrinder uses the layer comp page name (without the -page hint) to create the HTML "title" for the page. This is the name of the page as it appears in the browser window when the page is being displayed. You can change this here. You can use metadata codes in this field. If you typed "My Great Site - [[pagename]]" in this field, then the page represented by the layer comp named "Home-page" would have "My Great Site - Home" as its title.
Cloned Pages
SiteGrinder creates two kinds of pages, "explicit" and "cloned." (Called "derived" pages in SiteGrinder 1.) "Explicit" pages are specified by the the user as either layer comps (see page 29) or SiteGrinder page definitions created with the SiteGrinder Tools plug-in. If a button name matches to the name of a layer comp or page definition then SiteGrinder uses the layers that are visible in the comp or definition to create the page. "Cloned" pages are created when a button name doesn't match to any layer comp name or page definition name and you haven't linked it to something. In this case SiteGrinder assumes that you wish to make a page that is derived from some other page that is explicit, or, if no explicit pages are defined it will use the current state of the Photoshop document. The "Clone new page from" setting, like the others, has a global choice, but can also have page-by-page exceptions. Cloned pages are very nice for creating template pages with standard graphics and a navbar that you will add main content to in some other tool. That's how we created many of these documentation pages, for example.
83
Setting Page File Extensions

Sometimes, for example if you have PHP code on a page, you'll need to assign an extension to your page HTML files other than "html". Whatever you type in the "Extension" field will become the file extension for the file containing the HTML for your page(s).
The Buttons Panel

The Buttons Panel is available if at least one of your layers uses the -button hint. The Buttons Panel allows you to change the hyperlinks for any of the button layers and menu items in your document. All layers with the "-button" hint and all items contained within layers having the "-menu" hint are listed here. Even if a button layer has a corresponding "-link" layer you can still see and modify the link in this pane.
84
To change the link settings for a button you click the link itself to the right of the button. When you do you will be presented with this options window:
SiteGrinder allows you to set six different kinds of links. Choose from the list of radio buttons on the left and then enter the link information into the fields on the right. Link Types Page The page link panel has a menu that allows you to choose one of the pages SiteGrinder found in your document. This is the fastest and most foolproof way to set a link to a page you are about to build because there is no chance of mistyping. If the button is named after a page this link will already be set. File A file link allows you to choose a file on your local disk to link to. This is most useful if you are building to a folder that is in the folder hierarchy with the page you want to link to. In this case SiteGrinder will automatically generate a siterelative link. URL A URL allows you to type in a complete URL starting with "HTTP://" or "www". Only use this for full URLs. If you want to enter a site-relative URL use the "Literal" link type described below. EMail An email link let's you specify an email address and a subject line for a link. When the user of your page clicks on this type of link their email client will open and a new message with the provided address and subject will be automatically
85
created. You only need to enter the email address itself, as shown above. You don't need to precede it with "Mailto:". none The "none" setting tells SiteGrinder to create an empty link. This link uses the "#" character in the resulting HTML which essentially links to the page you are already on. This is provided so that you can set up a link and add the specific URL later in another package. Literal The "literal" link is used for anything not explicitly provided for above. SiteGrinder will set the exact text that you type into the field as the link allowing you to enter site-relative URLs or any other sort of complex link. Next, Previous These two types allow automatic navigation to the page before or the page behind. These settings are analogous to the next-button and prev-button hints. , Up This button type is analogous to the up-button hint and is part of SiteGrinder 2 Pro's Gallery features. Thumb This button is analogous to the -thumb hint and is part of SiteGrinder 2 Pro's Gallery features.
86
The Text Buttons Panel

The Text Buttons Panel is available if at least one of your type layers uses the -button hint and will become text on the final web pages. (If a type layer uses the -text hint or has its anti-aliasing set to "none" it will be made into web text) SiteGrinder graphical button layers require separate layers to represent the rollover state, if any. Text buttons don't use a separate layer for their rollover states. Instead you use this panel to determine how your text buttons change in appearance when rolled over. You can also alter their normal appearance. Even the text portions of hybrid buttons are included here.
Like the Compression panel, the Text Buttons panel allows you to control the global setting for all buttons, and also allows you to create custom settings for specific buttons. To create a custom setting for a button, click the "Add..." button. A dialog will allow you to select a button from a menu of the available buttons, as well as the settings for that button. If you wish to change a button's custom settings, click on the button in the list and click the "Edit" button above the list. You will be presented with the same options you see in the default settings.
87
Text Button General Options: Text Style Settings for Normal and Rollover States You can choose to have your rollover states change text style, and you can also alter certain text style features of the normal state Borders for Normal and Rollover States As of Photoshop CS2, there is no way to set border properties for text fields. There are many border style options supported by browsers, however, so SiteGrinder allows you to set them here for both states. Custom Colors for Normal and Rollover States Photoshop also provides no setting for type layer background colors. Browsers support changing text color and text background color, so SiteGrinder gives you access to these as well. Changing the "backcolor" is a popular rollover effect that creates a rectangle of the selected color behind the text.
The Compression Panel

The Compression pane is where you select the compression settings for all of the layers that SiteGrinder will output as graphics. This is how you determine what kind of files are produced (i.e. gif or jpeg) and how much or how little compression is applied. As with the Pages and Text Buttons panels you select a default choice that will be applied to all layers except those for which you create custom settings.
The "Save For Web Preset" menu lists all of the named settings from Photoshop's "Save for Web" dialog. This includes any settings you have created in that dialog and saved with a name. If you decide that you want to apply different compression settings to a layer or button, click the "Add" button. A dialog will appear allowing you to choose a layer to add, and the custom setting you wish to use for that layer.
88
You can later change or delete these custom settings by selecting a layer from the layer list and then clicking the "Edit" or "Remove" buttons. When you remove a layer from the list it will once again use the default settings that you see displayed. Some layers may not show up in the layer list because SiteGrinder is auto merging them with other layers. If you need to set a special compression setting for a layer you don't see in the list, close SiteGrinder and add the -nomerge hint to the end of the layer's name.
The Decoration Panel

Browsers support borders and background colors for various elements. Because these decorations are not supported by Photoshop you can use this pane to add them. Here is an example of text with a dashed blue border and yellow background color decoration. The following layer types may have decorations and will be listed in this dialog:

Text layers Image layers containing a rectangle of a single color -picturebox layers -xmedia layers
Text buttons and thumbnail border settings are set in the Text Buttons and Galleries panes.
The Galleries Panel

SiteGrinder 2 Pro has advanced support for image galleries. This panel allows you to control aspects of how galleries appear and where the source JPEG images for the galleries are located. This panel is available if your Photoshop document contains at least one layer whose name contains the -gallery hint.
Thumb Border Settings

The controls at the top of the Gallery pane determine whether thumbnail images for the galleries in your site should have borders and what they should look like. You can optionally assign borders to three thumb states: Normal The normal state applies to all thumbs. Rollover The rollover state is drawn when the user's mouse is hovering over a thumb SiteGrinder 2: Zero-To-Hero Guide 89
Current The current state is drawn when thumbs appear on the same page with their picturebox. The "current" thumb is the thumb corresponding to the image currently displayed at full size in the -picturebox.
Thumbsheet Spacing
Thumbsheets are a way of having SiteGrinder automatically lay out your thumbs in a line or a grid. Use the Thumbsheet Spacing option to determine how many pixels apart each thumb will be from the others in the -thumbsheet.
Gallery-Specific Settings
To open the settings dialog for a particular gallery, click in the "Source" column to the right of your chosen gallery. In this dialog you will be able to determine the following:

The image folder where your full sized images reside How SiteGrinder will fit images that are larger than their pictureboxes The alt tag information for your gallery images. You can use metadata here. The page title for your gallery pages. You can use metadata here. Whether SiteGrinder generates your thumbnails or... If you have existing thumbnails in a folder you can set that here
NOTE: The "alt" tag refers to textual information about an image that is not displayed on the web page but is accessible to search engines and screen readers for the visually impaired. You can set this using the text entry field in this dialog. Using MetaData in the Alt and Page Title fields SiteGrinder has advanced support for JPEG image metadata. You refer to metadata by placing the name of the metadata field you want to use in double brackets, for example: [[date]]. You can use these codes in the alt and Page Title fields of this dialog. For example, if you want the title of each page of your gallery to include the date the image on that page was taken, you would enter the following into the Page Title field (without quotes): "I took this photo on [[date]]". When SiteGrinder builds the gallery pages it will replace [[date]] on each page with the date in finds in the JPEG metadata for that page's full-sized image.
The External Media Panel

This panel is available if your Photoshop document contains at least one layer whose name includes the -xmedia hint. The -xmedia hint tells SiteGrinder to import external files and place them according to the size and position of the layer with this hint. SiteGrinder 2: Zero-To-Hero Guide 90
These files can be images, video, flash animations, or html files. The External Media panel lets you do several things:

Optionally specify an External Media folder where SiteGrinder will search for media and html files that match -xmedia layer names. Optionally set a unique file to import for each -xmedia layer and for each page that layer appears on. You can select any file regardless of directory. You can even select files over the internet with URLs. Set options for the imported media. These differ depending on the type of media selected.
The Page & Layer column of this panel lists all -xmedia layers once for each page they appear on. This allows you to set different media for different pages using the same xmedia layer. To change settings, find the layer and page combination you wish to alter and click in the "Type" column next to it. A dialog box will open up which allows you to chooses a file. Once you select a file (or if one has already been selected) you can change the settings appropriate for the type of file.
The Slideshow Panel

This panel is available if your Photoshop document contains at least one layer whose name includes the -slideshow hint. The -slideshow hint tells SiteGrinder to generate an animated Flash slideshow matching the size and location of the hinted image layer. The Slideshows Panel is where you tell SiteGrinder the location of a folder of jpeg images you wish to generate the slideshow from, and the specific type of slideshow you'd like the images to become. On the left is the list of the layers in your document that use the -slideshow hint in combination with any pages those layers appear on. This allows you to set different directories of slideshow jpegs for different pages using the same -slideshow layer. On the right are listed the source folder and slideshow type, if they are set. To change the settings of any slideshow, find the layer in the "Page & Slideshow" column on the right and click in the corresponding "Source" column to its left. A settings dialog will appear that allows you to choose the type of slideshow and the source directory.
91
The specific settings will change depending on the type of slideshow you have chosen.
The Forms Panel

This panel is available if your Photoshop document contains at least one layer whose name includes the -form hint. HTML forms are the standard way to solicit information from visitors to web sites. This might be for sending the site owner an email, typing in an address to get driving directions to a store location, etc. HTML forms can contain text entry fields, menus, and other input controls. While there is no direct analog to the various form elements in Photoshops bag of layer types, SiteGrinder Pro employs a straightforward way to encode multiple form elements in a single text layer. Text entry fields are denoted by underscores, buttons are surrounded by parentheses, labels are followed by colons, etc. (See example below) SiteGrinder Pro supports the most commonly used form elements, including text fields, menus, multi-choice boxes, and checkboxes. The Forms Panel allows you to customize your forms in several important ways:

Whether the form is for PHP or CGI email or is a generic form (everything else) For CGI Email or Generic forms, what the custom variables and their values are For CGI Email, what the URL of the mail cgi is for your server, and whether to use POST or GET For generic forms, what the URL is to send the form to and whether to use POST or GET For PHP email, where the email is to be sent, its subject, etc For PHP email, a thank you page. This must be a page defined in SiteGrinder.
To change the settings of any slideshow, find the layer in the "Form Layer" column on the right and click on the corresponding row in the "Settings" column. A settings dialog will appear that allows you to choose the type of slideshow and the source directory.
92
The Settings Panel

The Settings panel is accessed from the Settings button in the lower right of the SiteGrinder Window. The Settings panel gives users access to a number of SiteGrinder features that don't logically fit in either the hint system or the other panels of the SiteGrinder Window. Menu Delay (Set to milliseconds. 1000 = 1 second) How many milliseconds to keep menu up after mouse rolls off. If your popup menus are disappearing before you can get the mouse pointer over to them you should increase this number. Menu Rollovers Track (set to : "true" or "false") If set to "true", when there is a menu item that matches the current page, that menu item will be in its rollover state. In this way -menu layers or layer sets can be used to show the page visitor what page they are currently on. This was referred to as "hilite stays" in SiteGrinder 1. Common CSS File Here you can set the name SiteGrinder gives to the CSS file that contains the CSS shared by multiple pages. If you change this, be sure to enter the full file name, including the ".css" extension, such as "sharedstyles.css". Output In Y Order (set to: "true" or "false") If true, all layer-based output is placed into the HTML file in normal readable order (top down, left to right). If false, all output is placed into the HTML file in the same order as the layers appear in your Photoshop file's layers palette - bottom to top. The background layer comes first, followed by the others. Unassigned Buttons (set to : "clone" or leave empty) This option determines what SiteGrinder does when it cannot find a link to assign to a button. If set to "clone" then the button will automatically be linked to a copy of an existing page. If this is left blank then the button's link will be set to "#", which is HTML for no link. This setting will take effect the next time this document is analyzed, so you should close and re-open SiteGrinder. (Setting this feature to nothing robs SiteGrinder of a lot of its leverage and flexibility.) External CSS File Threshold If there are more than this number of CSS entries unique to a page then they'll be placed in their own CSS file. Use 0 (zero) to always place them in an external CSS file, or a high number to always include them in the <style> section of the document. Launch Site (set to: "true" or "false") If set to "true", the site will be opened in the default browser when SiteGrinder finishes building. SiteGrinder Is Building (set to : "true" or "false" If set to "true", after you click "Build" SiteGrinder will hide Photoshop and open the "SiteGrinder Is Building" info page in a web browser. Keep in mind that
93
SiteGrinder builds much faster if Photoshop is hidden behind the browser. Using this option can speed up building significantly. <head> Here you can paste or type raw HTML to be placed into the head section of the document. Make sure any entry is XHTML 1.1 valid. <meta> Some commonly used meta settings. Keywords should be separated by commas. FTP Settings The FTP settings are totally optional. If set you'll be able to FTP upload your sites after building.
94
The SiteGrinder Tools Window

The SiteGrinder Tools plug-in contains tools to help you set up your file for SiteGrinder. SiteGrinder Tools are part of a separate plug-in that, like SiteGrinder, you can open from Photoshop's "File->Automate" menu. You can use SiteGrinder Tools to do a number of things, including:

Set up pages and page content in versions of Photoshop prior to CS Make room to insert content in the middle of a document Copy layer sets/groups with find and replace in layer names Examine JPEG metadata to assist with gallery making
The Pages Pane

Defining pages in SiteGrinder is simply a matter of hiding and showing layers in Photoshop until the document matches how you would like a certain page to look and then saving a kind of snapshot of the current document state, giving it the name you would like the page to have. You can do this more easily using layer comps in Photoshop CS or later, or you can use the Define Page pane of SiteGrinder tools in any version of Photoshop.
From this tool you can define a page based on the current state of your Photoshop Document. You do this by typing a name for the page that matches the name of any buttons that link to this page into the "New Page Name" field. (As a shortcut, if you
95
select a graphical button in the layers palette its name will be entered into the New Page Name field when you invoke this dialog.) Clicking the New button will create a new page definition for the current document state. You may also manipulate the pages that have already been defined. If you select a page from the "pages" list you can delete it, restore it, or update it. Deleting a page removes it permanently. Updating it causes the selected page to now reflect the current document state instead of the state that existed when the page was created. Restoring causes the visibility of layers in the Photoshop document to switch to the way they are in the currently selected page definition. Layers added to the document after the creation of a page definition are not included, so be sure to update your page definitions after adding any layers that should appear on them.
The Move Layers Panel

Many applications have "flowing content". Such applications automatically make room for new content to be inserted in the middle of existing content. Word Processors, for example, allow you to insert a paragraph in between two already existing paragraphs, reflowing the document so the new text can fit. Like most graphics tools, Photoshop was not designed this way. If you decide you want to add content in the middle of a document you must manually reposition existing layers downward to make room. Even with layer linking this can be a tedious process. (In case you haven't noticed, we don't like tedious processes.). The Move Layers tool makes this much more simple. It allows you to select a layer and slide it and every layer below its top left corner either up or down in the document. To use it you select the appropriate layer then open SiteGrinder Tools and select the "Move Layers" pane. Type the number of pixels you want to slide the layers into the text entry box and click the "Move" button. You can enter a negative number to move the layers up instead of down.
The Smart Layerset Copy Panel

SiteGrinder makes powerful use of Photoshop's layer sets/groups. These are the little folders in the layers palette that help you to organize complex documents. (For some reason Adobe switched from calling them "sets" in CS to "groups" in CS2. Maybe in CS3 they'll be "collections"?) Often it is useful to copy a layer set/group and change a certain word in the layer names. This is especially true of layer sets with SiteGrinder hints.
96
Imagine you create a layer set named "home" for part of your navigation menu. In it you have created a layer called "home-button" and another called "home-rollover". Once that button is complete you may want to create a second button that look almost the same, but it will function as your "gallery" button. In this case you can use Smart Layerset Copy to duplicate the layer set/group and also change every occurrence of "home" in the layer names to "gallery."
The MetaData Panel

JPEG files, especially photographs from digital camera, can contain useful metadata. SiteGrinder can use this metadata on -gallery pages, in page titles, in alt tags, etc. There are a number of ways to examine the metadata in a file. Adobe Bridge is a very good one, but it doesn't always tell you the exact label for each piece of metadata. In order to use metadata with SiteGrinder you need to now the exact name, and you can use this tool to find it. If a JPEG file is topmost when you open SiteGrinder Tools then this panel will already be filled with the file's metadata. If the topmost file in Photoshop is not a JPEG file then you can browse to find one from this panel. This panel shows you all the metadata that SiteGrinder can read from a file and exactly what the metadata names are for use with the -metadata hint.
97
SiteGrinder 2 Hints
What is a SiteGrinder Hint and how do I use them? Hints are words like "button" or "menu", preceded by a dash character, that you can add to the end of layer names in Photoshop to tell SiteGrinder what kind of web content to make out of the layers. This is the most important thing, indeed almost the only thing, you need to understand about how SiteGrinder works. A graphical rollover button can be created from two graphic layers using this technique. As an example take two layers named "click me-button" and "click me-rollover". SiteGrinder knows they are part of the same button because the parts of the named before the hint ("click me") match each other. SiteGrinder knows from the hints that "click mebutton" should appear on the final web page and be replaced by "click me-rollover" when the web page user rolls over the button. The most commonly used hints can be abbreviated by their first letters, so "-r" and "-b" would have worked just as well for "rollover" and "button". Without these kinds of hints at the end of a layer name SiteGrinder will treat a layer as a non interactive element, just a part of the background graphics of the page. The most important thing to keep in mind is that hints are always preceded by a dash. This means you are free to use words in layer or set names like "rollover" or "button" wherever you like. These words are totally ignored by SiteGrinder unless they are immediately preceded by a dash, as in "-rollover".
98
Rules for hints by example

Here are some hinted layer names with hints that work and some that don't along with the reasons why: Valid button layer names: Cute as a -button (spaces and multiple words before a hint aren't a problem) It's so easy to make a -ButtOn (capitalization isn't a problem either) Sting Like A-b (some hints can be abbreviated by their first letters) Navigation -text-menu (multiple hints are allowed but are not often needed) Illegal button layer names: It's so easy to make a-Button in SiteGrinder (putting words after the hint won't work.) Cute as a-buttun (the hint must be spelled right) a-but ton (the space between the Ts above won't work) a-butto (SiteGrinder hints must be either the whole word or else the official abbreviation) home - button (no spaces allowed between the dash and the hint)
99
Complete List of Hints

Hints are added to the end of the name of a layer, layer set, or Photoshop CS layer comp after a dash character. Thus to make a layer named "home" into a button you change the layer's name to either "home-button" or "home-b". Hints Are Divided Into 2 Categories:

Hints Used by both SiteGrinder 2 Basic and Pro Hints requiring SiteGrinder 2 Pro
Legend: Long The full name of the hint Short Abbreviations for the hint. Only some hints have these. Type What the hint can be applied to. "Text" denotes a type layer, "Image" denotes an image layer, "comp" denotes Photoshop CS layer comp or SiteGrinder Tools Page Definition, and "rect" denotes a rounded recangle shape layer created using Photoshop's rounded Rectangle tool. Set? A "Y" in this column means the hint can be applied to a layer set/group. Hints Used by both SiteGrinder 2 Basic and Pro Click the function descriptions below for relevant sections of the SiteGrinder documentation. The -nomerge and -ignore hints are new to SiteGrinder 2. (SiteGrinder 1 users note, the -haslinks hint is no longer needed. If you provide a -links layer matching a text layer SiteGrinder 2 will act as if the matching text layer has the -haslinks hint.) Long -button -rollover -popup -popdown -hide Short Type Set? Function -b -r -p Any Any Any Any Any Y Defines a button. Y Defines a rollover for a button with the same name. Y Creates a popup for the button with the same name. Y The "button" with the matching name causes this to hide Y This layer or set will be hidden when any popups appear from any button Forces a type layer to generate live styled text instead of a graphic. Same as turning off anti-aliasing for the layer
-text
Text
100
Long
Short Type Set? Function -g Text Text Forces a type layer to be rendered as a graphic A list of links matching words or phrases in the corresponding type layer Applies the contents of a text field as a hyperlink for the button of the same name. Applies the contents of a type layer as an email link for the button of the same name. Gives the type layer a vertical scrollbar on the final web page. Y Causes a type layer or a layer set to be a menu Causes a Rounded Rectangle shape layer to become a resizable rounded rect web element Causes a layer to become a 16X16 favorites icon for the site Specifies that a layer comp represents a page; optional for comps with matching buttons Tells SiteGrinder Pro not to merge this layer with any other when it builds Layer (or layer set/group) will not be included in the build of any page, even if it is visible.
-links
-link
Text
-@link
Text
-scroll -menu -rrect -fav -page
Text Text rect Any Comp
-nomerge
Image Y
-ignore
Any
101
Hints requiring SiteGrinder 2 Pro

Use of these hints in SiteGrinder 2 Basic will trigger copy protection watermarking. Long Type Set? Function -form Text The text layer contains information SiteGrinder Pro will use to build HTML form entry fields The layer height and position indicates the vertical section of the page that may grow vertically The pattern used in this layer's Pattern Overlay style will be used as the page's background tile The pattern used in this layer's Pattern Overlay style will fill the browser window area outside the document area The pattern used in this layer's Pattern Overlay style will fill the area of the page's -grow layer Layer is a placeholder telling SiteGrinder Pro to include some external media, such as a Flash movie or an HTML file, at layer's location when building Y Creates automatic forward navigation between pages, especially gallery pages. See note below. Creates automatic backward navigation between pages, especially gallery pages. See note below. Creates automatic forward navigation between thumb pages.See note below. Creates automatic backward navigation between thumb pages.See note below. Creates automatic navigation from a gallery image page to its corresponding page of thumbnails.See note below. Uses the HTML <img> tag when placing the image. Layer is a placeholder for an animated slideshow to be generated by SiteGrinder Pro Y Layer will be a thumbnail for a gallery image
-grow
Text,xmedia
interior-tile
Image
exterior-tile interiorgrowtile
Image
Image
-xmedia
Any
next-button
Any
prev-button nextsetbutton prevsetbutton up-button -img -slideshow -thumb
Any
Any
Any
Any Image Any Image
102
Long -thumbsheet
Type Image
Set? Function Layer defines an area which SiteGrinder will fill with thumbnails Layer is a placeholder for the full size versions of images in a gallery to be generated by SiteGrinder Pro Layer contains metadata hints so SiteGrinder Pro will display image metadata along with a gallery image Page contains thumbnails, thumbsheet or pictureboxes for a gallery to be created by SiteGrinder Pro USE WITH CAUTION. Text layer contents will be included without modification, allowing arbitrary HTML or other code to be directly added to a sized and positioned DIV.
-picturebox
Image
-metadata
Text
-gallery
Comp
-literal
Text
NOTE for Up, Next, and Prev buttons: "Up-button", "Next-button", "Prev-button", "Nextset-button", and "Prevset-button" must be the full name of the layers or layer sets/groups for these to function. These can also have -rollover and -popup versions, as in "Up-rollover" and "Up-popup".
103

SiteGrinder 2 ZeroToHeroGuide

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

SiteGrinder 2 ZeroToHeroGuide

Uploaded by

Copyright:

Available Formats

SiteGrinder 2: Zero-To-Hero Guide

Learning SiteGrinder 2 from Beginner to Advanced