Five Good Habits to Learn for Quality Photoshopping

Getting started with Adobe Photoshop can be a pretty daunting task. Encountering all those pallettes, menus, filters and tools for the first time can be intimidating and downright frustrating.

Recently I realized that come August, I’ll have been working with Photoshop for 10 years (the sound you hear is my own horn tooting). In that time, it’s the one piece of software I’ve used consistently and have developed some rather good (and plenty bad) habits that might come in handy for people firing it up for the first time.

1) Save Every Five Minutes

One thing my very first college instructor drilled into us is to save your files every five minutes. Photoshop is a resource hog, and if you’re like me you’re pushing your computer to it’s limits by having as many applications as possible running at once. If one of these apps decides to freeze things up (or your power goes out or whatever) and you’re forced to reboot, you’re going to loose some work.

Like most people, I learned this the hard way. Many times. Now I hit command + S (shortcut to save) pretty much instinctively as I work. It really doesn’t have to be literally ever five minutes, but get yourself in the habit of doing it often enough that the heart-stopping panic of realizing that little beachball isn’t going to stop spinning without a force-quit (incidental apropos example!) will be followed by relief when you realize you didn’t lose all that much work.

2) Learn the keyboard Shortcuts

Of course you already know the basics, undo/redo, copy/cut/paste et al., but forcing yourself to use the Photoshop shortcuts for the tools and basic functions instead of just clicking on them will save you tons time down the road. Yes, I know what Tog says, but the tool, zoom in/out, and even the color reset shortcuts are so burned into my subconscious that I really don’t even think about it when I use them, it’s become reflex.

This is one habit that will defintely be a struggle at first, but will one day just click and all of the sudden you’ll realize you inversed a selection without using your mouse. And you’ll feel pretty sweet.

3) For The Love of All That is Holy, Name Your Layers

Just like code, nothing is worse than being handed a giant Photoshop file (or opening up one of your own from way back when) with no notes or documentation to make any sense of the thing. First starting out, the bulk of my freelance work was production work, meaning I sliced up and coded designs for other people. And I would say 95% of the designs I was given were haphazard messes of random unnamed/poorly named layers that I had to wade through and clean up just to get started on the coding.

This is a massive pet-peeve of mine, to the point that I obsessively name and organize my layers to the depths of absurdity, and probably why I tend to shy away from production work nowadays like it’s the plague. But you’ll definitely thank me when you need to change something miniscule six months from now and it only takes you a few seconds to find the correct layer(s).

Also, if you’re handing this off to someone else (I always try to hand over copies of my source files upon completion of a project, in the event I get hit by a bus or something), or if someone else will be using your work, it’s downright unprofessional (and rude!) to give them a mess of unused/unnamed layers. Take some pride in your work man! (or woman, of course :))

Which brings us to…

4) Organize and Group Your Layers Semantically

While naming layers is a great start, to really get to wear the Photoshop Expert Cape (I’m not the only one who made one right? Right?) organizing and grouping your layers in an intelligent way is key to producing professional-quality work. And if you’re doing work that is going to be seen/used by other people, you will absolutely bedazzle them with an organized, hierarchal layer pallette. Like I said, nobody else does it! Unless of course you intentionally want to piss them off.

Personally, I use a separate layer for almost every element in my document, and combine them where necessary and after I’ve sliced everything up post-production. While I’m not advocating you take it to the extreme edge that I do, if you want that cape it’s definately better to have too many layers you can clean up later than everything in one super evil Voltron of layers that you can’t edit.

Because I sort of code in my head while designing the layout for a website, I tend to group layers semantically and according to page structure (see image to the left). This makes slicing easier, as I can turn on and off the elements/sections I need to separate from the main document.

This is also great if you want to try out different ideas or variations. For example, if you’ve got a few good ideas for your footer, you can put together a separate group of layers for each version, and toggle them on/off for preview images and/or to quickly compare.

Additionally, I usually use layer grouping to keep the main page architecture and second-level architecture in one document. Experiment and see what makes sense to you. It’s worth the effort.

5) Use Guides and Magnification for Pixel Precision

While you probably already have Snap To: Guides/Grid turned on (under the View dropdown), you should be aware (or maybe have already found out) that this does not guarantee perfect measurements. And while it’s fine for quick wireframing and mock-ups, this could cause you trouble when you start writing code.

For absolute pixel precision, drag your guide to approximately where you need it to be and then zoom in on the ruler to make sure the guide is exactly where it needs to be. Example you say?

Here’s a screencap of a guide used in the Photoshop document I created for this very website:

On the left, the mockup is at 100% with Snap To: Guides/Grid activated. It looks like the guide is positioned at the 300 pixel mark (it snapped!). But taking a closer look on the right (magnified to 700%), you can see it’s actually at 301 pixels, one pixel off.

One or two extra pixels may not seem like that big of a deal, but when you’re working with a certain less-than-stellar browser it could make or break your layout (or at least cause some headaches). And using round numbers is just plain easier in general when working with the box model.

In Conclusion

These habits aren’t necessarily canon, but putting them to use is good practice if you’re just starting out with Photoshop or sharing your documents with other people. Yes, these tips are blatanly biased against Windows users (like you don’t already know to replace “command” with “control”) and slanted towards web development, but all in all they won’t hurt you if you start using them in your workflow.

And they absolutely will help you if someone else has to go back and update your Photoshop masterpiece. Or if you do.

Now taking pre-orders on Photoshop Expert Capes®.