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?
I just recently added the 960.gs grid layout that comes with the bundle when you download the grid at http//960.gs.
It has a .psd and .png file that are right on track with what you are talking about.
Wow, don’t know why I haven’t thought of this. It’s a “oh yeah” kind of thing. Instead of defining the same styles over and over for different projects, just have a go to style sheet.
Will do.
I tend to live in OmniGraffle all day long, and having the stencil palette floating on my second monitor to grab design elements from makes working a joy. And now you’ve got me thinking about building project specific palettes to go along with my standard set of UI bits and bobs. Thanks for the post!
Fireworks has objects that you can reuse multiple times, plus the fact they added in Windows/Mac Form elements to make building forms in mockups much faster too.
I do something similar with my comps in Fireworks. I always have a separate file called “parts.png” where I place non-flattened layers and elements that I decided not to use for the design but may end up using later. If I spent two hours creating a treatment I decided not to use, there’s no reason why it has to end up in the graveyard. I can’t tell you how many times I’ve opened up a parts file and grabbed something for a new project. Talk about time savers.
Keep up the good work.
Interesting - I haven’t used Fireworks in ages.
Zac - Yes the 960 grid system is awesome! I use it as a base for all my projects.
I’m talking print design here, but ...
Believe it or not, one of the last incarnations of Ragemaker ... er, I mean ... Pagemaker, had a nifty little toolbox addition that allowed you to create oft-used page elements and, once stored, one needed only to click and drag them into the layout from the toolbox. But moments later, InDesign arrived.
Hey,
Sorry for asking here, but I’ve just had the chance to read the “Breaking Bad Habits” article, and I was wondering about this sentence:
“As long as you don’t rasterize it you can easily change the color by double-clicking”
Nothing happens when I double-click the vector elements (I expected to see the color picker dialog). Could you please elaborate?
Thanks!
New way - Use InDesign, a layout program, no need to organize layers, you have extra space outside the doc size to have your elements and can use styles for typography, can link to all graphics and keep them in a folder and auto update… life made far simpler* when I switched from PS to ID.
Stephen -
That’s my fault, I should have been clearer. You want to click on the color block for that shape, found in the layer palette.
Eric -
I don’t have InDesign installed currently, but I used it regularly for print design at my last job. I can definitely see how it would speed up text layout/edits for a design. I’ve often wished that Adobe would bring InDesign’s text features (like setting text styles, then changing them across the board when the client decides they hate Verdana and everything must be Arial) into Photoshop. Not sure why they are letting the text editing part of Photoshop lag behind so badly. Maybe so we all buy InDesign too? ;)
To expand on this idea, which I think is great you could save each of these as a smart object in a “objects” folder. I have had great success with this. I wish PS was a little better about auto-updating the objects (I tend to have mixed results) but it makes grabbing a form or button so much quicker, plus when the stakeholder decides that the rounded edge is to round… update the smart object and you are done (unless of course PS misses that and then all you have to do is “place” the correct object again.
David - Great idea, smart objects are definitely handy (if somewhat buggy) and make sweeping changes much easier. I find using them for buttons can be problematic though because you can’t change the text/length for each one. Wish there was a way to designate which part of the object was “smart” (such as the shape and the style applied to it) and which ones were changeable.
That would be outstanding. It would also be great it you could designate that something was a “web smart object” and it could then have a separate layer comp state that allowed you to hover and scroll in PS… that would make designing comps so much faster.
Sounds like we could start a wishlist over at http://www.dearadobe.com/ ;)
Very cool site. Thanks for pointing it out. My counter-part at work used a massive Illustrator file, he calls it his scratch file, and it is always packed with buttons, icons, etc. It can be unnerving looking at it all and trying to figure out which piece to use, but once you get used to it, its like Halloween. Open the scratch file and grab your favorite pieces!
Neat idea - I’ve been doing this for about 3-4 years. If I make a new banner or add a new technique to a file, I just add the layer to the psd then copy that to a new file for the new design. My psd file is getting pretty heavy now. Love all the ideas you guys have - I find it refreshing for an oldie like me to check out what the new generation is doing.
The tool kit is a great idea. Perhaps it would be better still if we started to lean on Adobe to include a ‘Library’ as does InDesign. I find that invaluable.
Next entry: My Typography Talk: Typography is the Foundation of Good Web Design
Previous entry: Photoshop Type Time Savers
Recent Comments
Hi Doug!
I just want to print this article :) But the print version is yet to be fully polished. I hope you guys spend sometime :) Viget inspire is a really nice resource for me....
- Lance on 'What To Expect When You're Expecting CSS/HTML Handoff'.
- Erik Wallace on 'What To Expect When You're Expecting CSS/HTML Handoff'.
- Jonathan on 'Switching Mindsets: From WordPress to ExpressionEngine'.
Subscribe to Comments RSS