Resources: Design & Interactive

Website Layout Template

Overview

  • It is common for the Visual Design for web pages to executed in Photoshop.
  • This template is set up to work with the Wordpress DIVI Builder plugin and theme, but can be used to design sites that will be built using other methods as well.
  • Keep in mind that DIVI Builder can work with any theme, but using it as the built-in plugin within the DIVI theme allows you to start with a blank page.
  • 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.
  • Use only Google Fonts. Most others are not web-compatible.

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

Preview of the Template

Make Your Own Layout File in Another Software:

Create a New Page

  1. Set your layout file image width to 5760 px and image height to 4320px
  2. Set a guide at 0 (horizontal) and 5760 (Horizontal)
  3. Set quarter column guides: 1440, 2880, 4320
  4. Set third guides: 1920, 3840
  5. Lastly Increase canvas to 7680 (this will provide a wide area for full screen headers and other elements)

Set Up the Color

  • Mode: RGB
  • Settings: sRGB IEC61966-2.1 (Gray Gamma 2.1
  • Proof Set Up: Internet Standard RGB (sRGB)