Photoshop Layout
Photoshop Layout
Overview
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
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
Preview of the Template