Design insights & tutorials.

Polishing Your PSD: 3 Friendly Reminders for Front-End Sanity

Turquoise Flag-Tip

polishing-psd-quick-tip

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”.

Discussion

We want to hear what you have to say. Do you agree? Do you have a better way to approach the topic? Let the community know by joining the discussion.

  • simonh4

    Thanks for the tip! There was also a really helpful list of tips and tricks to polish PSDs that was avilable around, I need to find it again :-)

  • simonh4
  • michellecollins

    Thanks for sharing! Both of you )))

  • http://www.facebook.com/profile.php?id=533814656 facebook-533814656

    Good stuff Liz. There is nothing worse than a pile of “layer 197 copy 6″ stacked upon each other in a meaningless, descending order of ambiguity.

  • simonh4

    agreed!

  • http://twitter.com/noel4nopun Noel Wiggins

    When designing I usually just go with the flow I am so not thing in the terms of labeling and order…


    Thanks & Regards
    Noel from nopun.com
    a professional graphic design studio

  • http://twitter.com/noel4nopun Noel Wiggins

    When designing I usually just go with the flow I am so not thinking in the terms of labeling and order…

    Which is good for the creative moment, but not so good for whenyou revisit the file weeks months years later.

    I will make the promise to keep my files clean!


    Thanks & Regards
    Noel from nopun.com
    a professional graphic design studio

  • xyxjasilixyx

    Nice, thanks!

  • emiliewyqued

    My goodness this is so true. I am both a designer and a front end developer (and secretly a ping pong champion) and I just dealt with someone else's design in Photoshop for the first time. When you look at my files, I follow all these rules (being a front-end perfectionist has led me to be OCD in my designs so that months later I can look at them and know what's going on).

    This guys file:
    Nothing was merged
    Nothing was labeled
    I had to hunt and peck for EVERYTHING

    I ended up charging double because of the time (and headache) it took to slice, which was funny because that ended up being MORE than if they just came to me in the first place.

  • Adam_Wagner

    Just what I needed to hear. But hey Liz, where should I put rollover / click gfx? That's what usually causes the most messiness for me.

  • Liz Hunt

    @Adam_Wagner Good question! I can only say that my preference for organizing rollovers and effects inside PS files is by stuffing them in their own folders (if necessary) and stacking them above elements they relate to (like a button or link, for example). This obviously depends on what effects you have added to your layers, but it makes sense for me to think about PS files in a descending order with all the 'bells and whistles' nestled in after a solid structure has been established. This is normally how one would think about markup, so why not a PS file? ;)

  • http://www.curtiscopeland.com curtiscopeland

    Great insight into managing the mess of Photoshop mayhem. Thanks for sharing!

  • http://www.sjlwebdesign.co.uk/ Sam

    Useful tips, I have been forcing myself to organise my PSD's into folders and label layers as it helps save time and looks more professional. It's just hard to remember when you start to get into the flow of a new design.

  • rosywebs

    I am always connect with friends through blogger.nice post Thanks for Sharing
    More templates easy to download

  • Matt

    Thanks for this nice work!
    dizi izle

  • http://www.clippingimages.com/ Clippingimages

    awesome one dude..thanks for sharing…

  • http://www.facebook.com/lex.singleton Alexander Singleton

    This technique is well worth doing for yourself as much as any front end web designers. I’ve had to come back to messy psd’s I thought I was done with months ago when a client needs a little alteration. It certainly pays to give a file a touch of structure.