This PSD to HTML article will guide you through the steps of slicing up a PSD layout created in Photoshop. Firstly we begin by analyzing the layout, and after we are over with the slicing part all that is required is to put the cuttings in place. This is an important step before actually converting a PSD to HTML or preparing a layout code. The coding part in PSD to HTML will involve how to bring all the portions all together, in such a way that they are viewable across all the browsers and under all resolutions.

Slicing and preparing a PSD to HTML:

  • Make a replica of the original PSD file to maintain it as a back up .psd file. Spoiling the original file may land you in trouble even for the experts at some times.
  • Press Ctrl+Shift+E. This will merge all the layers or right click to merge all the layers
  • Merging will help us to have a proper slicing of the images else the images can get overlap.
  • We have to identify five major portions of the layout as Navigation, Header, Content, Sidebar Navigation, and Footer, while proceeding for PSD to HTML conversion
  • Let’s start with logo selection first and save it with a separate name. Using the Rectangular Marquee tool selects the logo portion. After this, copy the merged area.
  • Now paste this logo in a newly opened file, dimensions will be automatically inherited after initial selection. Save the file as .jpg image.
  • Now, by using slice tool, we will slice all the required parts of the PSD file and save each of these with their respected names. Now we are done with slicing part and have saved the images to a separate folder “Images”. Finally, we can proceed to next step- Convert PSD to HTML.

TIP: It is important to save the files in a separate folder as it could be quite confusing when searching for the images or .jpg files here and there, if placed randomly.

Here you can find more PSD to HTML tutorials