Converting Photoshop designs to HTML

Published by | Tuesday, December 11th, 2012

For many designers, the process of designing a website ends with a series of mock-ups that represent how the website should look in a browser. While this is a necessary aspect to web design, it is only part of the design process. Translating the web design to HTML and CSS is as much an art form as it is a technical achievement.

It is my belief that web designers should be responsible for getting their design to the browser. Imagine hiring a print designer to sketch out a design, then provide Adobe Photoshop and Illustrator files to a printer, and expecting the pressmen to do the layout in InDesign. This print workflow is unthinkable. Just as a print designer is responsible for getting the design to the plate, a web designer should be responsible for getting the design to the browser.

While I’m not suggesting designers need to code every page of an entire website on their own, translating the design into HTML and CSS ensures the integrity of the design. Once the design works in a browser, web developers can use that HTML and CSS as a starting point as they implement their responsibilities to the project.

Creating the containers
When evaluating your desired layout, one can imagine the structure, or “containers,” that will be needed to replicate the layout in HTML.

Responsive design strategy illustration

Once the HTML structure is in place, CSS is used to assign style and layout to the structure. The combination of HTML and CSS provides the presentation experience of your website. This process is not too far removed from other design methods, and can be mastered by designers in a few months.

Creating your web graphics
The process for cutting up small graphics from your Photoshop, Illustrator, or Fireworks document is referred to as slicing. Many web graphic tools have a slicing tool, or something similar, which allows you to specify a portion of your canvas as a slice.

Slicing a Photoshop document for the web

Once portions of your design are specified inside of slice regions, exporting your main canvas results in individual web-ready graphics being created based on the pixels contained within the slice regions.

Assigning layout and style with CSS
Cascading Style Sheets (CSS) allow us to give dimension, position, and style to HTML elements on our webpage. CSS is unique in that it accounts for the layout of our page, in addition to typographic style. Another great feature of CSS is the ability to assign images to the background of HTML elements. This gives us a unique opportunity to drive imagery in our design with CSS, instead of HTML. Combine this with CSS3 media queries, and we can change our images, as well as layout, based on the user’s screen size. For more on responsive download and design, see the blog post “Responsive download, not just responsive design”.

If you learn best by doing, my Creating a Responsive Web Design course shows you how to take a design mock-up into HTML and CSS. Learn a start-to-finish process for creating a responsive, CSS-based, backward-compatible HTML5 webpage… all in 91 minutes!

Suggested courses to watch next:
• More courses by Chris Converse
CSS: Core Concepts
CSS: Page Layouts

Share this:Share on Facebook1Tweet about this on Twitter13Share on Google+0Pin on Pinterest1Share on LinkedIn0 - start learning today

Tags: , , , ,

6 Responses to “Converting Photoshop designs to HTML”

  1. David says:

    which course do i have to learn on lynda in order to be able to convert photoshop to html?
    is that what everyone calls ‘cutting?

    • Hi, David-
      The process is usually referred to as ‘slicing’, yes! Alongside Chris’ excellent course linked from this article, I’d also recommend checking out Justin Seeley’s course “Photoshop for Web Design“, as it covers both PSD to HTML workflows as well as the broader process of planning and visually designing a website in Photoshop for conversion (and slicing) to HTML for web delivery. Hope that helps you get started on the right path- enjoy!

  2. Michel says:

    Hi, I have a graphic design for an email newsletter, and I came across this blog while looking for someone who can take that design and turn it into an html newsletter template for me. I gather that designers are expected to do both of these stages, but that is just not the position I find myself in (I am neither a graphic artist nor a coder). How do I go about getting this into html – are there any freelancers or companies who provide such a service? Thanks! Michel

    • Hi, Michel-
      Yes, there are many freelancers and companies that can do this for you- I’d recommend Googling ‘html email service’ to find possible options available in your local area. However we’re a online training company so don’t provide that type of contract service ourselves, but can help you learn how to do it yourself- we have a course on specifically this subject if you’re a member or trial member: “Creating a Responsive HTML Email“. Hope this is helpful!

Leave a Reply