If you search around the internet, you will notice that there is no shortage of tutorials when it comes to PSD to HTML conversion. To help you get started, here is a list of some of the most complete PSD to HTML tutorials that will give you a solid background in turning your Photoshop mockups into usable HTML sites.
Design and code your first website in easy to understand steps
Unless you have prior experience in converting PSD to HTML, you are going to have to start somewhere. This tutorial offers a nice starting point for beginners, as it is easy to understand and follow. The final result is nothing extraordinary, but it helps get your feet wet so that you can move on to create more advanced websites once you grasp some basic coding techniques.
The best feature about this tutorial is that it was written for beginners who have never coded a website before. This means that you can jump into the tutorial without having to do a lot of prior research. You're shown how to use Photoshop to create your site's design first. The steps necessary to create every single site element are explained, so all you have to do are follow them exactly. Once that's done, you are shown all of the HTML-related steps, until you finally have a complete website. Plenty of photos are provided as well to make the tutorial easier to understand.
Sometimes it's easier to learn when watching a video. Many tutorials offer screenshots for reference, but that might not be enough for some users, especially beginners. This tutorial discusses PSD to HTML conversion in video form, which helps it stand out from the crowd.
This is actually just the second part of three video tutorials presented by the author. The first part focuses on the creation of the Photoshop mockup, while this second part deals with converting the mockup to HTML/CSS. It begins with the framework and continues with Photoshop file layer organization. You are then shown how to create the necessary elements from the Photoshop document and how to write the appropriate HTML and CSS to close out the process. The video is over an hour long, and there's also a link included to creating the Photoshop mockup if you need to learn how to do that as well.
Minimal and modern layout: PSD to XHTML/CSS conversion
Here's another basic tutorial that teaches you PSD to HTML conversion. It's a good tutorial to use if you already have a PSD mockup that is ready to be converted. If you don't the tutorial also has a link that will show you the necessary steps to crate a PSD mockup. There's plenty of detail plus pictures that will help you learn and execute the conversion process so that you can move on to bigger and better projects in the future.
Here's a basic tutorial that gives you a glimpse into the steps some professionals take when converting their Photoshop designs into CSS and HTML. The tutorial doesn't necessarily show you how to actually make a website. Instead, it teaches you how to make a generic template for a business related website from an existing Photoshop document. Once you are finished, you can take the template and use it as a foundation to create a business website of your own.
While the tutorial is somewhat basic, it's very detailed and lengthy. There are plenty of screenshots to guide you as well through the numerous steps. In the end, you should leave the tutorial with knowledge on how to slice a Photoshop file, file setup, creating the CSS framework, building your layout's foundation, designing and styling generic pages, and designing specific pages.