Responsive web design

What is PSD to HTML?

In general, “PSD to HTML” is a workflow. First, a web page is designed in a Photoshop Document (PSD) and then converted to code (using HTML, CSS, and JavaScript). You could swap Photoshop with any other image editor (like Pixelmator, GIMP, and so on), but the principle is the same. Here’s a slightly more detailed step-by-step breakdown:

  • Design a high fidelity pixel-perfect mockup in Photoshop of exactly what you want your site to look like.
  • Use the slice tool to divide your website’s imagery and then export it for the web.
  • Write HTML and CSS that utilizes the imagery you exported from Photoshop.

Taking this idea further, many web companies have used PSD to HTML as a template for team workflows. In other words, a designer creates the Photoshop mockup and then hands it over to a developer that writes all of the code. In modern times, the job role of a web designer tends to encompass aesthetics as well as HTML and CSS coding.