sitegrinder-2-zerotoheroguide

SiteGrinder 2: Zero-To-Hero Guide

Learning SiteGrinder 2 from Beginner to Advanced

SiteGrinder 2: Zero-To-Hero Guide 2

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.


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.


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.


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. In Photoshop create an empty document at least 500X500 pixels

2. Select the text tool 3. Click and drag a rectangle in the document large enough to hold plenty of text

4. Type or paste in some text. Add some character and paragraph formatting

5. 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. Save your document

2. Open SiteGrinder 3. Click the "Build" button 4. 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


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")


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


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.


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

[email protected]

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.


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.


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. Create a new 500X500 pixel document in Photoshop

2. Create a new image layer

3. Choose the rectangular marquee selection tool (press m)

4. 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


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!


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.


Step 1. Create the rollover layer

We are starting with the document created in the previous section.

1. Close SiteGrinder if it is still open 2. Select the "Home-button" layer you created in the previous tutorial

3. Select "Duplicate layer..." from the layers palette menu

4. Set the new layer's name to Home-rollover

5. Select the paintbucket tool 6. Choose a foreground color different from the fill of the Home-button layer

7. Fill button area of the Home-rollover layer with the new color

8. You can rehearse the rollover effect by hiding and showing the -rollover version

Step 2. Build and verify


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.


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 Home-

popup 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.


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


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


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.


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.


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.


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.


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


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.


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.


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


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.


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.


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


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.


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


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.


• 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 exterior-

tile (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.


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.


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.


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.


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.


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 Ark-

xmedia"

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


• 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.


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.


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.


If that file doesn’t 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


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.


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 "Cool-

button")

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



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.


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:


(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:


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 multi-

line 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


As with vertical menus SiteGrinder will generate a page for each item and automatically

add links to the right page for each item.


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.


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.


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


File->Automate menu


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 site-

menu" 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 "Store-

link" and place the URL in this layer's contents.


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


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.


• 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!



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")


• 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"



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)


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 Dole-

link" 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.


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.


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"


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.


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:


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.


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.


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


• 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


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.


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.


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


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


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.


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)


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


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.


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.


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.


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.


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.


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 "home-

button" 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


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."


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.


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.


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.


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 site-

relative 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


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.


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.


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.


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


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


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.


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


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.


The specific settings will change depending on the type of slideshow you have chosen.

The Forms Panel


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 Photoshop’s 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.


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


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.


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


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.


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.


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 me-

button" 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".


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: Illegal 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)

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)


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 Short Type Set? Function

-button -b Any Y Defines a button.

-rollover -r Any Y Defines a rollover for a button with the same name.

-popup -p Any Y Creates a popup for the button with the same name.

-popdown Any Y The "button" with the matching name causes this to hide

-hide Any Y This layer or set will be hidden when any popups appear

from any button

-text Text Forces a type layer to generate live styled text instead of a

graphic. Same as turning off anti-aliasing for the layer


Long Short Type Set? Function

-g Text Forces a type layer to be rendered as a graphic

-links Text A list of links matching words or phrases in the

corresponding type layer

-link Text Applies the contents of a text field as a hyperlink for the

button of the same name.

-@link Text Applies the contents of a type layer as an email link for the

button of the same name.

-scroll Text Gives the type layer a vertical scrollbar on the final web

page.

-menu Text Y Causes a type layer or a layer set to be a menu

-rrect rect Causes a Rounded Rectangle shape layer to become a re-

sizable rounded rect web element

-fav Any Causes a layer to become a 16X16 favorites icon for the site

-page Comp Specifies that a layer comp represents a page; optional for

comps with matching buttons

-nomerge Image Y Tells SiteGrinder Pro not to merge this layer with any other

when it builds

-ignore Any Y Layer (or layer set/group) will not be included in the build

of any page, even if it is visible.


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

-grow Text,xmedia The layer height and position indicates the vertical

section of the page that may grow vertically

interior-tile Image The pattern used in this layer's Pattern Overlay style will

be used as the page's background tile

exterior-tile Image The pattern used in this layer's Pattern Overlay style will

fill the browser window area outside the document area

interiorgrow-

tile Image

The pattern used in this layer's Pattern Overlay style will

fill the area of the page's -grow layer

-xmedia Any

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

next-button Any Y Creates automatic forward navigation between pages,

especially gallery pages. See note below.

prev-button Any Y Creates automatic backward navigation between pages,

especially gallery pages. See note below.

nextset-

button Any Y

Creates automatic forward navigation between thumb

pages.See note below.

prevset-

button Any Y

Creates automatic backward navigation between thumb

pages.See note below.

up-button Any Y Creates automatic navigation from a gallery image page

to its corresponding page of thumbnails.See note below.

-img Image Uses the HTML <img> tag when placing the image.

-slideshow Any Layer is a placeholder for an animated slideshow to be

generated by SiteGrinder Pro

-thumb Image Y Layer will be a thumbnail for a gallery image


Long Type Set? Function

-thumbsheet Image Layer defines an area which SiteGrinder will fill with

thumbnails

-picturebox Image Layer is a placeholder for the full size versions of

images in a gallery to be generated by SiteGrinder Pro

-metadata Text Layer contains metadata hints so SiteGrinder Pro will

display image metadata along with a gallery image

-gallery Comp Page contains thumbnails, thumbsheet or pictureboxes

for a gallery to be created by SiteGrinder Pro

-literal Text

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.

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".