1. Define site directory and sub-folders.

  • Create the site folder that will include all the files related to the site.
  • Create three sub-folders: Assets (final edited media), Original (original images you start with), Library (PSD files, style files, scripts etc.)

2. Place the images you will use as base for your site under the sub-folder Original

3. Prepare Assets for the Web: Size + Optimization
Save the edited media in the sub-folder Assets.

    • Resizing x Resampling | Photoshop


4. Develop your site template – grid and elements in Photoshop. Save the PSD template under the Library sub-folder. Pay attention to the layers nomenclature and organization.

Resolution for Desktop: 1024 x 768 pixels

Designing for the Web: Resolution and Size



5. Convert the PSD elements and file to HTML + CSS