In general, \u201cPSD to HTML\u201d 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\u2019s a slightly more detailed step-by-step breakdown:<\/p>\n
At first glance, this might seem like a good idea. It can be difficult to start coding if you don\u2019t know what the final result is going to look like, so experimenting in Photoshop first and then \u201cexporting\u201d it to HTML sounds like a granular and sensible process.<\/p>\n
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 \u201cslice\u201d a design into images and then layout in a web page using HTML and CSS.<\/p>\n
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.<\/p>\n
Yes, PSD to HTML workflows used to be one of the best ways to make websites. There\u2019s two big reasons why PSD to HTML\u00a0used<\/em> to make sense.<\/p>\n 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.<\/p>\n Secondly (and perhaps more importantly) the web used to only be available on desktop browsers and wasn\u2019t really<\/em> present on phones and tablets in the way it is today. Designing for one fixed resolution of 1024\u00d7768 used to be totally viable.<\/p>\n For these two reasons, it\u2019s understandable why a designer would look to Photoshop as their primary web design tool. Image assets were needed for a single screen resolution.<\/p>\n When pitted against other areas of art and technology, the web is a relatively young medium and things change fast. I\u2019ve made dozens of websites using some variation of the PSD to HTML mindset and I\u2019m sure many people reading this have done the same, but it\u2019s time to move on. Here are the primary reasons why I believe thinking in terms of PSD to HTML is dead.<\/p>\n First, there are now a myriad of methods for browsing the web. Phones, tablets, desktops, notebooks, televisions, and more. There is no single screen resolution that a designer can target. Taking that idea a few steps further, there\u2019s really no number of screen resolutions that you can safely \u201ctarget\u201d anymore.<\/p>\nWhat\u2019s wrong with PSD to HTML now?<\/h2>\n
Responsive Web Design<\/h3>\n