I am half-way through making a website. I first mocked it up in Photoshop. I then hand coded it in PHP/HTML and made several changes in doing so (meaning the original mock-up is out of date). I have now shown it to the management and they would like some changes but aren't exactly sure what they want (sound familiar?). I therefore want to make a few new mock ups.

What I'm wondering is whether there is a program/Firefox plug-in which will convert my html to a multi-layered Photoshop PSD file, rather than updating the old mock-up or slicing up a screen-shot?

  • seriously? just stick to mocking it up in the browser... Tony Crockford over 8 years ago
  • That's a very helpful and insightful comment, Tony. Thank you for taking the time to help. MrChimp over 8 years ago
  • I meant: http://24ways.org/2009/make-your-mockup-in-markup Tony Crockford over 8 years ago
  • Heh. Does she also have a tutorial on how to use translucent PNGs to bring your browser to its knees? MrChimp over 8 years ago
  • sounds like you have the wrong browser... :) Tony Crockford over 8 years ago
  • I'm using Firefox. That page judders when scrolling on everything apart from Opera. If anyone else is interested it seems it is possible to convert html to psd using this printer driver - http://www.verypdf.com/artprint/document-printer/html-to-psd.html - but it costs $38. Fairly cheap in the grand scheme of things but I think I'll pass. MrChimp over 8 years ago
  • Layered and editable? I'd be very surprised. (BTW the page works fine in Safari, Firefox and Chrome under OS X 10.6) Tony Crockford over 8 years ago
  • I bet it still looks ugly as sin though! MrChimp over 8 years ago
  • Ugliness, like beauty, is in the eye of the beholder. It was merely the first such article that came to mind. There are several others, but I can tell you're not for changing. :) Tony Crockford over 8 years ago
  • I could do it that way but as I am making a few different mock-ups for comparison it seems like it would be more effort. Plus I've never had any problems with Photoshop crashing, the text rendering isn't a problem as it's only a mock-up. Also, why would I want to enter a value, save the file, go to the browser and refresh just to move something slightly to the left that might not even be used in the final version? Photoshop is much easier for this kind of thing. MrChimp over 8 years ago
  • You're the one that identified the flaw in the process, once you start changing the site in the browser, it's hard to go back. Why didn't you get the final version signed off using Photoshop mockups? Why did you change the mockup in the browser? :) Tony Crockford over 8 years ago

1 answer

This was chosen as the best answer

There are several free tools for generating PDFs out of web pages, for example wkhtmltopdf and XHTML2PDF, which can then be opened directly in Photoshop. You could also try one of the browser extensions for exporting the whole screen as PNG, like Screengrab.

I'm not sure how you're going to avoid slicing a whole image up though - what information in your HTML/CSS would be used for determining which layer to put something on in the first place? If you're putting that information in your HTML/CSS somehow anyway, then use that to hide everything but one layer in turn (opacity: 0; or something), then take a screenshot per layer and then recombine them in Photoshop.

Answered over 8 years ago by Rob Crowther
  • pdf from html won't be multilayered, so the exercise is futile (IMHO) and no better than a screen grab, as it will still need slicing. Tony Crockford over 8 years ago
  • Yep, that's what I said... Rob Crowther over 8 years ago