Despite the best efforts of web developers worldwide, Photoshop is still the de facto bridge between the design and front-end development stages of many projects. Sometimes it seems like we all work with PSDs so begrudgingly that we’re trying to pretend it isn’t happening. As a result, the community at large tends to shy away from talking about best practices.

I have no interest in reinventing the wheel and proposing some kind of extensive PS workflow. That seems like a pretty silly idea in 2013 (no offense if you happen to be reading this while researching your 600-page tome on the subject).

What I would like to do is to highlight a few simple things that designers can do to save valuable time and money. Who knows, someday you might even finish an entire project without ever having to drink away the memory of needlessly redoing work because of a miscommunication. Fingers crossed.

Things to Avoid

Transparency

There’s a time and a place for everything. It’s very possible for developers to achieve transparency with CSS but it’s not always clear if this is the designer’s intention.

I’ve seen quite a few PSDs where a designer wanted a slightly lighter color so they simply reduced opacity. This is a convenient technique for a designer, but it creates a fairly significant ambiguity for the developer. They may be willing and able to do some detective work to figure out the color/transparency combo which they can then recreate in code, but what if that shape/text/graphic ends up moving around (like layouts do these days) and overlapping something? Was it really supposed to be transparent?

Another thing that’s worth considering is whether that transparent color fits into a standardized palette for the site. Transparency tends to be a slippery slope to that dreaded land of many, many almost-the-same colors. After factoring in a developer clumsily grabbing edge pixels with the eyedropper tool, it’s easy to imagine things getting out of hand.

So: feel free to use transparency, just make sure you really mean it.

Blend Modes

Unlike transparency, blend modes simply have no place in a finalized PSD. I love them just as much as the next guy – I spent most of the 90s tweaking that damned dropdown menu. They’re fine as an intermediate step in creating a graphic but the problem arises when a design requires a blend mode to place a graphic in a surrounding context. This just simply isn’t possible in CSS. Sometimes it will be possible for a developer to reassemble things a bit in Photoshop to make it work but hopefully the thought of a developer attempting to do this with your PSD sufficiently terrifies you into avoiding it. If not, try picturing a drunk Edward Scissorhands attempting to dry clean your favorite jacket. You get the idea.

Rasterizing Type

Besides willfully rasterizing type (which is fairly uncommon these days), there are a few different workflows where text can end up in Photoshop and yet be unavailable for a developer to select as text. This prevents the dev from harvesting valuable info via the character palette. It’s beyond the scope of this post to hypothesize about those workflows, but providing selectable text will help you avoid a long chain of questions about font, color, size, weight, etc. On a related note: make sure you are aware of the advantages and disadvantages of various font services online. This is also beyond the scope of this article, but there is extensive info on this subject freely available elsewhere. Read it. And then read it again because it changes all the time.

Preparing a PSD for Handoff

Delete Anything Not Used in the Finalized Design

Keep in mind that, during the process of extracting images and data from a PSD, a developer will probably be continually turning visibility on and off for almost every layer in the file. If there are extraneous layers hanging around from earlier iterations of the design, this process can get really dicey. Not only is it annoying as hell to wade through extra stuff, there is also the possibility that a developer could get confused and start weaving crusty old design elements into the final product. Ain’t nobody got time for that.

Label Until Your Therapist Starts to Worry

Think about the layers palette as the legend for your design. Spend some time making it as intuitive and helpful as possible. Anything you can sufficiently explain there will not need explaining elsewhere (email, telephone, fax, etc).

The process of labeling and organizing your document can also act as a nice gut-check for your design. If you find yourself about to hand off a big pile of madness that you can’t even begin to rationally describe, you might want to take a second look at things.

Folders

In the process of organizing the layers palette, some designers get a little too worried about developers potentially mangling their document. Excessive layer condensing and oversimplification can make it harder for developers to slice images and get data like text sizes and shape colors. It’s a good idea to nest everything in a nice, organized fashion.

Once again, this process can be helpful for everyone involved. As a designer, my Photoshop style tends to be a lot more "Mad Scientist" than Level-Headed Technician. It’s not uncommon for me to have 17 layers of unrelated crap sandwiched between two adjacent headlines. But when I hand that document off to an actual human being (my future self included), I reorganize things into some semblance of order to make things easier and less disaster-prone.

There you have it. For a list of demands from developer to designer, I think this is pretty darn concise. And if you happen to despise your developer, you can always do the opposite of all this stuff and snicker to yourself as you imagine the cursing and fist-shaking being done on your behalf. Just steer clear of deserted alleyways for a little while after pulling that one.