If you’re a Web Designer you should be spending most of your time creating unique and creative designs for your customers. Web designers need to know some aspects of web development to understand what is possible and where the technical limitations are but should code the web pages themselves too?.

Unless you’re a designer/developer multi the process of converting a design into web pages can be really hard and seriously time consuming. Doing it right requires deep knowledge of several technologies and good programming skills. This is especially true when a client requires the pages to be complying with and validating against most of specifications and standards available. In this situation there are different options you may choose from. First of all you can consider not to do it yourself and get some professional help. Obviously this has a cost but you may be spending your own time on productive work in stead of struggling with stuff you’re not comfortable with. You may consider to team up with a skilled programmer or try one of the companies specializing in slicing up a web design. If you on the other hand decide to do it yourself you should get some help anyway. In this situation tutorials and online tools comes in handy. This article first provides a list of PSD to HTML/CSS Service Providers and then a list of tutorials and tools in case you’re working all by yourself. If you need inspiration and help on creating web design that may not be too hard to slice up your should take a look at this article: 80+ Photoshop Tutorials: Practical Web Interface Design



PSD to HTML Services


Convert your designs from various common image formats (PSD, JPG, GIF, PNG, AI) into hand coded cross-browser compatible W3C validated XHTML / CSS markup.


xhtml.pixelcrayons.com have 2 packages available but they are open for customizing packages to customer needs. They offer 50% discount on additional pages. Turnaround time is great / first page will be delivered within 8 hours. In addition to traditional slicing this company offer implementation of themes to most popular CMS systems at an additional cost.

Basic Package ($100)
Markups: HTML 4.01 Transitional, XHTML 1.0 Transitional
W3C Validation: CSS, XHTML & HTML
Browsers Compatibility: I.E 6.x / 7.x, Mozilla Firefox, Safari
Professional Package ($200)

Markups: HTML 4.01 Transitional, HTML 4.01 Strict, XHTML 1.0 Transitional, XHTML 1.0 Strict
W3C Validation: CSS2 (Advanced CSS Code Structure), XHTML & HTML
Browsers Compatibility: I.E 6.x/ 7.x/ 8.x, Mozilla Firefox, Safari 2.x/ 3.x, Opera 9.x, Konqueror, Google Chrome
Includes: SEO Semantic Code, Load Speed Optimization, Complete Presentation Separation, Maximum Cross-Browser Compatibility

PSD2CSS Online

This is a free online tool for converting PSD files into XHTML. Upload your file and it will produce the code.


The site will almost certainly not appeal to veteran designers as nothing beats the work of an artist. Make sure that you take time to read the privacy policy on the site before uploading your designs.


Deliver cross-browser compatible W3C Valid XHTML / CSS markup based on PSD, PNG, AI, and even existing markup as source files.


PSD2HTML offer 2 packages. Each unique additional page is discounted by 50%. Turnaround time is good / first page will be delivered within 8 hours. In addition to traditional slicing this company offer implementation of themes to most popular CMS systems at an additional cost.
Professional Package $159
W3C Valid XHTML 1.0 Transitional Table-less CSS markup. Compatible with IE, Firefox, Opera and Safari with W3C Valid Shorthand and Optimized CSS.

Hi-End Package $217
The highest level markup available. W3C Valid XHTML 1.0 Strict Table-less CSS markup under SEO Semantic Coding, Complete Presentational Separation techniques. Special attention to Load Speed optimization.


htmlBlender provides coding services in XHTML & CSS with fast delivery times on hand coded markup with cross browser compatibility. Coding options include table or table-less design, SEO semantic coding, script integration and more. Compliance options range from W3C Valid HTML 4.01 to W3C Valid XHTML 1.0 strict.

Turnaround – 8 hours

Price – $95 (table) $149 (table-less)



This service is a bit different as it offers a significant discount if you’re not in a hurry.

Turnaround – 1 day and up (short for higher price)
Starting price – $54
Additional pages – $54 (depends on # of pages and turnaround)



Same concept as Lemberg where discount is offered if the time for delivery is longer.

Turnaround – 1 day (for higher price)
Starting price – $169
Additional pages – $127 (depends on # of pages and turnaround)


CSS Rockstars

Turnaround – 3 Days
Starting price – $149
Additional pages – $79


In addition to traditional slicing this company offer implementation of themes to most popular CMS systems at an additional cost.

Slice ‘n Dice

Turnaround – 1 business day (for higher price)
Starting price – $199 (6 days turnaround)
Additional pages – $150


In addition to traditional slicing this company offer implementation of themes to most popular CMS systems at an additional cost.


Turnaround – 2-3 days (4 hour at higher cost)
Starting price – $99

More slicing companies that you may want to investigate. If your company is not listed or if important information is not listed in the article please let me know by submitting a comment or dropping a mail to mail[at]tripwiremagazine[dot]com.

Turbo HTML

PSD Slicer




xHTML Coding

PSD Converter


Design 2 Markup

Finely Sliced




Charm HTML




XHTML Slicer




The Choppr



Simon’s Portfolio

Web Refill


Instant Coding


Tutorials for Converting PSD to HTML, CSS…Website template

From PSD to HTML, Building a Set of Website Designs Step by Step

This tutorial is going to take you through a entire process of getting from Photoshop to completed HTML. We’re going to build out a set of 4 PSD mockups of a website that eventually will become a WordPress theme. It’s a massive tutorial, so if you’re going to follow through to the end, make sure you have a few hours to spare!


Build a Sleek Portfolio Site from Scratch

With PSDTUTS providing a great file to start off with, NETTUTS delivers yet another great tutorial on coverting a PSD to HTML for your own Portfolio website design.


Encoding a Photoshop Mockup into XHTML & CSS

Continuing from a recent tutorial, Create a Vibrant Blog Design in Adobe Photoshop, we’ll now look at taking the concept and implementing it into an actual webpage constructed in xhtml and css. By exporting the imagery from Photoshop and coding up the page we’ll produce a working example of the overall blog design.



hv-designs provide some really great tutorials and this is just another one of them you should take the time to check out. They do an excellent job showing you all the little details in coding up the HawkStudio Designs template.


From PSD to HTML Guide : Part Digital

This doesn’t provide you with one of the prettier results, but they do a great job explaining the whole processing of coding. Including a detailed process of how to slice the template.


The Design Lab: PSD Conversion

First they provide you with an excellent tutorial on creating a design lab layout. Then they take it to the next step and give you a step by step directions on how to convert your newly created PSD into a fully functional web design.


Coding The Creative Design Layout

HvDesigns provided a nice and simple tutorial on creating a design studio layout and they backed it up by offering a simple tutorial on how to code it for the web. They are sure to leave no detail untouched, while providing great results.


The best Tutorials on Converting PSD to XHTML

In this post, I’m going to show you the most practical tutorials on coding a template using CSS and XHTML. Making a template has two steps. The first step is Designing the template components and the second step is Coding them into a valid XHTML page.


Creating a CSS Layout from Scratch

This tutorial from Subcide starts with a basic design and takes us through the steps of coding the site. Along the way there are plenty of code samples and screenshots as the example site progresses.


Slice a Template and Code it Using CSS

This tutorial is going to show you how to take a template (not create it) and slice it up in Photoshop and code it in complete CSS.


How To Create a Horizontally Scrolling Site

If web pages were made out of wood, the grain would be running up and down. Vertical is the natural flow of web layout. When page elements reach the right edge of the browser window and go over, the flow defaults to “wrapping” that element down onto the next line. The more content on the page, the taller it gets, not the wider. Why is this? Because it just makes sense. Our eyes are used to reading fairly short lines of text, so if we were to see a paragraph of text in one long straight line, it would be painful to read. Paragraphs need to have line breaks in them to be readable (hence the term “blocks” of text). We sure as heck don’t want to hard-code line breaks into the markup ourselves. Obviously, we don’t have to, the browser does this wrapping for us. Thus the vertical expansion.


Coding Your 1st PSD Tutorial

HV Designs previously published a tutorial for creating a car sales layout in Photoshop, and this tutorial is a follow up to cover the process of coding the site. It’s a fairly detailed tutorial with the coding provided.


From PSD to HTML – How to turn your designs into usable web interfaces

Part Digital Design gives us another detailed tutorial for coding a site from a Photoshop file. This tutorial is very detailed, from slicing the interface to the coding.


From PSD to CSS/HTML in Easy Steps

This tutorial will show you in detail on how to make a very basic, and nature friendly layout come to life by coding it into a fully functional CSS theme.


Coding a Layout with XHTML and CSS

This is a tutorial done by erracticwisdom. They do a good job explaining the tutorial, but its forwarded more towards users with a little more experience.


Simple and Clean Portfolio Layout Coding

This is a great tutorial done by hv-designs describing how to code a simple portfolio layout.


Photoshop PSD to HTML – Video Tutorials

If you prefer sitting back and just watch others do the tricks the tutorials presented in this section will suit your needs. Learning how to slice website designs into pieces and convering to HTML is much easier when all the step and tricks are shown on video!

ScreenCast: Converting a Design from PSD to XHTML

Great tutorial provided by NETTUTS. There is an original written tutorial, but this screencast does a great job of explaining all the steps in designing a simple, but beautiful layout. If you prefer to work at your own pace though, the written tutorial comes in handy.


ScreenCast: Converting a Photoshop Mockup

In this 3 Part screencast tutorial you learn how to take your design from Photoshop to your browse in no time.


ScreenCast: How to Convert a PSD to XHTML

Keeping with the theme of screencast this is a great 4 Part tutorial worth a try.


This tutorial consists of the follwing parts.

  • Part 1: Slicing the PSD and Creating the XHTML
  • Part 2: CSS
  • Part 3: Implementing a Bit of Javascript
  • Part 4: Kicking IE6’s Butt

Slice and Dice That PSD!

Recently posted on NETTUTS, this tutorial goes all out with a screencast and written code. The tutorial also utilizes a wonderfully simple design by Joefrey of ThemeForest.


PSD HTML Slicing Tutorial

Here you find two really great and detailed video tutorials.


Pin It on Pinterest

Share This

Share This

Share this post with your friends!