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.
At first glance, this might seem like a
good idea. It can be difficult to start coding if you don’t know what the final
result is going to look like, so experimenting in Photoshop first and then
“exporting” it to HTML sounds like a granular and sensible process.
Screenshot of the save for web dialog
window in Photoshop.
In Photoshop, the slices feature in the
save for web dialog used to be an essential tool for designers saving assets
from a PSD. It made it easy to “slice” a design into images and then layout on
a web page using HTML and CSS.
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.
Was PSD to HTML ever a good idea?
Yes, PSD to HTML workflows used to be one
of the best ways to make websites. There are two big reasons why PSD to HTML
used to make sense.
The first reason is for image assets. Before browsers supported all the wonderful
features of modern CSS (drop shadows, rounded corners, gradients, and more) it
was very difficult to create cross-browser effects without the use of images.
Designers would create shadows and rounded corners as images, then clever
coding tricks were used to place the imagery on the page. These assets would
need to be realized no matter what, so creating them at the same time as the high-fidelity
mockup actually saved time.
