Photoshop CS4 Basics: Layer Management

When you start to work in a company doing any type of design you realize that organization is a key aspect of your working routine (if its a good company anyway). One of the things which especially annoyed me when starting wuup is Alan’s terrible photoshop layer structure. We had a system where he might do a design and i might do the html, so when i got a PSD with no groups, flattened layers, NO layer names and, the worst, no layer styles. See i’m a bit fan of non-destructive processes. As in keep every piece of source in its original unaltered form.

Here’s an example of a really bad layer structure. Notice all the ‘Group 1′, ‘layer 1 copy 6′ ect…

Now when it comes to me to convert this to html it gets really frustrating trying to slice parts for transparency. Basically i had to clean the PSD to a more manageable form.

Alans Bad Design

Alan's Bad Layers

As comparison here is my revised version of the same PSD. Notice the smart object for the logo (which contains the original vector). And the well named groups.

Bills Awesome Layers

Bills Awesome Layers

Also general rules for collaboration:

  • Never flatten layers, text or shapes (as this is a destructive process)
  • When you import a photo convert it to a smart object before resizing it (that way you always have the full version)
  • If it is a site design that is going to the html stage. consider using a grid to align shape layers (as shapes can be ‘half a pixel’ and causing the html’er to re-align shapes).

Thats all for now

peace

-Bill

Tags: , , , , , , , , ,