Top 10 Tutorials for Converting PSDs to HTML/CSS

Many web designers start a new project by designing a mockup in Photoshop before actually coding the website. For a designer who is comfortable with Photoshop and with this process, less time can be used to create the end result.

For those designers who have not mastered the process of converting a design into a fully coded website, these 10 tutorials are excellent learning resources. (For tutorials on creating layouts in Photoshop, see 35 Tutorials for Creating Website Layouts in Photoshop).

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

Collis Ta’eed published a post about five months ago at NETTUTS that takes a very detailed look at the process of coding a site with a PSD file as a starting point. This is a site that Collis designed in Photoshop and the post goes through every step of getting it to the point of being a working site, with all the CSS and HTML coding provided.

Build a Sleek Portfolio Site from Scratch

A few months prior to the previous post, Collis also published this exceptional tutorial. This post was the 2nd part of a series that included a tutorial on PSDTUTS for creating the design in Photoshop. The two posts form one of the most useful sets of tutorials for any aspiring web designer, or other designers who could use some pointers for the process of starting with a design in Photoshop.

Encoding a Photoshop Mockup into XHTML and CSS

Chris Spooner also did a similar two-part series of posts for creating a design in Photoshop and then coding the site with XHTML and CSS. While Collis showed us how to code a portfolio site, Chris focuses his tutorial on blog design.

Tutorial: Coding a Layout

This tutorial from Eratic Wisdom is not nearly as detailed as some of the others on this list, but it does a good job of looking at the process quickly. If you’re interested in going through a shorter tutorial on the subject rather than spending a large chuck of time on all the details, try this one.

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.

How to Convert a PSD to XHTML (screencast)

Following the positive response to Collis’ tutorials listed above, NETTUTS put together 3 screencasts to help make the process a bit easier to follow. For many people, the video tutorial can be more helpful. If this is the case for you, this post can be extremely valuable.

Converting a Photoshop Mockup (screencast)

Chris Coyier of CSS-Tricks put together a three-part series for converting a mockup into a working site. The link goes to the CSS-Tricks video page, scroll down until you see video numbers 12, 13, and 14.

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.

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.

From PSD to CSS/HTML in Easy Steps

This is a four-part tutorial series from CSS How To (Part 1, Part 2, Part 3, Part 4). The multi-part series helps to break it up into chunks that are easier to handle one at a time.

For design and development tutorials please see:

• Create a jQuery Image Rotator with Description
• Easy Display/Style Switch with CSS & jQuery
• jQuery Tutorials for Improved Navigation
• Sticky (Fixed) SideNav Layout with CSS
• 40+ Tutorials for Working with Wacom Tablets