SiteGrinder

Software Company: 
Media Lab
Version: 
3
OS: 
MAC OS 10.4.11
Rating: 
1

Assuming that #1 is the highest rating, I have rated this at #1.

Site Grinder 3 (SG) is a plug in automator for PhotoShop CS2 to CS5 for MAC OS 10.1 or greater, intel or Power PC MACS or Windows XP, Vista or 7 — PhostoShop 6 or later or Adobe Elements 3 or later on both platforms.

Software Costs:

SG 3 plug in $349
Optional plug ins:
SG Control plug in $159
SG E-commerce plug in $159
or both bundled $279
or bundle with SG 3 purchase $499

This report is based on use in PhotoShop CS4 on Mac G5 Power PC, OS 10.4.11

I am not a web developer, although I have designed the look and flow of 2 websites. So I have very little technical knowledge of how to create the functionality of a web site. 

I’ve started some training in DreamWeaver, but after using SG3, I believe I would first choose to work with SG because it quickly and easily automates the design conversion into code. Since I am very experienced in using PhotoShop, I can layout the web page easily there. You must know Photoshop essentials to create the web design.

Before I started working with SG3, I spent about 6 hours using MediaLab’s on-line learning materials, and watching the Essential Guide instructional videos. Instructions are accessed on site, and can be saved as a 434 page PDF document

Learning materials from MediaLab Web site.

Videos and text guide instructions.
Videos run about 9 min each, but take longer to view if you stop and back up in the video for another look at specific info.

SG provides extensive essential training on the SG Medialab web site for:

Page creation and management
Web Text
Hyperlinking
Sample files are located in the Tutorial section. These templates for learning are also provided for reference. You can view the template site and then download the PhotoShop Design files to see how it was built.

Topics covered in the learning materials:
• Installation and activating
• Essential Guide Videos and information: located on the Learning site, and MediaLabs SiteGrinder 3 TV site.

Introduction Video: Shows you the basics of what SG can do
Installation is easy (except for the CD becoming trapped in my CD tray! and having to download the software from Media Lab to install) 

The SG plug in is found in the PhotoShop File menu under automate

The SG Engine must be running when using SG. It appears as the SG gear styled logo in the MAC dock. The SG Engine window allows you to easily access recent documents in PhotoShop, view recent de ploys, recent builds, and links for the Learning Center and Documentation.

When using SG to evaluate a PSD file before it is built, or deployed; a report appears showing error messages that list the layer in question with interactive tip links that take you directly to information to correct the error.

Workflow I Design Video: 
(does not show you how to design, but gives info important to include in your layers in PhotoShop that SG will use in evaluating, building, deploying and uploading your site.)

The workflow for design:

• create layers, name them and add hints to the layer name that SG will recognize and use
• when satisfied with the design, open SG plug in
• SG will run a report and in the report window, gives errors and warnings for specific layers and links for solutions

• You cannot work on the PSD file while SG is open in PhotoShop
• Save in HTML or print the SG report to refer to it iwhile making changes in PS
• "Save" closes SG plug in to access the PS file and make changes
• After changes open SG plug in again and if satisfied with the report, choose the build/deploy tab and select the page to build.

• It opens in a SG Engine browser window and you can see how the page will look in the SG Design Manager.
• You can alter how it looks in the SG Design Manager and click apply to see the changes

SG uses the layer and file name to associate new styles created in SG Design Manager
so caution is advised for changing names of layers and file name
• You can copy the SG Engine browser page URL and open it in another browser to see how it displays there.

• Edits are actually made in PhotoShop. And you repeat the above process until you are satisfied with the web page.

Workflow II Content: Finish content and upload
• Open the PS file in SG plug in
• Go to Build and Deploy tab
Choose Site menu to locate New Site command
Create a SG site name and location inside the Site menu panel, and tell SG where the files are located on the Hard Drive
Under CMS choose “local” to manage the site from files on your HD, or remote if a client will manage files (this option requires the SG optional control add on, a separate purchase and requires server support for PHP)

Can select “shopping cart system” for any E-commerce forms
(requires SG E Commerce add-on, a separate purchase)

Advanced options cannot be changed later so be careful selecting them.

•Choose Deploy from the Site men window.

Deploy pages: builds the pages to the local site location selected when creating the site

In the Deploy window, pages are listed and it shows when they were deployed
You can choose the pages to deploy
Pages aren’t bound to any particular site and can be deployed to any site
You can make changes in PS files and re-deploy to any site
Deploy command allows you to choose the page to deploy to an existing site or create a new site
SG opens Content Manager in the default browser

•Edit pages

You can edit page content in Content manager by selecting a page you want to edit,
It displays in the Content manager window
Choose the appropriate edit controls from Content Manager’s list (these are listed based on content in the PSD file)

Text exported as CSS from Photoshop is editable in the Content Manager in the browser window

As you roll over the list of editable content, individual items highlight on the page in the browser menu
You can also edit in raw HTML if you wish through a word processor edit feature
You can also edit external media (ie. videos) which are also listed under External Media in the content edit menu (your external media must reside in your site folder on the HD)

Other edits include setting links for buttons and menu items, edit page titles, change content images, add or arrange gallery images or configure e-commerce forms and buttons, create new pages based on existing ones without returning to Photoshop.

You can upload or save pages to work with other tools (i.e. Dreamweaver, save as static pages to an other local folder on the Hard Drive. Note: They cannot be edited or managed via SG).

To upload to a web host you have to tell SG how to access the web sever so it can transfer files to it. This is done with the connections settings control in the Upload menu.

You decide whether to upload changes or upload everything. Usually choose upload changes because it will upload everything that has changed since the last up load.

Once uploaded you can make more changes in the content manager and upload again, or go all the way back to Photoshop and make changes, rebuild, check the pages, make more changes in Design Manager, re-deploy and upload again.

My experience with using SG3:

Design:

In PhotoShop I created a home page that I had designed for my web site a few years ago. For that site I hired a developer to do the technical backend work, upload, post and host the site.
To test SG3 I wanted to work with a design that I knew well, and knew how it should function.

I added the hints to the layers that SG would use to interpret and convert the PSD file to a web file.

Then I opened the SG plug-in and SG ran a report, showing a few errors with the hints I had used for the roll-over text. I exited the plug in and accessed PSD file to make the edits. That was easily corrected by changing the hints for those layers. Then I ran the plug in again, and all was okay

Build and Deploy:

I went to the Build/Deploy Tab and checked the appearance and function of the rollovers in the Design Manager window.

I easily made a few minor adjustments in the Design Manager window and it was okay.

The entire design and build process took about 2 hours. I used existing logo images that are currently used on my posted site, but built this home page from scratch. It took SG less than a minute to build the page after I had made a few corrections. I previewed it in 3 browsers, Safari, Firefox, and Explorer. All looked and funtioned well in each browser.

Recommendation:

Amazing and easy! Especially since this is my first attempt at creating a working web page. I’m looking forward to creating the rest of my site and setting up the links and my image gallery. It’s an easy way to learn by using my existing site as my guide, since it has already been designed and is functioning. I can compare my files and their appearance and functionality with my existing site.

I recommend SG3 as an effective tool especially for those who haven’t created a site, and experienced developers who are looking for an efficient and fast way to create web sites. With the optional plug ins a client can edit their site remotely, and e-commerce sites can be created. Since I do not have those optional plug ins, I can't review how well they function.