Export HTML and CSS from Photoshop or InDesign

Question

I am building web site and I've got .psd file of how the site should look like and I can make it manually but it will take time. I was wondering if there is a way to export a Photoshop or InDesign file to HTML without requiring major corrections. There is a way to export from InDesign to Dreamweaver but it messes up pictures and text. Is there some a alternative?

Solution 1

There is nothing that will give you an exact replica of your design in your graphics program converted to good semantic and usable HTML / CSS. i.e. Photoshop does have the slice tool that you can use and then export as HTML, but the resulting file/images wouldn't be considered ideal by any web developer/designer worth their salt.

Hand coding a design for someone experienced shouldn't be too time-consuming. Hand coding will also ensure that you cover all scenarios/intricacies of the design, like responsiveness, SEO, accessibility etc.

There are however some new tools like http://www.csshat.com that are getting good reviews.

And you could always google for PSD to HTML service providers if you're running short of time and don't mind paying to have a good job done.

Solution 2

you can export psd file to html via Site Grinder plugin.

download this plugin via http://www.medialab.com/

Comments

[Reshape Media]

you can try Export Kit: exportkit.com to get PSD to HTML5, CSS3, JavaScript, jQuery, Flex and more... in just a few clicks. Super fast, crystal clean code. Also supports Responsive CSS3! Almost perfect replica of your PSD design. exportkit.com/downloads - try it yourself.