Is there a way to communicate with web designer not using the PhotoShop on both sides? It is too expensive. When hand writing annotations will be always incomplete, buggy and time-expensive.

  1. May be there is PhotoShop viewer with which developer would catch colors, sizes, gradients, fonts?
  2. Or may be tool that can generate design annotations text file from Photoshop psd that can describe "how it is made"?
  3. Or may be export to any third party format can help?
  4. Or may be photoshop is just not the right tool?

Added: CSS export (I have tried CSSHat) doesn't suit well: a) sizes are in pixels (need to be converted to em/rem) b) shadows are not visually the same.

So if the goal is "not to do the work twice" designers should use another tool than PhotoShop. Of course I understand that Photoshop still the best for pure creativity...


3 Answers 3


Assuming you're using the most up to date version of Adobe Photoshop, the easiest way to do what your asking is to export the layers' CSS. Right click on the layer in the layer panel and choose 'Copy CSS'. This copies the CSS rules to your clipboard which can then be pasted into any text editor.

  • You've got to set your document up with the appropriate naming conventions in order for the css to make sense.

  • Each exported layer will show up as a CSS Class rule so when you're naming your layers, consider that. Each layer group will also have its own rule.

  • You've also got to communicate with your developer about some small changes they'll need to make to the CSS because it's not going to be a cut and paste situation. For example, spaces in your layer names will paste in as the '_' character since you can't have spaces in CSS rules.

This will not convert your page to a html document. It will simply output CSS based on your Photoshop file. Fonts, colors, shape widths, et cetera. This will have the greatest success if your developer is willing to communicate with you about how to apply these rules to the page to achieve the design.

  • Thank you. There I'm that strange developer that do not want to buy PhotoShop. But now there I have a topic to discuss with designer. Commented May 21, 2016 at 16:29

We build WebSpek as our own tool, specifically to address communication between designers and developers, it generates full job specification with marked up screens and code requirements

It also generates interactive presentation from the same spec. You can see it in action on YouTube

Free registration will be available starting Tuesday, May 24, 2016

  • Thank you for your answer. Could you help me to understand how to use the spec/presentation? I expect that it should be able to get fonts, sizes, gradients - but can't find the way. Commented May 21, 2016 at 18:30
  • Hi Roman, Registration for creating / editing specs will be available on Tuesday, but if you'd like I can create an account for you now, just shoot me your email via contact form on oss-usa.com
    – Max Tokman
    Commented May 22, 2016 at 15:27

This question was asked before somewhere.

Then, I asked on the stack overflow forum and the question was more conclusive. Normally they just take the layered PSD, they will take what they need and generate what they don't need.

On this case that the web developer do not want to use Photoshop just pass a PNG as a template, and the important elements separated (Logos, photos).

Do not generate your own CSS if you are not doing the CSS part. Well, you can generate it, but do not expect someone is going to use it as it is.

P.S. Photoshop is not Too expensive. 10 usd a month. http://www.adobe.com/creativecloud/photography.html

  • Thank you for your answer. There I'm the web developer (and it is my initiative to search something better than PNG). Now I understand that there are three ways to improve the process: 1) generate CSS and spec documentation (only css will be impossible to use , I agree) 2) add markup visually to PSD/PNG 3) open PSD in some kind of viewers that can instruct developer interactively... Not sure how all they works in practice. Commented May 21, 2016 at 18:39

Not the answer you're looking for? Browse other questions tagged or ask your own question.