Photoshop Etiquette

A Guide to Discernible Web Design in Photoshop

Get Started

Files

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?

Consolidate Your PSDs

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.

Try This
Not This

Name Files Appropriately

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.

Try This
Not This

Store Assets Relative to PSD

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.

Try This
Not This

Make a template for UI elements

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.

Try This
Not This

Files on Server/Share

“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.

Try This
Not This

Always Organize Your Files

Layers

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!

Name Layers & Be Accurate

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.

Try This
Not This

Use Folders

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.

Try This
Not This

Delete Unnecessary Layers

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.

Try This
Not This

Globalize Common Elements

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.

Try This
Not This

Use Layer Comps/Smart Objects

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.

Try This
Not This

Always Name Your Layers

Images

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.

Don’t Stretch or Flatten Buttons

Best case scenario: keep your shapes vector. Otherwise, keep a copy of the vector before rasterizing.

Try This
Not This

Globalize Masks

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.

Try This
Not This

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!*.

WHY? When you’re consistently off by a pixel, somebody has to go in and align things correctly. Shouldn’t it be you?

Try This
Not This

Use Blending Modes w/ Care

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.

Try This
Not This

Go Non-Destructive

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.

Try This
Not This

Always Stay Flexible

Type

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.

Use Whole Pixel Values

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.

Try This
Not This

Make Licensed Fonts Available

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.

Try This
Not This

Don't Stretch Type

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.

Try This
Not This

Control Your Text Boxes

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.

Try This
Not This

Use Separate Text Boxes

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.

Try This
Not This

Always Be in Control

Effects

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.

Use Color Overlays Appropriately

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.

Try This
Not This

Nail Tileable Images

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.

Try This
Not This

Easy Does It

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.

Try This
Not This

Dither

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.

Try This
Not This

Know Your Strokes

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.

Try This
Not This

Always Think Before Using Effects

Practices

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.

Use a Grid

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.

Try This
Not This

Use Drop Shadows Gracefully

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.

Try This
Not This
  • Pro Tip: Reset the Global Light angle permanently from that horrid 120° to a more usable 90° by going to Layer > Layer Style > Global Light with no documents open.

Use Webfonts

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.

Try This
Not This

Consider Device Width

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.

Try This
Not This

Use Licensed Icons/Photos

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.

Try This
Not This

Always Keep Learning

QA

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.

Proofread

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.

Try This
Not This

Compare against Wireframes

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.

Try This
Not This

Account for all Images

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).

Try This
Not This

Be Familiar w/ Browser Compatibility

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).

Try This
Not This

Be Consistent

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.

Try This
Not This

Always Be Consistently Thorough

Exporting

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.

Save for Web

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.

Try This
Not This

Conserve File Size

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.

Try This
Not This

Name Files for Function

“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.

Try This
Not This

No Unnecessary Space

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.

Try This
Not This

Make a Retina Version

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.

Try This
Not This

Always Take Your Time

©Copyright 2012 Dan Rose / Photoshop Etiquette. All Rights Reserved. Hosted by (mt)
Icons: Lino, Geomicons, & Symbolset