Wednesday, September 21, 2011

Preparing Photoshop files for hand-off

http://www.noupe.com/photoshop/preparing-photoshop-files-for-web-developers.html

a great article. Comments are helpful too. I agree with the bit about keeping more layers rather than flattening everything thus allowing the developer to slice as they will and to make edits as necessary.

And this is a nice list of things that a designer can hand to the developer to make their life easier (from one of the comments):

I follow almost all of the tips listed. Some additional ones I add are:
1. Always include a flattened version as a support/reference files in case of any shifting
2. High level call out for dynamic content and areas that are fluid/flexible
3.Pixel specs – similar to old school print specs – a file with:
- hex color call outs
- font stack, type size, line height, hex colors, style, – weight, letter spacing etc
- border widths, hex colors
- container heights/widths
- padding
Some may wonder why so detailed – if I can provide that to my dev he/she can produce the CSS in half the time. The other reason is it leaves little doubt for color shifting since I’ve spec’d it out.

No comments:

Post a Comment