SiteGrinder 2 turns PSDs into HTML/CSS

MediaLab, makers of the popular PSD2FLA Photoshop-to-Flash conversion plug-in, have introduced SiteGrinder 2.0 for converting PSD files into interactive HTML pages and Web galleries. Some of the capabilities match things Photoshop and ImageReady already offer (e.g. slicing, creating rollovers), but SiteGrinder goes further by generating scrolling text boxes, CSS-styled text from Photoshop text layers, multiple pages from Layer Comps, and more. The site lets you see the product in action and check out example pages it has generated. I’m no CSS ninja*, so I can’t evaluate the quality of the generated code, but overall this looks like a pretty slick product.
All this makes me curious about what kinds of similar support, if any, we should add to Photoshop in the future. Past efforts to generate CSS have gotten pretty well ripped apart, and I don’t know whether any machine-generated code would ever please purists. And similarly, for the last six years GoLive has offered the ability to turn a PSD into a stack of DIV, but I’ve never met a soul who’s tried the feature. (Maybe it was ahead of its time–or at least the browsers–in 2000, or maybe it’s too hidden.)
So, I’m wondering: should we be working on ways (export from Photoshop/Fireworks, import via Dreamweaver/GoLive, etc.) to turn PSDs into images+CSS, or is that not a big need?
* I can’t get my blog comments to alternate colors, for crying out loud.

0 thoughts on “SiteGrinder 2 turns PSDs into HTML/CSS

  1. IMHO and I believe many others, it would be a waste of time. It’s not a big need, especially when in this day, it’s hard enough getting CSS/XHTML to look similar on different browsers.
    Photoshop is an image manipulation tool – leave the slaughter of precious CSS to another. Instead, make Liquify in CS2 work like it does in Photoshop 7.

  2. I definitely agree with Noel about getting CSS to look good on multiple browsers — in some cases it seems almost impossible.
    However, features like bundle for GoLive were pretty cool. Personally, I would like to see you give it a good try. The code generation is becoming much better and you have the tools.
    For what it’s worth, alternating colors drove me nuts for a long time 🙂

  3. I think Sitegrinder does an interesting job at utilizing Photoshop and (out)port layers with just keyword hints into css managed divs to web pages.
    Though ImageReady CS2 made an attempt at xhtml and css output, I certaining think it can be improved on. If ImageReady survives the next CS build, by all means embellish it. If it doesn’t survive, carry it over to Photoshop and/or FireWorks, provided Fireworks is bundled with the CS3 Suite (wink wink).
    Noel, Photoshop is for Photographers AND Designers (may it be print or web), if a web feature is added, more power to it. If you see it as just an image manipulation tool, I think you’ve overlooked a lot of features since 5.5.

  4. I agree with Noel. There has to be a million other more useful features that could be implemented into Photoshop than CSS authoring/compatibilty which I have yet to see be the rock-solid, consistent layout solution it is supposed to be. And Photoshop currently has a hard enough time generating clean, usable html.
    I do like the idea of adding more web functionality but I’d rather see more scripted/turnkey features like the Flash-enabled web photo galleries (but better designed and with greater control of the elements) and/or better PSD to Flash capabilities (without having to purchase a 3rd party plugin).

  5. To get alternating colors for your comments, your blog software provides two different classes to style: .comment and .commentodd
    Just give them two different background colors (or whatever else) and you’re set.
    [Thanks for the tip, Josh. I did that, and it worked fine in my old blog setup. But now–even though I have assigned the even and odd comments different colors in my CSS file (–they all look the same. I just don’t know what I’m missing. –J.]

  6. I looked at your css, you did indeed add the class .commentodd but you didn’t add a class for .comment
    try this
    .comment {background:red; color:blue}
    [Paddy, you rock! I’m updating the CSS now. Thanks much. –J.]

  7. Count this as a vote for the web design features of Photoshop to include something to generate the CSS. One of the things I miss the most in web design software is the design aspect. Since I do most of my comp work in Photoshop before I put the pages together, it would make things significantly easier if I could just ass a name to every layer and generate both the comp and the final css when the client approves.
    I got the Sitegrinder 2.0 software and it’s okay…but just okay.

  8. Photoshop is an image tool. Let it be what it’s good at.
    What’s the point of GoLive if you turn Photoshop into some kind of Frankenstein’s Monster of convoluted web features?

  9. Hi,
    I’ve made the tutorial which explains how to convert a psd file to a CSS using photoshop on
    I’ve received many comments about this technique mostly from real css developpers who don’t really enjoy when the code is not perfect (even if the code generated by photoshop respects web standards which is a really good initiative.).
    As far as i know everyone around me dreams about a more advanced solution of convertion psd to css so maybe that you could go further with its implementation or create a dedicated product aimed at the web conversion of all adobe generated documents.
    Best regards!
    JJ who loves photoshop !!!

  10. I use the CSS functionality in ImageReady 7 and Fireworks 8 and have come to rely upon their speedy, amazingly light, output of good, clean code. I am not a purist. So these two apps help save an enormous amount of designing and developing time. An enormous amount.
    More time could be saved if any of the following functionality were to be added to either of the programs.
    I would like to see the following functionality added to ImageReady:
    – A check box “Delete empty DIVs/Layers from CSS output”
    Explanation: When I’ve sliced an image, invariably there are slices I do not wish to be rendered whatsoever. Funny thing is, Fireworks deletes them automatically as its slicing functionality differes somewhat from that in ImageReady, although Fireworks code output is all inline CSS. If FWKS can delete empty DIVs and Layers on the fly, why can’t ImageReady?
    – Check box “Wrap HTML and CSS code in a seperate container”, together with a text field: “Set container width”, together with “Set wrapper positioning as” so I can choose Absolute or Relative.
    Explanation: I always need to hand-code and rearrange the CSS output from ImageReady (and FWKS come to think of it). Invariably I wrap a container DIV around the IR code in order to get the content centered on the xHTML page. Would be a great time saver if I could get ImageReady to do it for me.
    I would like to see the following functionality added to Fireworks:
    – Let me choose how I want the CSS to be output, right now I only get Inline code; this sucks. I want the code the same way ImageReady formats it, so either get rid of the Inline stuff, or let me choose “Output code like ImageReady” as an alternative.
    In the end, I’d like both programs to output identical CSS, in identical fashion, as I use these programs daily and I don’t like stopping to think:
    “Oh, so now I’m in Fireworks, so when I output the CSS I’m gonna need to remove the inline rubbish and reformat it into an external CSS file…”
    “Oh, so now I’m in ImageReady, so when I output the CSS I’m gonna need to delete the collossal amount of empty DIVs/Layers that I didn’t ask for…”
    To reitterate, I use the CSS functionality in both ImageReady and Fireworks and I rely upon their code for their speedy production, speedy prototyping and, whatsmore, when the client has OKayed a prototype, I tend to reuse most of the code these two magnificent programs have already created for me, in the final site.
    I’ll be really pleased if any of my suggestions are discussed within this blog, let alone taken seriously by the programmers at Adobe.
    Merry Christmas!

  11. Yes, Do it …. I teach it to students who are creating their own pages and sites with photoshop. AND its not just that easy myspace layout either. It would be great to have a simpler way to export what we do in photoshop to create more professional looking websites. I agree with the previous post that sitegrinder is just ok… it is not worth the money. It takes a few steps out of what most designers already do. If what adobe invisions only takes a few steps out and then adds a few other steps to the process then its not worth it. So, in conclusion whatever tool you use it must do more than the sitegrinder tool…

  12. I have to say- I was excited when I first tried the demo of SG2pro. …it seemed like all I had to do was learn it a bit more and I’d be kicking out web 2.0 sites with focus on design. I really wanted to make this product work for me- but I have to say- it’s confusing as hell even with the tutorials. I ‘thought’ I had my head around it= but it gets more confusing after the tutorials it seems. It also closes photoshop if I use my scroll wheel while in the report section viewing errors. Ouch- it took a while to learn not to use the mouse wheel. In short- I cannot justify buying this product and am extremely glad I didn’t purchase it a few weeks back upon creating my first demo site with it. (my reasoning for almost buying it was that it could only get easier from my viewpoint. It didn’t)
    In all fairness- I’m going to give the demo a few more attempts and will report back if I can get it to play nice.

  13. I have started using Site Grinder2 Pro after building a site with Fireworks/Dreamweaver and I have to say that I am impressed with Site Grinder2. The way it uses layer comps to build the pages of the site all from one psd files, reusing the outputted jpg or gif files is brilliant as is the ability to easily make web site menu changes for the entire wed site. It took me a lot more work to do this in Fireworks and many more PSD files.

  14. There are some great comments here, but they are dated. There are some very knowledgeable people here. Will you please discuss SiteGrinder 2 Pro with respect to Adobe Creative Suite CS4?
    I am evaluating and learning SiteGrinder. I would like to see it integrated with the Adobe CS4 Master Suite. However, I do not believe the code is completely solid in Adobe CS4 and Lightroom 2, because I have experienced some problems with the edit, menu, preferences in Lighroom 2 and with the Photoshop CS4 menu system with other plug-ins. So, it may be too much to ask Adobe to immediately integrate another type of program/company into their suite.
    I am a photographer who builds web sites and I think that Photoshop is another great tool to use in conjunction with any technology where its functions are useful and viable. Please keep the comments coming. These are very interesting bits of information.
    Best regards to all,
    Martin (Central Coast)

Leave a Reply

Your email address will not be published.