7 Sites and Strategies for Pixel-Perfect Photoshop-to-HTML Conversion

Tara Hornor

It doesn’t matter if your design is destined for a large or small company website, you may find that you are regularly required to prototype a website in Photoshop before actually moving to the design phase. There are lots of benefits to this process. As a designer, you don’t have to edit, cut, save as, upload via FTP, and update the HTML. Instead, you can just make a few changes, save the design, and email the resulting changes to the client.

But for all the early gains that building and quickly iterating a PSD can provide, the back end of the design project can be a real time killer. Taking your PSD design to HTML can be very time intensive. Worse, it may be that your design doesn’t function as a website without major work. (Resist that temptation to just make your design the background…RESIST!)

The following are a few resources to help you get your design from a PSD prototype into functional HTML. With a little planning, you can make it happen and reap all of the benefits of fast design changes without the massive HTML development headache later.

Establish Layout Standards First

Using Chrome’s right-click -> Inspect Element feature helps find layout dimensions quickly.

Even if you get handed a screenshot from a client where they say, “We want our site to look like this,” slow down and establish the layout standards. Stage the site in Photoshop with the proper dimensions first. This will give you a simple way of defining the various elements of the site and organizing your own design process.

Later, when it’s time to break the design into its HTML components, you already know your dimensions and can set up the files much more easily. Even if you’re not the one doing the HTML programming, you can hand a well-organized Photoshop project to someone else. It’s always good to have friends who can do HTML magic in our field!

Professional Firms

Another option for converting your PSD to HTML is going with a professional firm. If you’re a graphic designer that can’t code, this may be your best bet. There are lots of options, but here are two that I recommend at two different price points:

  • PixelCrayons – a premium PSD to HTML conversion company that provides one of the highest quality PSD conversion services on the web.
  • MarkUpBox - a PSD to HTML conversion company for folks on a tight budget; they do an excellent job for those needing a quick conversion for tweaking later.

Using a professional firm can be a huge time saver — just send off the file and it comes back in a day or two, freeing you to focus on other projects. Of course, you pay for the time saved, but it’s totally worth it if you can’t take the time to code the design on your own or are crunched for time.

Templates

Another way to expedite the programming side is to start with a template. Let’s say you usually work with WordPress sites, so you may go find the theme that the client is or will be using and develop the design around the theme files. In this way, you are using the theme as a template for your process. You can name the files properly, have them sized the right way, and organize the images as needed once the design has been approved.

But templates can be as straightforward as a skeleton set of site layouts you are familiar with. You can download tons of free website templates from a number of sites:

These are just a few to get you started. So when a client shows you a ballpark idea of what they’re looking for, find a template and build your design in Photoshop around it. It will save you a load of time later when it’s time to start cutting the design into pieces.

Responsive/Adaptive Design Considerations

Lots of sites are shifting toward responsive web design (RWD) — in short, this is just a way of making the layout of a site adapt to the screen size of the site visitor. Adaptive web design generally means that, in addition to being responsive, the site may incorporate other features using JavaScript and other languages to enhance the experience if the visitor’s browser supports those technologies. But if the browser doesn’t support JavaScript, as an example, then the site gracefully handles delivering the content still.

If your client is going to be using RWD, you need to know this! Your layout is going to change dramatically depending upon the screen size of the visitor. You may have to work with the developer on the front end to discuss how the site will look at various screen widths so you can design accordingly and keep these designs in the approval process.

Software

You can use software that converts a PSD file to HTML. Typically these programs require you to stage your design in Layers within Photoshop and name the Layers according to set specifications. Then you load the PSD into the software, hit “Start”, and go get coffee while the software cuts your design up and creates a site.

There is a steep learning curve to these software packages. Nothing most designers can’t handle. But be aware that there’s no such thing as a piece of software that can automagically replace a web developer when it comes to cutting up a design from a PSD file. It takes staging the design properly to make it work.

The following are just a few examples of software you can review if you’re interested in this approach:

  • SiteGrinder by MediaLab - boasts over 20,000 active websites to have used their software; check out their free trial.
  • PSD to CSS Online - this software requires no downloading; do all of your converting online by uploading your files to this website.

Don’t forget that Photoshop already has some built in tools for exporting layers to images. This is where working with a template can come in handy. In Photoshop, go to “File” > “Scripts” > “Export Layers to Files.”

Select the PNG file format and check the “Trim Layers” box for a simple export feature.

It’s not going to work perfectly every time without a lot of work and you’ll probably have to rename a bunch of files, but it’s a nice workaround in a pinch.

Hand-Coding

If you can handle it yourself, ideally you can hand code your own designs into HTML. There aren’t a lot of designers who can both create a brilliant design and then kick out a perfect rendition in HTML format, but if you can, you should. This guarantees that your design translates exactly how you intended it to from the beginning.

Having set up your design using a template or a well-planned layout is going to make this part of the job a LOT easier. There’s nothing more frustrating than trying to figure out how to get that 317×84 banner to sit just right about the darn sidebar area if you don’t already have the HTML in place.

Converting web designs from PSD to HTML is no easy task, so if you are in doubt with your abilities, play it safe and hire a professional.

How do you go about converting your designs to HTML? Do you have your own process that I didn’t mention?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.madmacreations.com/ Tony MacFarlane

    Having been a web designer for more than 13 years, I can tell anyone who is thinking about designing for the web that comping in Photoshop is the absolutely worst idea you can have as a designer. Any designer who comes to me with a PSD comp in her portfolio is gonna get shown the door.

    Perpetuating the myth that Photoshop is the only way to get “pixel-perfect” designs is highly detrimental to enhancing the designer’s concept of how the web works, and subsequently stymies that artist’s value as a collaborator in any web design project. Please: if you think that Photoshop is a web design tool, then just go ahead & think that a web site is a series of PDF files that should print they way they appear onscreen.

    Design houses that encourage their stable to send clients Photoshop comps are vainly propping up a fear of their own irrelevance. Likewise, design sites that publish tutorials on the misuse of tools only contributes to the designer’s irrelevance in the process of web development.

    I am not saying that Photoshop is not a useful web design tool. On the contrary– but it is an extremely poor substitute for the working prototype. Furthermore, I am not about to delve into the complexity of better workflows: I would encourage the designer who is really (truly) interested in the art of web design to seek out these discussions– and I would certainly encourage DesignFestival to lead some of them.

    • http://nicholasorr.com/ Nicholas Orr

      I like getting PSD’s to convert into HTML, I make sure the designer uses sensible layout dimensions or a grid system.
      I’m able to convert PSD’s pixel perfect to html/css.
      I’m not really sure what your point is Tony. I like working with designers who are great at art, they come up with useful concepts that can then be iterated to be used online. Hmm perhaps you are saying if you claim to be a “web designer” then you ought to know how to produce working html/css. If you don’t know html/css then simply call your self a “digital artist”?

    • dave

      “Any designer who comes to me with a PSD comp in her portfolio is gonna get shown the door.”

      More fool you then!

      “vainly propping up a fear of their own irrelevance”
      You sound like a real snobknow-it-all.

      Photoshop is great for designing and sending ideas to clients. I agree that a prototype is better, but for most people it takes more time to do and in Photoshop it’s dead easy to change things based on client requests. Especially when they are sat next to you in a meeting.

      “I am not about to delve into the complexity of better workflows”
      Good.

    • http://creativecontentexperts.com Tara Hornor

      Thanks for sharing your opinion – I greatly appreciate you pointing out that there are better alternatives for creating a web design. However, like dave points out, there are times when creating a web design in Photoshop is necessary and even at times easier than a prototype.

  • Dennis

    I tend to agree with Tony, the belief that Photoshop is a web design tool and an “industry standard” is false. Sure it is a very useful web designers tool however, and the clue is in the “Photo” part of the name, it’s not THE web design tool. We don’t even use it for creating website graphics – we use graphic design tools such as Illustrator and Xara – scalable vector graphics make far more sense, especially when you need to enlarge the items in question.

  • scarbom

    this would’ve been a great article in 200, but tony is absolutely right. the sooner you get to a prototype the sooner you can look at your site in *all* kinds of devices. no one is making “pixel-perfect” sites in *all* browsers and devices today.

    • scarbom

      *2005

  • Kim

    I continue to be baffled by designers who use programms that require such manual processes to convert to HTML. Fireworks blends the parts you need from PSD and Illustrator – if you NEED to manipulate the image significantly or create a complex, custom design image, PSD is a GREAT tool. However, when creating sites with multiple pages & instances of those pages, sharing assets across them as well as creating master symbol elements is a HUGE time saver. Converting it to code is also part of the package, much easier than PSD & more flexible – although true CSS design takes more work after the fact, at least you have a better starting point to work from.

    My fear is that Adobe will cut off support for it & sunset the product in the next few years. PSD, INDD & Illustrator are simply NOT condusive to creating these kinds of docs IMO.

    • https://plus.google.com/u/0/117883511520701899763?rel=author Tara Hornor

      I completely understand your point…there are much more efficient tools for creating a web page. However, many amateur designers often stick with Photoshop simply because it is the program they use and they do not want to spend time learning a new one.

      Due to helpful comments like yours, though, maybe some will understand that if lots of web designs are in their future, learning a program such as Fireworks will be worth it in the long run. :)