13 Tutorials for PSD to XHTML Conversion

Many have asked for the tutorials on psdvibe to have a coding tutorial for each layout I create. Eventually this will happen, but until then I thought i’d compile a list of 13 great tutorials that are already available out there for you to us.


Matthew Heidenreich




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

You can always count on NETTUTS and the Evanto network to supply you with high quality tutorials. This is a great tutorial for beginners and intermediate learners alike to advance there coding skills. Be sure to set aside a few hours, this walks you through the entire process of creating the design. From PSD, to HTML, and then to WordPress.

Build a Sleek Portfolio Site

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.



A site I have visited for a few years is hv-designs. They have some great tutorials there, 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

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.

Design Lab PSD Conversion

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.

Convert PSD to xHTML

Convert PSD to HTML - Deviantart

This one is a little bit different because I found it on Deviantart. It’s great because it allows you to download the tutorial and view it whenever you like. It will come in handy if your ever in an area without internet access and want to pull up the guide where you are.

Screencast - Coverting PSD to XHTML

ScreenCast: Converting a Design from PSD to XHTML

Another 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.

Coding the Creative Studio Layout

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.

PSD to CSS in Easy Steps

From PSD to CSS/HTML in Easy Steps

This tutorial is 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.

Converting a Photoshop Mockup

ScreenCast: Converting a Photoshop Mockup

I myself enjoy a good written tutorial, but I do realize everyone is different and I wanted to throw in another great screencast. In this 3 Part series 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, like the last tutorial in the list I thought i’d share with you this great 3 Part tutorial. Oh yeah, there is a 4th part entitled ‘Kicking IE’s Butt’ which is one of the most useful things to know how to accomplish.

Coding a Layout

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 and I wouldn’t recommend beginners trying to follow.

Portfolio Layout Coding

Simple and Clean Portfolio Layout Coding

Last, but certainly not least is another tutorial done by hv-designs. They do a nice job describing how to code a simple portfolio layout that they teach you to design in a previous tutorial.

If you have any favorite web design tutorials that we did not mention, be sure to let us know in the comments.

Show Some Love
Thank you for your support

11 Responses

Leave a Comment

Name (required)

Mail (required)