Connect with us

HTML + Shop

Tips to make your PSD file html-conversion friendly


Tips to make your PSD file html-conversion friendly

27th September 2017

Organizing your PSD

Create backup of your original approved design file

Remove unnecessary layers

Each unique design needs to have separate psd files (e.g. Home, About, Product Listing)

Remove unnecessary guidelines from file

Only keep the required guidelines which can help the developer understand the structure

Color guide (List of colors used throughout the website), A Color Palette, if possible please provide "Brand Specifications", which includes Logo, Logo-size, color, fonts, etc.

Un-organized PSD file

Organized PSD file

Common Elements

  • Elements such as images need to be in same width and height, e.g. on products page, thumb image and product details page, full view image, multiple product images.
  • All the images used for Homepage, product catalogue, gallery page, etc. needs to be optimized to boost the performance of the website. You can use tools such as Tiny PNG (Online Tool, not only png) etc. For more info please visit > image optimization suggestions.


  • Create navigation states e.g. normal, hover, active in separate folders, to help developer understand and create interactive elements.

Complex layers with blend modes

  • Please merge layer which have blending modes applied, so that elements cannot be alerted accidently while slicing or creating image out of it.
  • Merge layer which don't need further editing which can lessen the clutter.

    Organized Layers

  • Please read through all the layers and names, Use proper naming convention, e.g. "header", "footer", "button:hover", etc.
  • Group the elements together "header", "nav", "middle-content", "footer" etc.
  • Group the Elements which have multiple states e.g. button:hover, icons: active, etc.
  • Folders can have sub folders and layers e.g. header>nav, header>logo, header-image etc.