The Essentials: What every user needs to know about SiteGrinder 3

This guide has a video version and a text version found below the video.

All of the SiteGrinder 3 training videos are collected on the SiteGrinder TV page at Media Lab's website.

How To Learn SiteGrinder

At last count, SiteGrinder 3 has 1.7 kazillion features. Luckily you only need to learn the skills that you'll be using to make your particular website. Even luckier you will never have to learn HTML, CSS, JS, PHP, CGI or any other scary acronym. You don't even need to know what they stand for! (For extra credit, however, you can learn S.R.Y.W., which stands for "SiteGrinder Rocks Your World!")

To get you grinding out websites as soon as possible, we have divided even the introductory documentation into short "Essentials Guides" (like this one) which introduce you to crucial concepts you should grasp before you start experimenting with a feature that is new to you. This guide is one of them, and is the first of several that we suggest every SiteGrinder user read to get started. You'll find a link to the next guide at the end of this one.

Once you finish the initial few Essentials Guides you will be ready to start building your site. Each time you want to add something you haven't read about yet like, for example, video, you will read the Essentials Guide for that feature.

If you need more detailed information than the essentials guide provides, every feature category has a "Learning Center" with links to all of the resources available for learning that feature.

Resources include:

Detailed reference guides
Step by step tutorials
Training videos
Sample Photoshop files

SiteGrinder is...

SiteGrinder is a Photoshop plug-in that converts layered Photoshop designs into standard finished websites and can even upload them to your server.

The Photoshop menu command to launch SiteGrinder lives in Photoshop's File -> Automate menu, not the Filters menu.

SiteGrinder 3 also includes a separate application called the "SiteGrinder 3 Engine". You won't directly interact with this application very often. It acts as an assistant to SiteGrinder to help it display and edit web pages in a browser before you upload them. When you launch the SiteGrinder 3 plugin the SiteGrinder 3 Engine application also launches if it is not already running.

The SiteGrinder Engine can run by itself even when Photoshop and the SiteGrinder plug-in aren't running. This is to allow you to use SiteGrinder 3's browser-based Design and Content Managers without having to launch Photoshop.

The SiteGrinder Engine presents a single small window which acts as a quick-launch tool for opening your recent Photoshop files and built sites, as seen below:

General Stuff You Should Know About Photoshop

There are a few things you need to know about Photoshop layers to use SiteGrinder effectively:

Double-clicking on a layer's name in the layers palette allows you to give it any name you want. This is even true of type layers.
Layers are not the same dimensions as the Photoshop document. They are only as big as what they contain. If you make a new image layer and paint a single pixel in it, that's how big it is, one pixel.
The order of layers in the layers palette is the same as their stacking order in the document. The content of layers that are higher in the palette will, in the document, cover content in layers below them in the layers palette.
Even empty areas of a layer can block the mouse from triggering layers below it in the layers palette. A layer containing nothing but a single dot in the upper left corner and another in the lower right corner will still block clicks meant for any lower layer.
You can easily drag and drop layers in the layers palette to change their stacking order.
It is easier to keep track of many layers when you organize them with layer groups, which are the folders you can make in the Layers palette.
You will learn about Photoshop "layer comps". It's the one Photoshop feature most people aren't very familiar with when they first learn SiteGrinder. Don't worry, we'll teach you all about them!

If you have any questions about Photoshop layers please visit our forum and we'll be more than happy to answer them. There is documentation about Photoshop features related to SiteGrinder here.

Photoshop Layers With "Hints" Tell SiteGrinder What To Do

When you create Photoshop layers for your design you will add "hints" to certain layers' names that tell SiteGrinder something extra about them. A hint is just a word you place at the end of a layer's name after a dash to tell SiteGrinder about any special function you may want a layer to have. An example hint is the word "button." A layer you would like SiteGrinder to make into a button linking to your home page could be named "home-button" or "My Company Homepage-button".

Sometimes SiteGrinder will create functionality from several different layers working together. You tell SiteGrinder about layers that work together by giving them the same names, but with different hints. To tell SiteGrinder that an image layer named "home-button" should display a different layer when your site visitor hovers over it with the mouse you will create a second layer with the hover version and name it "home-hover". Because both layers are named "home" SiteGrinder knows they are two parts of the same thing.

Some hints can be used on layer groups (the folders in the layers palette) as well as on layers.

Multiple hints can be placed in a layer name when necessary as long as each hint has its own dash, as in "Company Description-text-scroll".

When you see a word in the SiteGrinder documentation that starts with a dash, as in -button, you know it is a hint.

There are many hints, but most users employ only a few common ones. There is a list of all SiteGrinder 3 hints.

Some Hinted Layers Act As Placeholders or Boundaries

Sometimes SiteGrinder just needs a rectangle to indicate something special about an area of your design.

Placeholder Layers

Since you can't import something like a web video into Photoshop directly, you create a simple rectangular layer that is the same pixel dimensions as the video and position it where you'd like the video to be on the page. You are free to use an image layer or an object layer to do this. Such layers should contain nothing other than this rectangle.

Placeholder layers themselves never appear on the final built web page. Instead they are replaced by something else, such as video, gallery images, or Flash animations. If you want your video or gallery picturebox to have some decoration, like a dropshadow or a frame around it, you don't make the decoration in the placeholder layer. Instead, you would create a separate layer beneath the placeholder layer and create the decoration there.

Common hints used with placeholder layers include -xmedia (for external media), -picturebox (for galleries) and -embed (for embedding web code for things like PayPal or YouTube videos).

Boundary Layers

Boundary layers are also simple rectangular image or shape layers, but boundary layers indicate rectangular areas that SiteGrinder should put other layers or page elements in.

A -thumbsheet layer, for example, tells SiteGrinder about the boundaries it should use to display thumbs for a gallery. Like placeholder layers, you won't see boundary layers themselves on the final page but you will see the way they affect other layers.

Often placeholder and boundary layers can work together. A larger boundary layer can represent a rectangle that has a layout effect on smaller placeholder layers contained within its boundaries. A basic example of this is the way "-thumbsheet" and "-thumb" layers work together in Galleries.

Layers With Certain Names Can Control Page Layout Options

You can control the alignment and background settings of your pages by creating layers with certain complete special names. If you create a layer called "browser-background" and apply a pattern overlay or gradient layer style to the layer, SiteGrinder will use that information to set the background tile of the browser window. These kinds of layers allow you to set up complex background tiles, pages from the same document with varying sizes and alignments, and more. See the "Page Layout Essentials Guide" to learn more about these features.

One Photoshop Document Can Produce Multiple Pages

You create different pages within the same Photoshop document using Photoshop's "layer comps" feature in concert with the "-page" hint. You can learn more about layer comps and pages in the "Page Creation and Management Essentials" guide.

Initial Settings For Your Photoshop Document

You may wish to begin your project with one of the SiteGrinder "Site Starter" documents which already have their initial settings and layout prepared.

If you are beginning a design from scratch then these are some recommended Photoshop "New Document" settings for a basic site:

The SiteGrinder Workflow

There are 2 phases to the SiteGrinder 3 workflow, Design and Content.

Design

In the design phase you start in Photoshop, simply creating the layers that make up your page designs. This is where you will spend most of your time adjusting the look of your website and giving layers hints when necessary.

When you are ready to see your design in a browser you open SiteGrinder from Photoshop's File->Automate menu. Launching the plug-in will also launch the "SiteGrinder 3 Engine" helper application if it isn't already launched. Once the plug-in window opens, it will show you the Report tab which advises you if anything in your design seems problematic. If there are problems that you need to address you can close SiteGrinder and return to Photoshop to fix things.

When your design is ready to try you will switch to the "Build & Deploy" tab of the SiteGrinder window and click the "Build" button. SiteGrinder will open the built design(s) in your default web browser. There, right in the browser window, you can use SiteGrinder's "Design Manager" controls to adjust appearance settings for various parts of your design that are difficult or impossible to change in Photoshop. Text elements on web pages can have highly customizable borders and backgrounds, for example, that Photoshop doesn't support. Best of all you can immediately see the effects of those adjustments in the browser. You will often return to Photoshop in this phase to make more adjustments, rebuild, tweak, and repeat. When you are happy with your design you can move on to the content phase.

Content

In the previous steps your site can't be built or function in a browser without the "SiteGrinder Engine" application running. To finish your site and make it function independent of SiteGrinder you need to have SiteGrinder create the final versions of the files which can stand on their own. This is called "deploying" your site. After you deploy you can edit existing page content and even generate new pages right in your web browser using SiteGrinder's "Content Manager".

Finally, once you have deployed your pages and made all final adjustments to their content you are ready to upload the files to your web server. SiteGrinder 3 can upload your site for you and synchronize your online site with local changes you have made since the last upload.

If you want to move your files into a tool like Dreamweaver instead of uploading with SiteGrinder, the Content Manager can do that too.

Important: SiteGrinder 3 remembers Design and Content Manager settings by the name of your Photoshop file. If you save under a different name the newly named PSD file will have generic settings again.

SiteGrinder and Web Text

SiteGrinder can optionally convert any type layer in your Photoshop document to CSS text; automatically translating the character styles (such as font size) and paragraph styles (such as alignment) you set in Photoshop.

You can later edit this text in the Content Manager.

Mouse Interactivity

SiteGrinder includes many ways for your elements to react to mouse clicks and hovers. You can create CSS text or image buttons that change in appearance on both hover and click.

Other layers anywhere on a page design can be made to appear or disappear on hover or click of your buttons, and can even be given animated effects like fading or animated movement when they do so.

These effects are accomplished using hints like "-button", "-hovershow", and "-clickshow" in your Photoshop document and then selecting options for features like animation in the Design Manager.

It is easiest to set links on buttons in SiteGrinder's Content Manager, but there are also hints that let you set links using Photoshop type layers.

There is an Essentials Guide for Buttons, Animations and Interactivity you will want to read later.

Text Menus

Many sites use CSS text menus for navigation, so SiteGrinder makes it very easy to generate them from Photoshop type layers by just adding the "-menu" hint.

There are two basic types of text menus, vertical and horizontal.

SiteGrinder creates a vertical menu automatically from a type layer that has the -menu hint and that contains more than one line.

Each line becomes a unique menu item, as seen below:

SiteGrinder creates a horizontal text menu from a type layer that has only one line.

You create separate items in a horizontal menu by separating them with either multiple spaces or spaces and the vertical bar character, as seen below:

SiteGrinder text menus have two big advantages over individual buttons:

The code SiteGrinder uses to create them greatly enhances search engine optimization
You can add new menu items to link to new pages in the Content Manager long after you build & deploy

You'll find further discussion of text menus in the Buttons, Animations and Interactivity Essentials Guide and the Hyperlinking Essentials Guide.

CMS and eCommerce

SiteGrinder's "Control" add-on gives you the ability to edit your page contents from a browser on any computer that's connected to the internet.

SiteGrinder's "Commerce" add-on allows you to create ecommerce buttons and forms you can use to create web stores and ecommerce-enabled galleries.

Where to Go From Here

Now that you've had a thorough overview of what SiteGrinder can do, move on to Part I of Workflow Essentials to find out how you use SiteGrinder to do it.

Where To Go Next

At this point you know enough about SiteGrinder to start experimenting with it, but we highly recommend continuing from this guide to the part one of the "Workflow Essentials".