30 of the best tutorials on web for converting A PSD to a XHTML & CSS layout. These tutorials you will learn the process on how to create a Photoshop web layout and be able to convert it into a valid XHTML & CSS web page. The tutorials are a step by step process which are easy to follow and keep up with.

1. Create a clean modern website design

Build a complete website design mockup for a fictional design studio, starting with the creation of the initial layout then moving on to designing the individual page elements. The result is a modern, crisp and clean webpage layout ready for coding.

2. Build a Sleek Portfolio Site from Scratch

In this tutorial we’re going to take that PSD file and build it with some nice clean HTML and CSS.

3. Build a Sleek Portfolio Site from Scratch

Takes you through my 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!

4. Converting a photoshop mock up

In this first-ever video podcast, I start the conversion process of an Adobe Photoshop mockup of a website, into a real live CSS based website.

5. Converting a photoshop mock up

In this tutorial you will learn how to create a corporate wordpress styled layout. Also this tutorial contains the PSD which is available for download.

6. Design Lab TV Styled Layout (PSD)

Design Lab TV Styled Layout (HTML & CSS)

In this tutorial you will learn how to make a Design Lab layout for your portfolio by making it look as if your work is being displayed on a TV.

7. Web Design Layout #9 (PSD)

Web Design Layout #9 (XHTML & CSS)

another tutorial by the hv-designs team in this tutorial it will show you how to create a web design layout, currently the 9th one in our tutorial database and also how to code it.

8. Convert PSD to HTML

A great video converting a cool layout from photoshop to XHTML to Css.

9. BLOOpress WordPress Mockup (PSD)

BLOOpress WordPress Mockup (XHTML & CSS)

The tutorial will again be split in to parts like the last one was, only this series will be slightly longer and in-depth, but still your learn a lot from it.

10. How To Build Your Own Single Page Portfolio Website

A great looking portfolio site is crucial for any designer to instantly present their work to potential clients or employers. A simple, single page site can do this effectively by displaying three key features of large header with short introduction, examples of your work and methods of contact all in one, extremely browsable page. Let’s take a look at producing a single page portfolio concept in Photoshop, constructing the page in XHTML/CSS and adding some fancy functionality with jQuery.

11. Design a Beautiful Website From Scratch

Have you ever wanted to design a beautiful website but just didn’t know how? To be honest, a few years ago, that happened to me too. While browsing the web, I saw so many nice looking websites and wished I had the skills to create such designs.

12. Your PROject Pt.1 (PSD)

12. Your PROject Pt.1 (XHTML & CSS)

In this series we’ll be creating a website in photoshop then later on code it into a 5 page template. We’ll also be adding a nice jquery slide effect for our featured content section using JFlow.

13. From PSD to CSS/HTML in Easy Steps – Part 1

This is the first in our 4 part series on how to take a PSD file and convert it into a fully CSS based html page.

14. Create a Vibrant Blog Design in Adobe Photoshop,

Create a Vibrant Blog Design in Adobe Photoshop (XHTML & CSS)

This is the first in our 4 part series on how to take a PSD file and convert it into a fully CSS based html page.

15. Converting a Photoshop Mockup: Part Two, Episode One

There has been LOTS of great feedback on the first series of Converting a Photoshop Mockup into HTML/CSS. So let’s do it again! Every website is different will require different conversion technqiues so there will be plenty to learn this time around that will be different from last time.

16. Converting a Design From PSD to HTML

A very cool detailed tutorial with an awesome out come.

17. Create a Magic Night Themed Web Design from Scratch in Photoshop (PSD)

Create a Magic Night Themed Web Design from Scratch in Photoshop (XHTML & CSS)

A very cool detailed tutorial with an awesome out come.

18. CSS Template Tutorial

What you will be doing in this part is setting everything up to begin coding your template for your website. This tutorial is for slicing a design made in photoshop and coding it in dreamweaver.

19. Tutorial coding a layout

So, you’ve designed your next site but you’re having a little trouble turning your lovely PSD into a coded layout. This tutorial should help you learn how to analyze either a new template, or even your current layout to find the best way to code it.

20. From PSD to HTML

Learn how to slice up your design and then use CSS and HTML to turn it into a powerful web interface.

21. From PSD to HTML

A screen cast that shows you exactly how to convert a PSD into perfect XHTML/CSS.

22. Creating a CSS Layout from scratch

A great tutorial on how to create a CSS Layout from scratch including the photoshop process.

23. Creating a CSS Layout from scratch

A dark photoshop layout to a xhtml/css webpage.

24. Slice and Dice that PSD

In today’s video tutorial, we’ll be slicing up a PSD, dicing it for the web, and serving it on a warm hot plate.

25. The Design Lab: PSD Conversion

A great tutorial which you will learn a lot of photoshop techniques and HTML/CSS tricks.

26. PSD > HTML/CSS

A great tutorial to create a website for a design studio.

27. Portfolio Layout – Learn To Code It

A good photoshop tutorial and even better it shows you how to convert it to XHTML/CSS layout.

28. Coding The Creative Design Layout

Another great tutorial from HV-designs which is worth trying out.

29. Car Sales Layout Tutorial

A simple tutorial with some cool html tricks and tips.

30. PSD to CSS to WordPress

converting a PSD file into a working CSS template ready for when you convert it over to wordpress.