So you’re a visual designer who wants to suck up to a certain front-end hat guy. Wouldn’t it be a great gesture to clean-house and organize your file so the slicer doesn’t ‘slip’ and accidentally butcher your brilliant work?

Some firms carefully distingush the roles of visual designer and front-end developer; other firms have that one ‘web guy’ who also IDs as the creative talent, the Flash programmer, and the IT go-to (and secretly, the ping-pong master champion). Although our titles are more for show than showdown here at Go Media, there are those projects where designers and coders remain very separate.

If you wear the hat of front-end web developer on web projects, nothing is more frustrating than firing up someone else’s PSD file and finding a sloppy, steaming pile of Illustrator-imported poo. If your visual designer happened to be miles away on vacation doing something mildly exotic (or maybe just slightly dangerous), you’d be stuck with a razor-sharp deadline for valid markup and an endless sea of layers labeled ‘<Path>’ and ‘<Object>’. Blurg.

Take heed these gentle reminders for a polished file, and possibly (standards help you) a steady-handed co-worker:

1. Back It Up, Merge It Down

Each designer has their method, and it’s only madness when someone else messes with a sacred system. When organizing a Photoshop file for the slicer-and-dicer, create a back-up of your original for safe-keeping. Merge any monstrous layers down for the fresh file — this lightens the work-load for yourself and creates a cozier file for front-end guy. To ensure someone’s slicing the right PSD, label files something that communicates finality, such as “Homepage_Final.psd” or “ContactUs_Apocalypse.psd”.

2. Think <structure>

Even if you don’t get off by looking at the code (you know its bad when Ctrl + U is your favorite browser key combo), most visual designers have an inspired sense of website structure. Why not use this understanding to organize the layers in your file? When you think about it, most websites have an identifiable Header (top), Content area (middle), and Footer (bottom). You can also usually spot ‘Main’ or ‘Sub Navigation’ within a design. Chances are, these are the areas your HTML/CSS guy will be looking for. So for Meyer’s sake: next time you’re tidying up a design, man up and create some folders! Front-end guy certainly isn’t scared of them, and he’ll appreciate the effort.

3. Label Layers, Adjust Your Junk

Don’t just slap a few folders into your file and call it quits — get some names on those mother lovin’ layers! You don’t have to get carried away; a little labeling goes a long way. This is especially true for imported Illustrator files. Solid names are ones that not only distinguish the layer, but reference the general parts of the website. For example: you’re designing a page with elements collectively making up the background for footer navigation. You might stuff the elements in a folder titled ‘Footer’ (doing this obviously tells you where in the design these layers are), and label them “Background Bottom”, “Background Top” and “Background Overlay”.