SiteGrinder + Photoshop = Easy, Efficient Website

Layers with SiteGrinder hints
Layers with SiteGrinder hints

As I‘ve mentioned before, the photography portion of my website resides on PhotoShelter, which I love. However, PhotoShelter doesn’t offer extra pages, so I needed an easy, affordable way to create the writing portion of my site. Another photographer suggested I try SiteGrinder, a Photoshop plug-in which allows the user to design a website in Photoshop without needing to know any coding. So I downloaded a trial version of SiteGrinder 2, and it turned out to be exactly what I needed.

Anyone who regularly uses Photoshop will find working with SiteGrinder easy. You create your website all in one file, using layer comps to define each page. (If you’re working on a large site, you can also split it into multiple files if necessary.) Hints added after a layer name tell SiteGrinder how to treat that layer. For instance, a layer with the tag “-text” means that SiteGrinder will output the layer as HTML text; without that hint, the layer’s text will output as graphics instead. This is an important distinction, since graphics aren’t recognized by search engines. The biggest change I made to my site’s design was to move my navigation bar up and add drop-down menus for “Photography” and “Writing” so that visitors can access all the pages on my site from anywhere. (Once it’s also configured on PhotoShelter, my site integration will be complete.)

When you open SiteGrinder (from Photoshop’s “File>Automate” menu), it gives you a list of warnings and errors. Warnings may include choices you’ve made deliberately and can therefore ignore, such as not setting a rollover state for your clickable logo. After you’ve fixed any problems, you can preview your entire site or just the pages you select. Building takes time, but if you haven’t changed any graphics since your last preview you can shorten it by opting not to rebuild the graphics. (This is also true when building the files you’ll actually upload, which makes updating information quick and easy.) To simply test hyperlinks or see what your text will look like, use the lighting preview, which ignores graphics completely. When you’re happy with all your pages, choose Build to Folder and let SiteGrinder create all your CSS, HTML pages, graphics, and other elements. If you’ve got Dreamweaver or another web editing program, you can use those to tweak the code SiteGrinder has created.

SiteGrinder Pane
SiteGrinder Pane

The only real problem I had with SiteGrinder was with strikethroughs and underlines in text. I originally planned to add an example of a copyedited paragraph; however, when SiteGrinder rendered it in the font I chose, my strikethroughs wouldn’t show up. In some other fonts, the strikethroughs would appear, but underlines would end up spaced so far down that they touched the tops of letters on the line below. The only solution I could come up with was to output that whole paragraph as a graphic. Ultimately, it didn’t matter because I decided not to use the sample paragraph.

I bought SiteGrinder 2 Basic, since I don’t need the ability to add things like video, photo galleries, or forms to my web pages. However, those features are available in SiteGrinder 2 Pro, as well as the forthcoming SiteGrinder 3. In SiteGrinder 3, they’ve done away with Basic vs. Pro, but they’ve added 300+ new features and two separate add-ons: Commerce, to build web stores with shopping carts; and Control, which allows users to edit their websites directly from a web browser.

SiteGrinder 2 Basic is quite affordable at $129, making it perfect for those with simple web needs; the Pro version now costs $299, which is a worthwhile investment for web designers and others with more sophisticated demands. SiteGrinder 3 is more expensive, though there’s a substantial price break for pre-ordering by March 25, 2010, before its release on the 29th. I assume that once version 3 is released, SiteGrinder 2 will no longer be available for purchase (unless perhaps you’ve already downloaded a trial version). Those who have purchased SiteGrinder 2 Pro since January 1, 2010 will receive a free upgrade to version 3, while those who purchased it earlier can upgrade for $99. Basic 2 users can upgrade for $299.

Find out more or buy it here:
SiteGrinder 2
SiteGrinder 3

© Karen Joslin, 2010