[veemjeem]

Didn't that YC company, Markupwand, do something like this automatically? Since they've vanished, I wonder if this problem is hard to do automatically?

Photoshop CS6 has this feature built-in, but it generates horrible css -- it reminds me of the days when people used Dreamweaver to output their html.

[jason_wang]

Doing it correctly is not trivial.

Beyond the CSS layout, you typically have to cut up the assets and put them in an image sprite. An automatic service wouldn't be able to cut up images correctly if the PSD is flattened. Even with layers, overlapping layers would give the automatic service issues (or bad CSS in the end).

PSD2HTML is more art than science.

[thesunny]

Markupwand is no longer available but (full disclosure) we've built a Photoshop plugin that does high quality conversions.

The goal is to create HTML and CSS that is identical to what a designer creates by hand.

The plugin takes any Photoshop image and return a virtually identical web page.

I say virtually identical because every browser renders text slightly differently and it would not be proper HTML/CSS to absolutely position and size text exactly to the Photoshop file. In a browser, the exact height of text will vary on each browser/OS and the proper way to write the HTML/CSS is to use static positioning and floats to position items to handle this. In this manner, if there is an image below some text, if the text wraps shorter or longer, the elements below will shrink up or expand down to preserve the design.

It also automatically supports Google fonts. You can use any Google font and it will automatically link them into the file.

It also has CSS3, IE8 and IE9 compatibility levels for your taste. The CSS3 version creates a smaller web page because it can use rounded rectangles and gradients.

Also, some designers will always prefer to code by hand but some parts are rote (e.g. specifying width/height, font size, font family, etc). We can shave off most of the conversion time by generating all the assets and a reference sheet with all the CSS styling, the x/y positions so that you can have full control over your code but still save lots of time.

We can also generate a layout sheet that contains all the elements and styling except for the positioning so you can choose to float, absolute, relative position, etc.

We also export in HAML, Slim, Jade for HTML formats and LESS, SASS, SCSS and Stylus for CSS formats.

But at its simplest, open your image, and click one button and it will generate a web version of any Photoshop image.

www.webbsy.com

[jakejake]

They do an OK job if everything is absolutely positioned and the PSD is really clean with layers for everything. But that isn't really acceptable these days where a good conversion is expected to be responsive and interactive.

I think they can save a lot of time with the mundane slicing and dicing though.