Media Lab makes a program, a plug-in, for Photoshop. It is called SiteGrinder and it enables you to create multiple web pages directly from Photoshop CS files. When I first read this, I thought something like: “Probably when hell freezes over”, but I decided to give it a try and see what happens. After playing around with it, I can only say there’s a lot happening when using SiteGrinder.
The concept is deceivably simple: you install SiteGrinder as a plug-in in Photoshop’s plug-ins folder (with an installer—-no need for manual dropping of files) and once you have created a few layers with content, SiteGrinder builds them as separate pages.
Site Grinder doesn’t come with a PDF manual, so you’re either on your own with the help files to assist you, or you first print the help files and the documentation from their web site. The Media Lab site also offers some basic tutorial pages that you can go through to learn how the product works and which rather stunning results you can obtain through its use.
For this review, I read through the complete help files and set up a few test pages. I didn’t concentrate on the design, but on the capabilities of SiteGrinder. I first tried using SiteGrinder without any help at all. That is a no-go. The program is easy to use, but it does have its own working method you must get accustomed to.
After reading through the first ten pages of the help files, I gave it another try. Amazingly enough, and much to my surprise, I was able to build a page. A simple one, but it was a page with a rollover button on it, so I got a good idea of what SiteGrinder is capable of.
50% off for a limited time only.
Sign up now!
- A Monthly Newsletter with unique content not found anywhere else
- Selected Product Reports
- 25% off the Reports in the Research Store 50% off for a limited time only | claim your coupon!
- Advice, Analyses & Multimedia Tutorials on Graphic Design, Photography, Video-editing, and Publishing Systems
- The best content on cross-channel publishing on the web
If you read the rest of their help files, and pick up on one or a few of their excellent tutorials, the odds are that you can build a web site with Media Lab’s SiteGrinder within half a day or so. I don’t believe the learning curve of other programs that allow you to build web sites is so easy on its users.
Concept
The whole idea behind SiteGrinder is that if you’re going to use Photoshop for Web page mock ups anyway, you might as well create the web site in its entirety in Photoshop. Photoshop, not ImageReady, has so many capabilities by itself, that you can use it to set up a complete web site with contents.
But how can any program know which page elements are dynamic and which are not? How should it discern between image and editable text? The developers at Media Lab came up with the idea of using Layers and Layer names for this. In fact, if you’re using Photoshop CS, they’re even using Layer Comps to build your web site.
SiteGrinder does take some getting used to, but it doesn’t force you to learn a lot of new ways to work with your existing web page mock ups. The workflow using SiteGrinder can perfectly well start with a traditional mock up. If you decide later on that your mock up was good enough, a few extra layers for dynamic buttons and the like, may suffice to have the program build your site.
The only change in your workflow will be that you will have to add “hints” at the end of each layer name. If you want paragraph text to appear like real, searchable (i.e. editable text) text, you will have to turn off anti-aliasing for the layers containing this text. SiteGrinder will automatically recognize this layer as holding editable text.
Layer names (the part of the name before the SiteGrinder hint, which is a reserved name and notation) refer to pages. Layers that start with the same name will have their elements pointing to that same page. The Layer name will be translated in the file name for the page, and will also appear in the Title tag.
Layer comps will help you set up pages even more easily. SiteGrinder by default creates pages named after any buttons that don’t have “-link” hinted layers associated with them. To specify layers that should appear only on a specific page, you create a layer comp named after the button with a “-page” hint and then show the layers unique to that page only in that layer comp.
No
From a button named “contact-button” SiteGrinder would automatically create a HTML page named “contact.html”. To specify content unique for that page you would create a layer comp named “contact-page” that had each layer you want to display visible.
SiteGrinder works consistently with this kind of clever ideas. While you’re working with it, you keep wondering at first how they got to this concept, that is so elegant and so simple to apply—-especially if you are good at working with Photoshop. It does require you to concentrate a while on the working method, but the learning curve is far from steep and the results are no less than stunning!
