Medialab :: SiteGrinder 3 :: Learning Center

SiteGrinder

Learning

wikiDocumentationFull written documentation for all features. Go >>tutorialsWebinarsLong-format. Past webinars on demand. Go >>videosVideo TutorialsShort instructional videos. Go >>startersStarters & SamplesPre-hinted for learning and re-use.Go >>

Learn By Example

If you’ve just downloaded SiteGrinder 3, the best way to start is to open the pre-installed, fully prepared Sample File and watch the accompanying short video. When you’re done, come back here and go to Step 2.

1.11.1 Open Photoshop, then run SiteGrinder from the File : Automate Menu. 1.21.2 This will open the SiteGrinder Plug-In Window, along with the Quickstart Panel. In the Quickstart Panel, click “Oh Yeah!”1.31.3 Watch the video and follow along in the Photoshop file. Below the video are two buttons which will open the Design Manager and the Content Manager, which are special tools built into SiteGrinder 3 that allow you to make edits to the site real-time in your Web browser. The video will provide a tour of both Managers.

Learn The Essentials

This next section provides resources for learning how to create some of the fundamental elements that every website will likely need. You’ll also learn some basic SiteGrinder 3 techniques to help it convert your PSDs to HTML.

Hints

Hints are special names you add to your Photoshop layers to tell SiteGrinder what to do with the layer. For example, the -button hint can be added to a layer name to turn that layer into a clickable link. Learn more about hints with the links below:

Watch Video Tutorial

-or-

Read Essentials Guide

Web Text

Every website contains text, obviously. But did you know that text can either be displayed as a graphic or as live text? Live text has the advantage of being Search Engine friendly, and in SiteGrinder can be edited on the fly using the Content Manager. However, live text is a little limited stylistically, so if you want a really fancy text display, you’ll probably want it to be a graphic. The following links show you how, when and why you would use each option:

Watch Video Tutorial

-or-

Read Essentials Guide

Layer Comps & Pages

You can define multiple web pages within a single Photoshop document using Photoshop’s Layer Comps feature. They are a great way to save time and work, since the common elements on all pages only need to be created once. SiteGrinder also provides another way to create pages - by copying existing page designs in the Content Manager. Both methods are outlined in the resources below:

Watch Video Tutorial

-or-

Read Essentials Guide

Buttons, Menus and Navigation

Your users need a way to get around your site, and SiteGrinder has many options for you to chose from. You can create a clickable button from just about anything. A single Photoshop text layer can become the navigation menu for your entire site. Even animated flyout menus are a breeze. And everything is completely editable outside of Photoshop using the Content Manager. To learn more:

Watch Video Tutorial

-or-

Read Essentials Guide

Background Designs

Chances are you want something other than a plain white background on your site. SiteGrinder allows you to create page backgrounds that are solid color, gradient, tiling pattern, or just a big image. There are tons of layout tools and techniques in SiteGrinder 3, to help you create great looking, flexible websites. The page background feature is the best one to learn first. More:

Watch Video Tutorial

-or-

Read Essentials Guide

Enjoy the Buffet!

Once you have the basics down, the rest of SiteGrinder’s features can be learned on an as-needed basis. You may want to go on and add a Web Gallery, a Contact Form, or a Blog. Or you may want to embed a YouTube video, or add cool animations like those on this page. Pick and choose to create the website you’ve always wanted!

layoutDesign & Layout ToolsanimationMouse Interaction & AnimationsitemanagementSite & Content ManagementgalleriesWeb GalleriesformsWeb FormsblogsBlogscommerceE-Commerce IntegrationxmediaExternal Media (anything really)controlRemote Content ManagementrefHint Reference

RESOURCES...

PRODUCTS

COMPANY

Convert PSD Designs to HTML Websites...

If you know Photoshop then you already know enough to start creating web pages for yourself and your clients. With SiteGrinder there is no longer a requirement to slice up your web design and send it off to a developer to convert your design from Photoshop to HTML / XHTML and CSS. SiteGrinder does all of that tedious work for you. Your Photoshop web design is output just the way you envisioned it – resulting in a full functioning website.

SiteGrinder's intelligent engine can convert simple type layers into search-engine friendly menus that are dynamic and visually appealing. Image layers can also become buttons and menus. SiteGrinder's smart handling of slicing and image compression also gives you the designer complete flexibility in customizing how SiteGrinder will optimize each layer. SiteGrinder uses Photoshop's "layer comps" feature to organize layers into beautiful web pages.

Once the layers have been saved into layer comps SiteGrinder will output a website that looks just like your Photoshop web design! As a bonus, the standards-compliant websites created by SiteGrinder 3 can be put through XHTML validators and pass without error. This means that all web pages converted from Photoshop to HTML with SiteGrinder can be modified by any HTML/XHTML/CSS web design program, such as Adobe Dreamweaver.

Custom Search

Employee Login