Design For Efficiency: Photoshop Techniques & Templates

Yep, it's me again. The pro-process designer who wants you to use smart objects and break those awful Photoshop habits. Are you noticing a theme yet? I love efficiency. And organizing. And most of all, organizing efficiently. So I've got yet another process-tweaking post for you, and this time it's epicly long and comes with free PSD templates. FREE PSD TEMPLATES, people. And I didn't just write that for the search traffic. They really exist.

This time I'm breaking down my techniques for designing large sites and sharing tools for efficient comp production. I'll walk you through my process, and then you can add your ideas to the mix.

Short on time? It's a long post, I know. So here's the quick and dirty summary. I use a comp layout template [download] with guides and a preset structure. I combine that with a style guide template [download] . I group things and name them constantly as I work and don't leave all the clean-up until the end.

Mass Comp Production

PROCESS. TEMPLATES. Seemingly dirty words when you're engaging in creative work. But this post is in no way asking you to crank out mindless templated designs. Just mindful design files. I know it's not very designer-ly of me to insert so much tedium into things, but deep down you know you'll be doing tedious stuff one way or the other. I've learned this the hard way time and time again. If you do it from the start, it's broken down into manageable bits and barely noticeable between the more enjoyable parts of designing.

The techniques I outline here can be a big time-saver when you're tasked with producing 10 or 20 Photoshop comps, but they are beneficial for smaller sites too. Even if you're only doing a single comp, the organization will pay off. I've worked on a number of large sites over the past few years and with each one I've streamlined my process a little bit. Every undertaking has helped me find a weak link in my process the hard way, so hopefully I can save you the trouble.

THE TEDIUM-FRUSTRATION TRADEOFF

I know I'm borderline OCD, and not everyone loves organizing their design files the way I do. It's really hard to make it a priority when you're in the flow. And, yep, it'll add a little bit of time to your process up front. So why do it? You're essentially trading a little bit of tedium up front to minimize frustration and inefficiency later on.

• Avoid find-it frustration. You'll spend some time naming and grouping things as you work, but in my experience you're saving a lot of "where the heck is that layer?" hunting. Aimless searching not only wastes time, it breaks your flow much more than a few "new layer" commands.
• Save buildout time. It'll make buildout easier no matter who is doing the building. If you hand your designs off to a front end developer for buildout, he or she will love you more. Imagine about how annoying it would be to dig around 380 unorganized layers someone else created. You'll save them a lot of time and effort and appeal to their sense of order. And if you build your own sites, you'll love yourself more. Because even a design ninja like you can't remember where everything in that killer comp is and how it got there.
• Make maintenance easier. Having organized PSD files and a Style Guide will feel like a blessing six months from now when the client asks for design changes and you have to unearth those old files. You'll be reacquainted in no time.
• See the big picture. The style guide evolved over time. It started as just an empty PSD I could pull elements in and out of, because that felt easier than trying to duplicate and shift elements up and down through hundreds of layers in the Layers palette. But I quickly saw the value in having all my styles in one place. Even if it's sloppy and never goes out to the client, there's a huge benefit to keeping a style guide. It forces you to think about consistency and the overall design system from the start.
• Be prepared for handoff. Sometimes you know it up front, and sometimes you don't, but often you'll be handing your precious PSDs off to someone outside your company. Why wait until the last minute and scramble to prep things?

LAYOUT & STYLEGUIDE TEMPLATES: YOUR NEW BFFs

When I'm starting up a big project, I always start with the two PSDs I am going to share with you. One holds my first set of layouts. The other acts as a crude style guide and dumping ground for design elements.

The layout template is my starting point, and usually ends up the base for dozens of additional templates. It's simply a good foundation to expand on. The toolbox folder contains guidelines based on the 960 Grid, column helpers, shapes for easy measurement of common element and spacing sizes, and guides for common browser sizes so you can easily check your "above the fold" area. It also has standard folders and sub-folders to get you started down the organized layer path.

The style guide template has pre-loaded folders too. I put this PSD up on my second monitor and turn the folders on and off so I can avoid scrolling. As I design, I fill it with elements I know will be reused over and over again. Button styles, icons, typography, and basics like the color palette.

HOW I USE THE LAYOUT TEMPLATE

The first thing I do is copy this file into a folder and rename it something useful like client-name-round-1-comps.psd. Then I open it up and do a little tailoring before I start designing. I have it pre-loaded with a starter set of folders and columns that I find myself commonly using, but these folders don't make sense for every project so I will edit and delete as necessary to fit the site I'm about to design. It's easier for me to delete or rename things I don't need than to start from scratch each time.

Here's what the layer structure looks looks like before tailoring:

If you hate the color-coding you can always turn that off by right-clicking on each folder and selecting "None" as the color. I find it hideous to look at but handy for navigating myself.

At the beginning of any design, I lean heavily on some of the things found in the toolbox folder. The main cols folders contain sizing for common layout scenarios. I often change the sizing of these, but it is helpful to have a starting point. The measurements folder holds a whole bunch of - you guessed it - measuring guides. The 30px square, for example, is frequently used as a spacer between columns. The 75px and 100px boxes come in handy for thumbnail photos. Even on the most creative and organic sites a few standard sizes will come into play. It's nice to have them ready to go when you need them. Including the 960 Grid is a no brainer since it's the framework I most often start with. You might want to switch it to match a different framework, or move to 16 cols instead of 12. I happen to use 12-col layouts more often than 16 so that's the one I chose to for my foundation. 

As I design, I am constantly organizing things. Every time I create a layer I name it immediately. I try not to wait and clean things up later, because later never comes. Or it comes sooner than expected and I'm rushing through clean-up. My base folder structure gets refined, and some of my folders get compressed into Smart Objects. (Friendly reminder: Smart objects are pretty awesome for reusable widget things. They do slow Photoshop down, but they also make updates a thousand times easier.)

If you are responsible for front-end development, producing design comps with this level of structure and planning is going to feel natural because you know that at some point between PSDs and buildout it needs to happen. Buttons need to get sliced, hover states need to be created, and exact column widths need to be calculated on. You know you will chop things into parts - header, footer, sidebar, content. As your stylesheet comes together you begin to see where exceptions have been made, and any lapse in consistency becomes very evident. All you need to do is move some of that structural thinking into your design process to make it more efficient.

Once you know a few Layer palette keyboard shortcuts, naming and grouping becomes a natural part of your process and it won't feel disruptive. I am awful at remembering shortcuts, but I use a handful constantly:

• Group in folders > Hold down Ctrl/Cmd and click on layers in the palette to select multiple layers, then hit Ctrl/Cmd+G to group them into a folder. You can collapse or expand all “top-level” layer groups by ctrl (or command) clicking on any of the top-level layer group arrows.
• Create a new layer > Shift+Ctrl/Cmd+N. This launches the New Layer dialog box where you can name the layer.
• Duplicate a layer > Select the layer you want to duplicate and hit Ctrl/Cmd+Alt+J. It launches the Duplicate Layer dialog box where you can name the layer. If you don't need to name it (if it's going to be named exactly the same as another layer, for instance) you can skip the dialog box by hitting Ctrl/Cmd-J instead.
• Collapse/expand top level folders >Hold down Ctrl/Cmd and clicking on any of the top-level layer group arrows. This will also collapse and expand all top level layer styles.
• Quick renaming > Double clicking directly on a layer's name in the layer palette allows you to edit the name in-place.

The rest of the structure is pretty self explanatory. The top level folders match closely with HTML markup structure and are named HEADER, CONTENT, SIDEBAR, FOOTER and BACKGROUND. You should tailor these to fit the site you are designing. Within a folder like "primary nav" where elements have multiple visual states you will find subfolders labeled hover, on, and off. In the CONTENT folder there are sub-folders named "text" because I find it's easier to change all of the fonts when they are grouped together. Similarly, in buildout it's easier to turn all of the fonts in a section off (to cut a background graphic, for instance) if they're in a single folder.

By the time I'm done designing the layer palette usually looks much different. I usually include multiple comps in a single PSD, and these are grouped into individual layer sets. As I add comps I often collapse CONTENT and SIDEBAR together into a new folder with the page name. So I might have a new folder structure that looks more like HEADER / HOMEPAGE / LANDING PAGE / CONTACT PAGE / FOOTER /BACKGROUND. Within each page folder (ex: LANDING PAGE) you'd find folders labeled CONTENT and SIDEBAR, since the sidebar often changes per-page. I create tons of sub-groups beneath each of my high level groups. You are limited to 5 levels of nesting, but even with my obsessive nature I find it rare to want more than that.

Once the header, footer and background are established and I don't plan to make big changes to them I turn them into Smart Objects. If the page lengths vary a lot I duplicate the footer Smart Object once for each page, and move those copies into the page groups. This way I can place it in the right spot vertically for each page group instead of moving it up and down every time I need to output a JPEG for review. Need to change a link in the footer? Not a problem. You do it once in the Smart Object and it updates on every page.

Photoshop starts to crawl when the file gets too big. I have a brand-spankin-new Macbook Pro and still can't stand to work with more than 5 or 6 comps in a single Photoshop file. So when I'm ready to branch out to a second Photoshop file I keep the toolbox, header, footer and background and ditch the page comp groups inbetween, then save this file under a new name. It makes a simple base template.

When comps are finished, I do one of two things. If it's a small site I create Layer Comps for each page. If it's a big site, I break them out into separate files (one for each page or one for each section of the site, depending on client needs) and name them accordingly. I always keep Smart Objects and the original combo layout files since they're handy for making updates.

HOW I USE THE STYLEGUIDE TEMPLATE

PHEW... still reading? Thanks for being dedicated. There's one more piece to my tons-o-comps production puzzle. It's a style guide file I keep open on my second monitor while I'm designing. As I make big decisions on typography, buttons, colors, etc. I pull them into the style guide. I don't keep this one super clean and organized. In the beginning I mostly use it as a temporary dumping ground, pulling stuff in and out of page folders. I hate dragging layers around in a super long palette, so it helps me avoid that.

Maintaining a style guide might feel like overkill if it's not a deliverable you've promised the client. But when you're dealing with five or ten comps it is easier to grab elements from the style guide instead of digging around in your layouts for the things you need. And more  importantly, it makes you think about the big picture and design with consistency - a necessity when you're working on a large site.

I organize it into folders so I can fit more into a monitor-sized document, then turn the visibility on and off as needed.

There are a few pre-made things in here, like a basic form, but mostly it's a blank slate for you to fill. I used to create a big sloppy mess of stuff, but I found a little organization goes a long way toward making this useful. I can evaluate the elements apart from the design around them, which makes it easier to spot inconsistencies. If I look at the typography on it's own, for instance, I can see how the font stack is shaping up and how it will extend as I delve deeper and deeper into the content.

AND YOU?

These two files, combined with strategic use of Smart Objects and a lot of practice, have made a huge impact on my work. I'm no longer overwhelmed at the prospect of creating 25 comps. But every process can be improved and mine is no different. So while I hope you find my tips and the accompanying templates useful, I also hope you'll add your own in the comments below!