Media Lab Home > SiteGrinder Home > The Big Idea
Problem:
Web Sites Are Difficult
It is no easy task to actually build a working site that matches a visual design created in a tool like Photoshop.
Photoshop is designed to give total freedom to the artist.
The web, on the other hand, is built on top of many confusing technologies and standards that place other concerns ahead of preserving visual design integrity.
This situation has understandably intimidated many users who are good at Photoshop but don't want to spend months or years learning the gory details of the internet such as XHTML, CSS, javascript, etc.
Solution:
Stay In Photoshop!
SiteGrinder 2 successfully turns Adobe Photoshop into an easy-to-use and powerful website design and production tool.
While SiteGrinder is not aimed solely at the web neophyte, a SiteGrinder-equipped designer with no previous web experience can use only their Photoshop skills to go from concept to deployment of a professional, standards-compliant site in mere hours with no slicing or programming.
The difficulty of this task is invisible to the user as SiteGrinder builds graphics, text, and interactivity using modern web standard technologies and takes into account tricky requirements like cross-platform browser compatibility.
Name Some Layers,
Get a Website!
You know Photoshop, SiteGrinder knows CSS, HTML, and web image formats.
You tell SiteGrinder about special layers, like buttons, by adding “hints” to the layer names.
To the right you can see how the words “button”, “rollover”, and “popup” are the only things required to create interactivity.
Once you’ve added a few hints you can open SiteGrinder and build your page with one mouse-click.
This unique system works the way you do, turning web design into a more creatively satisfying activity. Enable your web site's functionality as you design it, quickly testing it out live in a web browser whenever you feel like it.
Such a flexible workflow even allows you to make major design changes, like selecting a new background color, at the very last minute without headaches!
SiteGrinder
&
Pages
You may wonder how SiteGrinder can make many web pages from a single Photoshop document. The answer is easy!
Photoshop has a little-used but powerful tool called the “layer comps palette”.
This palette allows you to save and name particular document states, including the position and visibility of every layer.
All you have to do is make the document look the way a page on your site should and then make a layer comp. Then set up the next page and repeat.
SiteGrinder will use those comps to decide what to include on the web pages it produces.
Even cooler: if your layer comp names match your button names then SiteGrinder will link them automatically. You don’t even have to provide URLs!
Now that you grasp the basic idea, you'll want to head over to the SiteGrinder Learning Center to explore in more detail.