Sidebar Workshops Web Design Masterclass Part 1:
Working Smarter in Photoshop
Last Tuesday I was in Philadelphia to attend the Sidebar Workshop, “Web Design Masterclass.” Before I tell you how great it was, because it was, let me first say how much easier it is to take a train than it is to board a flight. TSA procedures aside, I’m 6’7” and found there was plenty of leg room on the train. I’m not so lucky on flights, for the record. Tall people, you know what I’m talking about! Best of all, I was lucky enough to have my girlfriend, Laura and our mutual friend, Kati along too. The three of us were being sent by our respective places of work. It’s always great when you have a job that cares about helping to further your skills. Acknowledging my good fortune here. Gracias, places of work.
While I sadly didn’t have time to explore the culinary might of Pat’s or Geno’s, I did have about 9 hours of immersing myself in best practices for Photoshop, taking a PSD comp into code, exploring some sweet, sweet design resources, and brushing-up on best approach for integrating JavaScript. Leading the presentations were (in order):
- Bryan Veloso — User Interface Designer
- Steve Smith — Design & Development
- Dan Rubin — User Experience Design
- Jonathan Snook — Scripting & Development
“Show of hands” Bryan asked, “who here uses Photoshop for Web design?” Everyone in the room except for one guy. As an aside, it was interesting to see the ratio of Fireworks-to-Photoshop. “Philly is a Photoshop town, it seems” noted Jonathan. Either way, Adobe has the lion’s share when it comes to visual design tool profits. As much as I love Photoshop, it’s kind of a resources hog. Well, by default anyway. And that’s where we started.
Stop Waiting For Photoshop!
Before we drew one pixel we began with the preferences. Honestly, I’ve never looked at half the preferences in Photoshop, but I should have. I could have saved myself a lot of aggravation! For instance, the cache.
In Preferences > Performance, History & Cache: optimize your cache levels to “Tall and Thin.” If you’re only working on Web-res graphics and not in 300 dpi, this is more than enough and you’ll see a significant bump-up in Photoshop’s processing time.
Oh! And you know how you get those pesky reminders about maximizing your file compatibility when you’re trying to save your PSD? Yeah, I hate that too. Here’s how to kill those:
In File Handling > File Compatibility set “Maximize PSD and PSB File Compatibility” to “Never.” This stops Photoshop from reminding you about maximizing your files when you try to save.
Those are just two examples of default settings that can be changed. What this really says is that Adobe expects you to change their defaults. Why else would they offer red as the default on a blending-mode color overlay? Seriously, who’s going to use that? The take-away for me was that I need to make Photoshop my own. Its ability to be flexible is understated but if I take the time to experiment and fine-tune, it will help me get better results and most importantly, SAVE TIME.
One more preferences tip that Bryan and the guys shared that really resonated with me… I hate it when I duplicate a layer and Photoshop automatically puts the word “copy” next to it in the layers palette. Here’s how to make it stop (in CS5 only):
In the Layers palette, go to “Panel Options” and deselect “Add ‘copy’ to Copied Layers and Groups.” It’s. That. Easy. Loved this tip!
When Pushing Pixels, Work Smarter Not Harder
Keep your layers lean. As Bryan Veloso pointed out to us, it’s not an uncommon thing for visual designers to have 100+ layers in a project. By using layer blending modes we can cut down on the work and the layer-clutter. Drop-shadows, outer-glows, inner-glows, strokes, etc. can be manipulated so soft edges become hard edges. All of a sudden an inner-shadow becomes a second border on a button. Powerful stuff. Also, play with opacity! Most browsers can handle transparencies, even IE7 — though that’s a filter hack.
Up until the workshop I had been using blending modes for drop-shadows, gradients and 1px strokes, but (and I’m embarrassed to share this) I’d never thought about building more depth than that by manipulating the other attributes.
Work non-destructively. Save yourself from destructive Photoshop tasks by using Smart Objects. With these you can still benefit from filters and use multiple masks.
“Be a DJ — mix the hits.” Some great advice given to me by one of my previous directors was only reinforced by the guys from Sidebar. Dan Rubin mentioned a lot of designers feel the need to be the original artist in their work. I agree with that. Often times I’ve felt the same way, “I need to make that icon” or “gee, it would have been more special if that repeating background had come from me.” Honestly, it doesn’t matter in the long run. Save yourself some time and be a DJ instead of the original artist. There’s lot of talented designers sharing freely, like premiumpixels.com (free tutorials and resources by Orman Clark) or tileabl.es (tile-able backgrounds by Dave McNally). Great resources are out there, it’s just a matter of finding them.
Intermission
Work quickly. Work with accuracy. Work… smart! I was beginning to catch on to the theme for the day but we had only just begun.
Up next… Part 2! We explore taking our Photoshop mockups into code and discover that CSS3 eliminates the need some image-slicing. Also, we “get sassy” with Steve Smith.
