: How to pass website design to web developer? 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

@Debbie163

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. www.adobe.com/creativecloud/photography.html

Vote Up Vote Down

@Goswami567

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

Vote Up Vote Down

@Kaufman565

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.

Vote Up Vote Down