Published in Blog
on April 6, 2013

In this article, we are going to be walking through how to convert your Photoshop documents (PSD) into HTML (HyperText Markup Language). You may find yourself wanting to do this if you have designed a specific design or layout in Photoshop and now are looking to use it for various web purposes such as newsletters, website design, or sending out attractive electronic mailings.

Slice and dice your web site design into images

The first step when you are going to convert your document into HTML is to slice it into images. The purpose of doing this is to separate each individual graphic in your document into separate images instead of being one entire large image. You may have a header or logo at the top of your document and then want to insert text in the center that you can later easily edit without having to constantly go into Photoshop. Do this through the following steps:

  1. Have your document ready.
  2. Choose the move tool (V) and get your rulers out (Ctrl+R). Click and drag with your mouse on the ruler and pull it down in the spots you want to divide and slice your image in the next step.
  3. Get your slice tool ( C ) and make slices around every separate region you want to be separate. For example, you have social icons you want to be linked to, you have to slice each one separately.
    Code your website template pages with HTML and CSS

After you finish that, you are going to want to code your website template into an HTML file with a separate folder with images. This is easier than it sounds because Photoshop will do most of the work for you.

  1. Go to File, then save for web and devices.
  2. Here you can select each individual region and optimize it for the fastest load time. For example: if you have a simple background, you can set it as a low-quality JPEG or GIF; or if you have a complicated logo or graphic, you can set that as a PNG or high-quality JPEG to get the best results.
  3. Press save and in the format region at the bottom select HTML and Images.
    Cross-browser compatibility testing and code validation

Photoshop will give you a folder with all your images and your HTML coded file. You can use the code by right-clicking the file and using Dreamweaver or Notepad to view the HTML text. There are websites available online that can help you test the compatibility and cross-browser ability with code validation. You can also download all the different browsers and try opening the file in each to see how your site is working.