SiteGrinder 2: Zero-To-Hero
Learning SiteGrinder 2
from beginner to advanced.

About This Guide

(If you would prefer a printable Adobe Acrobat PDF version of this guide, click here.)

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 page is meant to be your tour guide to gently introduce you to SiteGrinder and gradually demonstrate most of its features and how best to use them. Once you have mastered the basics you will probably find yourself using this document less and instead going right to the FAQ to find out details about some particular feature you are trying to implement.

There are many resources available to help you learn SiteGrinder, including tutorials, narrated screen movies, sample files you can load and examine from SiteGrinder's Report pane, User Interface Reference, and hint references. This page will point you to the relevant resources as it introduces SiteGrinder's concepts. You can also find a complete index of documentation in the SiteGrinder learning center.

The purpose of this page is not to contain all of the information about SiteGrinder, but to be your guide to that information.

Often you will be asked to go through a tutorial found on a different page and return to this page when you have finished and are ready to move on.

As a new user you may wish to view the narrated Flash screen movies found here to see many basic SiteGrinder techniques demonstrated. You can then return here for reinforcement and detail.

You may also find the page describing all parts of the SiteGrinder window useful to reference both to accomplish a particular task and get a feel for everything SiteGrinder can do.

Contents of this guide:

Basics

Buttons and Popups

Pages and Navigation Between Pages

Intermediate Techniques

Menus

Advanced Techniques

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

Click here for a complete reference to SiteGrinder's panels.

You'll probably refer to the panel page a lot when you are first trying one feature or another. Clicking SiteGrinder's "Help" button will open that page to 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.

The default build type is "Preview." It builds all of the files to the "SiteGrinderData" directory in your documents directory. After the build SiteGrinder creates a hyperlink in the report that will open the directory SiteGrinder built to.

There are two other build types discussed later in this document.

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.

If you would like more details about the SiteGrinder work style and how it compares to older ways of creating websites you can click here to read the first few sections of the Reviewer's Guide.

Initial Settings for your Photoshop Documents

Dimensions

There are a few guidelines for setting your dimensions:

If you decide to change your document dimensions after you have added a lot of layers, or you want to shift layers down, there are ways to do this painlessly.

Click here for more info.
  • 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. No graphic file will be created for this layer. The background color is set using HTML. An empty background 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. That's a great way to get a feel for the breadth of SiteGrinder's capabilities. Each hint listing links to a reference for that hint. Once you have mastered the basics, the full list of hints will be one of your most important ways to navigate SiteGrinder's documentation.

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, click here.

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 exclusively applied to layers. Some hints can be applied to layer sets/groups (those folders in the layers palette). Still others can be used in conjunction with page names.

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.

Click here to learn about when to use real text versus an image of the text

Click here to see a narrated screen movie of creating styled web text

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

It's ridiculously easy to make scrolling text. Just create a text 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.

Click here for a detailed tutorial for making scrolling text.

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.

Custom scroll bar graphics or colorization are not supported at this time.

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. (Click here for a full list of fonts and their cross platform equivalents.) 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." Click here if you aren't familiar with the difference.
  • 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. Click here for a complete tutorial.

Click here for a detailed discussion of using the "-links" hint to add hyperlinks to word or phrases.

Using The Report: Saving yourself time and confusion

As you go through the tutorials, make sure to take a quick look at the report each time you open SiteGrinder.

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.

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.

There is also a post-build report that shows you information about the build and provides a link to the folder where the files were created.

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.

Making an Image Button with a Hyperlink using the "-Button" hint

A button is just an image or 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 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.

Click here for a discussion of all the ways to set links in SiteGrinder

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. Click here to learn about the -link hint.
  • 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

  1. Save the document and open SiteGrinder
  2. Check the report for any problems. If there are any, close SiteGrinder and fix them.
  3. Click "Build"
  4. When the page opens up, give it a try

Important notes about graphical rollover buttons:

  • Buttons and rollover don't have to be rectangles, they can be any graphic as long as at least part of the "-rollover" version intersects with the "-button" version. The "-button" and "-rollover" hints can even be added to layer sets! In those cases SiteGrinder will use the contents of the layer sets to make the button states.
  • The "-button" and "-rollover" hints can be abbreviated as "-b" and "-r", as in Home-b.
  • If the part of the button layer name before the hint (i.e. the "sample" part of the "sample-button" layer name) matches to a page SiteGrinder is building, SiteGrinder automatically programs the hyperlink for you.
  • If a button is hidden, SiteGrinder will not output it, even if the rollover version is visible. The rollover version can be visible or hidden.
  • Sometimes, in a navbar for example, you will want the rollover state of the button representing the page you are currently viewing to stay on even when the button is not rolled over. This is a visual cue to indicate which page in a navbar is currently active. SiteGrinder can do this automatically in conjunction with the "-menu" hint discussed below.

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.

Click here for tutorials and other information about popup, popdown, and hide

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. Click here for more info.
  • 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. Click here if you aren't familiar with the difference between Point and Paragraph type layers.

  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. Click here to find out how.)
  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.

Review: What you've learned so far, where we go from here

We have talked about:

  • The SiteGrinder work flow
  • Initial settings for your Photoshop files
  • Hints
  • The -text hint and turning type layers into styled web text
  • Making image buttons with links, rollovers, and popups using hints and layer name matching
  • Making text buttons and setting their rollover styles

That's a lot of material, but we've barely scratched the surface of what SiteGrinder can do.

There are a few more basic skills every SiteGrinder user needs:

  • Image compression
  • Setting up multiple pages and their content
  • Page alignment and backgrounds
  • Understanding how buttons relate to pages
  • Keeping everything straight: using layer sets/groups to organize your content
  • Making text menus
  • Understanding how text menu items are essentially the same as buttons
  • Using hints with layer sets

Different Build Styles

As you begin to create more complex sites, you should know about the 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 SiteGrinder data 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.

For more on building, click here.

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 computer-generated images. Jpeg files do not support transparent areas, which can sometimes cause problems.

You can usually wait until your site is almost complete before worrying about compression. Once your design is close to final, take a careful look at the quality of the graphics, and take a look at their file sizes.

If there are particularly large files or images that are too visually degraded you can tweak their compression settings in Photoshop's "Save for Web" dialog to find the settings that best balance file size and image quality and then build your pages again after telling SiteGrinder to use the new settings you decided upon.

SiteGrinder automatically merges non-interactive layers when it can to reduce the number of image files. 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.

Click here to learn about SiteGrinder's Compression Panel

Click here to learn about Photoshop's "Save for Web" dialog and presets

Click here to learn about web image formats

Creating Multiple Pages

Click here to view a narrated screen movie of using layer comps to define pages

Click here to see a narrated screen movie of using the SiteGrinder Page Creation tool to define pages in Photoshop 7 and earlier

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.

Many Photoshop users have not yet learned about layer comps. If you are one of those users, click here for a tutorial on how layer comps work.

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

Click here for a tutorial on creating pages using layer comps

Photoshop 7 and earlier users click here for a tutorial on using SiteGrinder Tools to define pages

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.

Click here for a step-by-step tutorial demonstrating this technique

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. Click here for more information on cloned pages.

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.

Click here for complete information about background colors and tiles.

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.

Click here for detailed information on using external media with SiteGrinder.

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!

Click here to learn about hybrid buttons.

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.

Click here for a tutorial about layer set buttons and the layer set copy tool.

The layer set copy tool can also be very useful for layer group thumbnails.

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.

Click here for a detailed tutorial demonstrating the construction of a horizontal text menu.

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

Click here for a detailed tutorial demonstrating the construction of a vertical text menu.

Click here for a tutorial which ties together menus, pages, and links.

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.

At this point, if you have further interest in menus, you should follow this tutorial. It shows three approaches to adding menu functionality to a page.

Three different ways to make a menu

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.

Click below for tutorials on:

Making a text popup menu

Making a graphical popup menu from a layer group

Making the menu hilite indicate which web page the user is viewing

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.

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.

Please go to this Gallery Overview page which is your index to all of the Gallery-oriented documentation.

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.

Click here for examples of the different slideshow types

Click here for an overview of slideshow features

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. Read about them here.

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. Read about this feature here.

Eternal 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. Read about these techniques here.