Photoshop Etiquette: Web Design Guide in Photoshop

Photoshop etiquette image

As a designer and developer, I want to share this guide on how to discernible web design in Photoshop. I’ve been using Photoshop Etiquette website as a reference in my web design and front-end development projects. Please see the summary of the etiquette below or visit their awesome website at

Photoshop Design Etiquette


  1. Consolidate your PSDs
  2. Name files appropriately
  3. Store assets relative to PSD
  4. Make a template for UI elements
  5. Files on server / share


  1. Name layers and be accurate
  2. Use folders
  3. Delete unnecessary layers
  4. Globalize common elements
  5. Use layer comps / smart objects


  1. Don’t stretch or flatten buttons
  2. Globalize masks
  3. Snap
  4. Use blending modes with care
  5. Go non-destructive


  1. Use whole pixel values
  2. Make licensed fonts available
  3. Don’t stretch type
  4. Control your text boxes
  5. Use separate text boxes


  1. Use color overlays appropriately
  2. Nail Tileable images
  3. Easy does it
  4. Dither
  5. Know your strokes


  1. Use a grid
  2. Use drop shadows gracefully
  3. Use webfonts
  4. Consider device width
  5. Use licensed icons / photos

Quality Assurance

  1. Proofread
  2. Compare against wireframes
  3. Account all images
  4. Be familiar with browser compatibility
  5. Be consistent


  1. Save for web
  2. Conserve file size
  3. Name files for function
  4. No Unnecessary space
  5. Make a retina version

Image Source:

Related Entries