External File Organization
01 CONSOLIDATE YOUR PSDs
Don't go Ctrl/Cmd+N happy: keep your designs to a minimal number of PSDs.
02 NAME FILES APPROPRIATELY
Wait, I'm confused. Should I use "NEWEST.psd" or "LATEST.psd"? How about"Final_v2.psd"?
03 STORE ALL ASSETS RELATIVE TO PSD
Keep stock photos/icons in a folder close to the PSD, not in a desktop folder named "Misc stuff."
04 MAKE A TEMPLATE FOR UI ELEMENTS
Help your developer out by making a PSD strictly for user interface treatments (buttons, forms, etc.)
05 REMEMBER TO SHARE
"Is it on the server?" Such a simple question. Such a complex answer/excuse.
Internal File Organization
06 NAME LAYERS, AND NAME THEM APPROPRIATELY
Be as descriptive as possible on *every* layer. "Layer 0 copy copy" isn't gonna cut it.
07 USE FOLDERS
Grouping layers makes it easy to show/hide various areas quickly.
08 DELETE UNNECESSARY LAYERS
Are you a layer hoarder? It's cool to get rid of all the unused layers from your PSD.
09 GLOBALIZE COMMON ELEMENTS
No reason to have 5 copies of the logo for different layouts. Globalize it on a master layer.
10 USE LAYER COMPS + SMART OBJECTS
Layer Comps (Window > Layer Comps) are a great way of showing variations without having to build multiple PSDs.
Working with Type
11 USE WHOLE POINT/PIXEL VALUES
Refrain from resizing text with the Free Transform tool and give it a whole number value instead.
12 MAKE LICENSED FONTS AVAILABLE
Play fair and play legal: make the fonts you've used available without having to be contacted, and make sure they're licensed.
13 DON'T STRETCH TYPE
Besides looking awful, there's no easy way to do it via HTML/CSS.
14 UNCHECK "HYPHENATE" IN THE PARAGRAPH PANEL
Though Photoshop text doesn't always equate to browser text, we can meet it halfway by not using hyphens.
15 CONTROL YOUR TEXT-BOXES
Nice to see you using text-boxes. Just don't make them 5 miles longer than the actual text.
Working with Images
16 REDRAW BUTTONS + SHAPES, DON'T STRETCH
Best case scenario: keep your shapes vector. Otherwise, keep a copy of the vector before rasterizing.
17 GLOBALIZE MASKS AS BEST AS POSSIBLE
Mask groups of similar layers instead of the same mask on every layer.
18 KEEP LOGOS AS VECTOR SMART OBJECTS
This helps when resizing is needed. Flattened images can't resize well. OBVIOUSLY.
19 SNAP
Snap to grid. Snap to pixel. Snap until there's nothing left to snap to. Beats being off by a pixel *ahh the horror!*.
20 USE BLENDING MODES WITH CARE
How'd you get that color? Make sure it's not an amalgamation of 2 Overlays, 4 Multiplies and 16 Color Burns.
Working with Filters
21 USE COLOR OVERLAYS APPROPRIATELY
Let's take this cerulean rectangle and make it mauve with a color overlay. WHYYYYYYY?!
22 CONSIDER THE CSS APPLICATION OF A PATTERN OVERLAY
If it's not easy to make a repeating JPEG of a patterned background, you probably should steer clear.
23 CONSIDER EXTENSIBILITY
Repeating backgrounds should be built so they can repeat. Duh.
24 DITHER
Is that supposed to be a gradient or 32 slightly different stripes?
25 KNOW YOUR STROKES
Inside strokes give you nice, square corners. Center and Outside strokes give you rounded ones.
Design Practices
26 USE A GRID
Nice try. You can't "break the grid" if you don't have said grid.
27 USE DROP SHADOWS GRACEFULLY
If you can notice a drop shadow, chances are it's too heavy.
28 KNOW YOUR MEDIUM
It's time to start considering mobile screens, widescreens and absurdly ginormous screens.
29 USE LICENSED ICONS/PHOTOS
Google Images is *NOT* a resource for stock photography. Examine use agreements before using icons and the like.
30 USE WEB FONTS
Don't leave it up to a developer to find an "alternative" to unavailable web fonts. Use a web font from the get-go.
Before Exporting
31 PROOFREAD
Get someone else's eyes on your comp before it goes out to eyes who will undoubtedly find your grammatical mistakes.
32 COMPARE AGAINST WIREFRAMES
Client: "Where'd my logo go?" You: "Oh, so you wanted that to stay?" = compromised expectations = no-no.
33 ACCOUNT FOR ALL IMAGES
A website using watermarked stock photos is like leaving the tag on a shirt you just bought.
34 BE FAMILIAR WITH BROWSER COMPATIBILITY
Knowing browser limitations should come standard with the "Web Design 101" package.
35 CHECK CONSISTENCY
Are you using 3 slightly different blues? Is your red the same one as their logo?
Exporting
36 SAVE FOR WEB & DEVICES
Simply choosing 'Save As > JPEG' will get you bigger files, color issues and a world of hurt from your dev.
37 CHOOSE PROGRESSIVE
Progressive JPEGs will load a low-res version first and progressively sharpen it.
38 BE METICULOUS + CONSERVE FILE SIZE
Go old school: negotiate quality/colors used to make smaller files. Yep, it's still relevant.
39 MONITOR COLOR VS. DOCUMENT PROFILE
Make sure you're exporting in the right color setting to avoid mis-matchy images.
40 NAME FILES FOR FUNCTION
"blue_square3.jpg" doesn't give the developer much indication where it should go. Except the trash.
Place this PSD(s) in a folder less than 2 folders away from the root of the project.