Search this site
Embedded Files
Skip to main content
Skip to navigation
Overview
The Profession
Creating Google sites
Examples
Responsive Design Demo
Photoshop Layout
Accessible Design
Quick Exercise
Process Steps
1. UX Design
2. UI Design
3. Visual Design
4. Development
Case Study
Photoshop Layout
Download the .psd Layout Template
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
Google Sites
Report abuse
Google Sites
Report abuse