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 PhotoshopEtiquette.com.

Photoshop Design Etiquette

Files

  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

Layers

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

Images

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

Type

  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

Effects

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

Practices

  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

Exporting

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

Image Source: PhotoshopEtiquette.com


Related Entries