Create A Style Toolkit, Save Time and Mental Energy

Whether you're designing 20+ mockups for a complex web application or 5 templates for a basic marketing website, all of your layouts share basic components. And if you're working in Photoshop, you find yourself copy and pasting those components over and over again as you mock up each page. I found myself wasting way too much time dragging things around in the layers palette. (Because you're organizing all your layers into nice neat folders, right?) If the project you're designing is big, you'll inevitably end up with hundreds of folders and multiple Photoshop documents to keep in sync.

In my constant quest to simplify everyday tasks, I've started creating a "style toolkit" PSD file to go along with each new project. As I create reusable elements, such as a header font treatment or a button style, I drag them right into my toolkit PSD. I keep this document open on my second monitor so I can easily grab things when I need them. If you don't have a second monitor, you can keep it minimized and pull it up when you need it.

Things that go into my toolkit include:

- font treatments (titles, subtitles, body text, etc.)
- buttons
- icons
- form elements
- link styles and colors

Basically, anything you might use more than once or twice should go in this document. That way you don't have to go digging around to find what you need. It's a quick and easy way to make your work more efficient and consistent.

Old way: Find the element in one of my layouts, duplicate it, drag it around the layer palette until I find the right folder to put it in. (Or make an educated guess about something - like a header font size - and hope it's correct. Notice later that things are not exactly consistent. Go back in and standardize it all. Waste more time.)

New way: Grab it from the toolkit and drag it right where I want it. Know that it's right.

It's a really small thing, but it saves me tons of time.

Anyone else have a similar tip they would like to share?