Published in Blog
on April 6, 2013

In this article, we will 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 website design into images

When you convert your document into HTML, the first step is to slice it into images. The purpose of doing this is to separate each 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 going into Photoshop constantly. 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 to which you want to be linked and slice each one separately.
    Code your website template pages with HTML and CSS

After you finish that, you will 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. You can select each 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. Online websites can help you test compatibility and cross-browser ability with code validation. You can also download all the different browsers and open the file in each to see how your site is working.