We start outside the Photoshop Document, with some good ol' external file organization. I mean, if you can't get your files organized in a reasonable way, what would anything else that you do inside the PSD matter?
Don't go Ctrl/Cmd+N happy: keep your designs to a minimal number of PSDs.
WHY? Keeping everything in one PSD reduces the confusion of which file to use.
Wait, I'm confused. Should I use “NEWEST.psd” or “LATEST.psd”? How about “Final_v2.psd”?
WHY? Ironically, absolutes like “Newest” and “Latest” are bound to have edits later. It's best to just keep a general file name.
Keep stock photos/icons in a folder close to the PSD, not in a desktop folder named “Misc stuff”.
WHY? PSD inheritors shouldn't have to go hunting to find original assets. Proximity is key to avoiding wasted time.
Help your developer out by making a PSD strictly for user interface treatments (buttons, forms, etc.).
WHY? It's better to have control over how the UI elements look than using browser defaults. You're most likely going to be asked to design them at some point anyways.
“Is it on the server?” Such a simple question. Such a complex answer/excuse.
WHY? Having to be asked where you put a file is common, but it shouldn't be necessary if you learn to put it on a file share before even being asked.
Always Organize Your Files
Arguably the biggest source of angst amongst PSD inheritors, messy and unnamed layers suck the fun out of any situation. If you do nothing else, name your layers!
Be as descriptive as possible on *every* layer. “Layer 0 copy copy” isn't gonna cut it.
WHY? The quintessential piece of etiquette: naming your layers instantly decreases confusion and improves acclimation to an otherwise unfamiliar document.
Grouping layers makes it easy to show/hide various areas quickly.
WHY? Happy layers have happy homes. Folders group like-items for easier navigation and editing.
Are you a layer hoarder? It’s OK to get rid of all the unused layers from your PSD.
WHY? Having too many layers hanging around usually results in an unnecessary bloat of file size and can affect performance.
No reason to have 5 copies of the logo for different layouts. Globalize it on a master layer.
WHY? If you use an element (logo, photo, etc.) in multiple layouts within the PSD, only having to edit it in one place makes a lot of sense.
Layer Comps (Window > Layer Comps) are a great way of showing variations without having to build multiple PSDs.
WHY? Layer Comps & Smart Objects offer a way of showing multiple states or layouts without needing to build (and maintain) another PSD.
Always Name Your Layers
Working with images is all about being non-destructive. You certainly don’t want to limit the shelf life of a photo or button by recklessly adding irreparable filters or effects.
Best case scenario: keep your shapes vector. Otherwise, keep a copy of the vector before rasterizing.
Apply masks to folders instead of using the same mask on individual layers.
WHY? It's always better to only have to edit one mask than multiple masks.
Snap to grid. Snap to pixel. Snap until there’s nothing left to snap to. Beats being off by a pixel *ahh the horror!*.
WHY? When you’re consistently off by a pixel, somebody has to go in and align things correctly. Shouldn’t it be you?
How’d you get that color? Make sure it's not an amalgamation of 2 Overlays, 4 Multiplies and 16 Color Burns.
WHY? It’s difficult to figure out what the hex value of your mashed-up color is. Make it easy.
Use Masks, Smart Objects & Adjustment Layers to avoid forever deleting precious pixels.
WHY? If a silhouette needs retouching, or a logo needs resizing, or you choose to go back to full color photos instead of black and white, it’s much easier when it’s not erased, rasterized or flattened.
Always Stay Flexible
There’s no getting around using type in Photoshop, no matter how dissimilar the text rendering is to what happens in browser. What you can control, however, are the values and areas you use text.
Refrain from resizing text with the Free Transform tool. Give it a whole number value instead.
WHY? Consistency in your typesetting is key. It rarely makes sense to use fractions and decimals in Photoshop.
Play fair and play legal: make the fonts you've used available, and make sure they're licensed to be shared.
WHY? There's nothing worse than needing to edit type and not being able to because you don’t have the fonts.
Besides looking awful, there’s no easy way to do it via HTML/CSS.
WHY? Beyond not being able to do it programmatically, I doubt the typographer intended for their type to be squished or stretched.
Nice to see you using text-boxes. Just don’t make them 5 miles longer than the actual text.
WHY? Longer-than-necessary text boxes can prohibit selecting text that’s behind it and can be frustrating to work around.
Heading? Gets its own text box. Set of paragraphs? Gets their own text box.
WHY? It takes more clicks to find the font family and size of multiple types of text within one text box than it does to do so on an individualized, singular text box.
Always Be in Control
A plea: please use effects and filters in moderation. PSD inheritors will have less to sort through, and in most cases, more filters ≠ better design.
Let’s take this cerulean rectangle and make it mauve with a color overlay. WHYYYYYYY?!
WHY? It’s much easier to navigate the layer panel with color thumbnails that represent the color of the elements on the canvas.
If it’s not easy to make a repeating JPEG of a patterned background, you probably should steer clear.
WHY? A slightly-off repeating image is incredibly noticeable. It’s worth the time to get it right.
No bonus points for the amount of effects used.
WHY? Without knowing how an image translates to CSS, you could be greatly limiting its use by loading it up with effects.
Is that supposed to be a gradient or 32 slightly different stripes?
WHY? Gradients are meant to be smooth, and like everything else, it’s better to get it right the first time.
Inside strokes give you nice, square corners. Center and Outside strokes give you rounded ones.
WHY? Using outside strokes when you really meant to use inside strokes could affect the overall width of a shape.
Always Think Before Using Effects
Not that any of the following guidelines will automagically make you a better designer, but they'll help your approach to working in Photoshop for certain. Just five of the many considerations you can be making.
Nice try. You can't “break the grid” if you don't have said grid.
WHY? Grids help guide (pun intended). Establishing a system of heights, widths and alignment for your design is essential.
If you can notice a drop shadow, chances are it's too heavy.
WHY? Drop shadows, like other effects, need to be altered from the Photoshop default settings in order to look realistic or sophisticated.
Don’t leave it up to a developer to find an “alternative” to non-webfonts. Use a webfont from the get-go.
WHY? Besides the amazing selection to choose from, webfonts are the norm. Not the norm? Text as images.
Will your one PSD at 960px cut it? Or do you need a Responsive Workflow?
WHY? It’s best to design with the mindset of how things will adapt to different widths, as opposed to hoping everything plays nice after the fact.
Google Images is *NOT* a resource for stock photography. Examine use agreements before using icons and the like.
WHY? Don’t risk getting caught using unauthorized photos or icons. People worked hard to produce nice things for us. We simply need to fork over a few bucks.
Always Keep Learning
Ever hear of the term “being too close to a design”? While knee-deep in pixels, it’s easy to miss some glaring mistakes. Employ some quality assurance.
Get someone else’s eyes on your comp before it goes out to eyes who will undoubtedly find your grammatical mistakes.
WHY? It’s easy for a designer to overlook things like misspelled headlines when you're focused on individual pixels.
Client: “Where'd my logo go?” You: “Oh, so you wanted that to stay?” = compromised expectations = no-no.
WHY? It’s easy to go in to auto-pilot when you’re in Photoshop. Just make sure you’re not forgetting anything that was originally agreed upon in the wireframes.
A website using watermarked stock photos is like leaving the tag on a shirt you just bought.
WHY? The embarrassment. Oh, the embarrassment (plus it's illegal).
Knowing browser limitations should come standard with the “Web Design 101” package.
WHY? Browsers each render content differently, but more importantly, there are some that don’t take advantage of CSS3, or basic PNG transparency (ahem, IE6).
Are you unintentionally using 3 slightly different blues? Is your red the same one as their logo?
WHY? Unless intentional, it’s painstaking to have to eyedrop 10 different blues all trying to be the same value, but aren’t.
Always Be Consistently Thorough
One thing’s for certain: if your job is to export images from your PSD, it’s something you only want to have to do once. Don’t overlook this step in the process.
Simply choosing ’Save As > JPEG’ will get you bigger files, color issues and a world of hurt from your dev.
WHY? Save for Web (& Devices) is geared towards properly compressing your image to be used on the web. “Save As” is not.
Go old school: negotiate quality/colors used to make smaller files. Yep, it's still relevant.
WHY? With your images being delivered over all kinds of networks to all kinds of devices, proper compression and small file sizes are incredibly important.
“blue_square3.jpg” doesn't give the developer much indication where it should go. Except the trash.
WHY? This goes along with “Name Files Appropriately”, since the goal is to be as clear as possible with what the file is, as simply as possible.
No need to build in extra margin or padding for layout purposes. That's what CSS is for.
WHY? CSS excels at being easy to adjust positioning. Photoshop's workflow (Open --> Nudge --> Save for Web)? Not so much.
When possible, make sure you've got those fancy hi-dpi screens covered.
WHY? iOS devices are almost exclusively “Retina”. More devices are sure to follow.
Always Take Your Time
