Today I'd like to talk about some great tips for those offering website design services that will enhance your day-to-day performance, and keep your developer happy too.

Photoshop is a great tool. But like any tool, it's best if it gets out of the way as much as possible and allows users to execute tasks in a seamless manner. The less clicks, the better. One crucial component to efficient workflow in the Photoshop environment is a well-organized file. Not only will this improve one's own QOL (Quality of Life, a term you’ll see me use often), but it's doubly important when a file is shared across a large team of designers and developers (especially those focused on ecommerce website development) over a long period of time. There shouldn't be any mystery when you open up someone else's Photoshop document (PSD). I organize my files so that anyone in the future can open them and easily understand the file's labeling and hierarchical structure. 

What a pleasure it was to come across the invaluable resource that is The Photoshop Etiquette Manifesto for Web Designers, by Dan Rose. This is the holy grail of polite PSD organizational tips;  a great little manifesto that should be passed along and shared with all of your design and developer friends, in order to promote best practices across the industry. Today I'd like to share Internal File Organization etiquette tips as seen in the manifesto, and expound upon them a little: Let's get started.

Tip #06: Name Layers, and Name Them Appropriately
“Be as descriptive as possible on *every* layer. "Layer 0 copy copy" isn't gonna cut it."

When working quickly and creatively, excess layers naturally will occur. During the design process, when the right brain is employed, it's not convenient to stop and analytically label layers and folders or to delete extraneous layers. That's fine. You don't have to be exacting in the creative stage. But, once a design is pretty set, go back, reorganize, and perform a final organizational check prior to sharing your file with the world.

Tip #07: Use Folders
"Grouping layers makes it easy to show/hide various areas quickly."

As a general rule, I divide a file's elements up into 5 main folders that make sense from a top-down and depth standpoint: Header (contains logo, login search and navigation), Content (contains all of the main page content), Midground (a container the content sits on), Footer ( links, copyright, etc) and Background (pattern, color, gradient, etc). It makes sense that items near the top of page be stored in a folder at the top of the layers palette, and so on. Within each of those top level folders, I group large chunks of elements together logically. So, for example, in a two column design, I'll have folders called Left Column and Right Column. Inside of each of those columns I'll make individual 'Callout' folders. When you're working on complex multi-layered designs, you'll want to group multiple like-items into their own folders so that you can move them around quickly as a group. My folders function kind of like a website's navigation, with several tiers of interior navigation as you dive further into the site. 

Tip #08: Delete Unnecessary Layers
"Are you a layer hoarder? It's cool to get rid of all the unused layers from your PSD."

There is nothing more confusing to someone who is new to a file than layers that are turned off and not labeled to indicate why that might be. After approval on a design, I do a Save As, and eliminate any unused layers so as not to confuse my development team.

Tip #09: Globalize Common Elements
"No reason to have 5 copies of the logo for different layouts. Globalize it on a master layer."

This tip is all about streamlined efficiency within your files. You don't want to have a bulkier file then need be. If you've got a common element running through multiple sections, use just one layer for it.

Tip #10: Use Layer Comps + Smart Objects
"Layer Comps (Window > Layer Comps) are a great way of showing variations without having to build multiple PSDs."

For variations of assets, like mouse-overs, for example, Layer Comps or appropriately labeled (and colored) layers can be used. I tend to lean toward using Layer Comps for larger areas such as overlays, and will sometimes just use a colored/labeled layer for mouse-overs on buttons. Chat with your developer and come up with a system that works for your team. To learn how to use Layer Comps, check out the Adobe page on Layer Comps and this tutorial.

I hope web designers can take away some tricks and tips to improve your experience working in Photoshop. Additionally, developers may get a kick out of Enterprise HTML (a more sardonic spin that emphasizes the importance of best practices). Anyhow, read The Photoshop Etiquette Manifesto for Web Designers in its entirety to keep your files looking sharp, and come one step close to becoming a Layer Mayor. I'm a Layer Mayor. Are you?