Photoshop Guidelines

Need some guidelines for designing a website intended for our CMS?

  1. Design for the main content (including borders) to be 950px wide or 750px wide. These 2 formats display well in most common IE browsers on a notebook PC. Use a pixel ruler, DPI is irrelevant for the web.
  2. Ensure background is on it's own layer, or provide the image seperately. It should be a flat colour or a tileable wallpaper or gradient.
  3. If you are making graphical menu buttons, create versions with and without text, for both mouseover/active and unselected.
  4. Supply font names, sizes, etc for any fonts used, and font files if possible
  5. Ensure a horizontal slice of your website can be tiled infinitely in a vertical stack. Eg so if the main content column becomes very long that your website will still look nice. Beware using vertical/angled gradients.
  6. Screen resolution is always unknown, so any background image should be quite wide and high. If you are centering your template over a textured background, it is very difficult to line it up. The edges of the content area should be inseparate layers to the background, and should have some opacity. eg imagine that your content area might move a bit to the left of right.
  7. When slicing your template, ignore the background, slice the left/right borders of the content, the menu buttons, the banner, and a thin horizontal slice. 

Index Previous Next