We receive a lot of requests from people looking to learn how to code their own designs into HTML / CSS. Typically we point them to one of the following tutorials to get started. We also recommend a number of other sites for refining those techniques, however these PSD to HTML / CSS tutorials are a good place to start.
CSS-Tricks
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. This is pretty rough here folks, I’m sure these will get more focused with time. Please let me have it with criticisms at my contact page.
Chris Coyier, CSS-Tricks.com
Converting a Photoshop Mockup (part 1 of 3)
Welcome, in this tutorial il teach you how to convert my “creative design layout” into a working CSS/HTML valid website. Firstly id do the tutorial on creating the layout or skip it and download the PSD file from the hv-designs shop, if you do my tutorial try and get it as close to my design as possilable, changes you wish to make can be done easily once coded. Right lets begin…
Richard Carpenter, HV-Designs.com
From Photoshop to HTML
Learn how the professionals convert their designs from Photoshop [PSD] to CSS and HTML. I will show you how to make a generic business template from the Photoshop file that is included with this tutorial.
Joshua Bolduc, BolducPress.com
From PSD to HTML, Building a Set of Website Designs Step by Step
Today I’m going to take 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!
Collis Ta’eed, NetTuts
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. Our design sports a neat “Web 2.0″ feel and comes courtesy of Joefrey from ThemeForest.net. Be sure to visit his profile if you have the chance.
Jeffrey Way, NetTuts
Hi, Thanks for the tutorials, I might use and if I get more projects with budgets might farm it out to you, too, keep up the good work. BTW when I try to print your pages as a PDF, it doesn’t show up that well in PDF just FYI…
Thanks! This was JUST what I needed, just at the right time!
Been looking at doing SEO and improving the markup on my site for a long time, so this post has been really helpful. Clear read also, so thank you!