Photoshop Layout


Overview

  • It is common for the Visual Design for web pages to executed in Photoshop.
  • This is a 4x scale layout that will allow you to scale images up and down without losing resolution.
  • The template only sets widths. Heights can be variable.
  • Perform all of your layout and image editing in a single file and utilize layers in folders to turn pages on and off.

Exporting Images from the Template

  • When viewing images in the .psd layout, assess them at 25% scale
  • The goal, on export, is to create the smallest file size with acceptable (not perfect) quality.
  • Use the "save for Web" export tool.
  • Save as JPEG: medium quality. Then, assess image quality and increase compression quality incrementally as needed.
  • For flat art and graphics, try PNG8 (or PNG 24 if transparency is needed) . You may get smaller file sizes.
  • Use these image widths upon export (height can vary)
      • 1/4 column: 360 px
      • 1/2 column: 720 px
      • 3/4 column: 1080 px
      • 1/3 column: 480 px
      • 2/3 column: 960 px
      • Full content width: 1440 px
      • Full page width: 1920 px
  • note: any image that will be viewed in a single column width on a tablet vertical viewport should be 720 px


Preview of the Template