Comments on: SiteGrinder 2 turns PSDs into HTML/CSS

By: Martin

Martin — Sat, 21 Feb 2009 13:32:17 +0000

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)

By: Macro

Macro — Mon, 08 Dec 2008 11:47:10 +0000

Is there anything comparible to SiteGrinder that is less expensive?

By: RapidityAU

RapidityAU — Sun, 17 Aug 2008 16:50:03 +0000

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.

By: Troop

Troop — Wed, 02 Jul 2008 10:23:26 +0000

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.

By: Mr. McClean

Mr. McClean — Sat, 19 Apr 2008 18:25:03 +0000

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…

By: Scott

Scott — Fri, 18 Apr 2008 08:14:55 +0000

I would love to see this implemented, coming from someone who is not good at all with css.
Scott

By: Hrududu

Hrududu — Tue, 25 Dec 2007 10:40:57 +0000

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…”
or
“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!
Hrududu

By: Zoli

Zoli — Thu, 27 Sep 2007 13:44:00 +0000

Thank for the post, I will give it a try.
I still consider that nothing can replace hand-coded markup.
Keep up the good work.

By: psd to css tutorial

psd to css tutorial — Mon, 16 Apr 2007 08:48:50 +0000

Hi,
I’ve made the tutorial which explains how to convert a psd file to a CSS using photoshop on duclaux.net.
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 !!!

By: Pycelle

Pycelle — Tue, 13 Jun 2006 15:13:52 +0000

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?

By: BigEddie Calzone

BigEddie Calzone — Mon, 12 Jun 2006 12:18:50 +0000

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.

By: Paddy Mullen

Paddy Mullen — Sun, 11 Jun 2006 20:11:19 +0000

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.]

By: Josh Wand

Josh Wand — Sat, 10 Jun 2006 10:57:08 +0000

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 (http://blogs.adobe.com/jnack/styles-site-d.css)--they all look the same. I just don't know what I'm missing. --J.]

By: Greg

Greg — Fri, 09 Jun 2006 16:24:48 +0000

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).

By: heathrowe

heathrowe — Fri, 09 Jun 2006 15:33:11 +0000

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.