psd to html

Over the past few weeks I’ve had some really nice PSD to HTML and PSD to WordPress projects on the go, and it’s got me thinking that I’d be perfectly comfortable doing this type of project more often. This may not be the most original post in the world but it’s here more as a reminder to me than as a pillar article.

Coding your first PSD

This simple layout is a good place to start learning to slice a PSD. The tutorial is pretty good too. I haven’t followed it yet but it seems well written and looks like it contains all the steps you need. Find it here

Converting a Design From PSD to HTML

Nettuts, who seem to lead the way when it comes to PSD to HTML tutorials, published this excellent article back in December 2008. At the time I was so impressed with the clean design that I stole it for a personal blogging project that has since gone the way of the dodo. Anyway, it’s a great tutorial with an easy-to-follow screencast. Find it here

How to Convert a PSD to XHTML

Jeffrey Way published this tutorial, complete with screencasts, on Nettuts in November 2008. This one is very easy to follow along to and is probably a good place to start if you’re just getting started with PSD slicing. Find it here

PSD to CSS

This one was new to me and I haven’t worked through the tutorial yet. Skimming through it, there’s a lot of detail here, so much so that they’ve split it into 4 parts. Find it here.

From PSD to HTML

I can’t help but think that this article on BolducPress was written purely as link bait, but it does show you how to slice a PSD. The best part is that if you’re a non-designer of too lazy to build a mock-up for slicing, there’s also a PSD to download. Find it here

PSD>HTML/CSS

HV-Designs published this one in mid-2008 and it also contains a PSD for download. Furthermore it actually shows you the Photoshop design process as well if you need to brush up on your design skills. Find it here

Encoding a Photoshop Mockup into XHTML & CSS

When Chris Spooner writes a PSD to HTML tutorial you know it’s going to be good. This one doesn’t disappoint. Chris shows how to convert the Photoshop mock-up he designed in a previous tutorial and code it into valid XHTML in a well written article. Find it here.

Converting a Photoshop mock-up

Chris Coyier from CSS-tricks has a nice screencast showing how to slice a PSD. It’s split into 3 bitesize chunks and includes all the source files for download. Find it here

Creating a CSS layout from scratch

I think this was probably the first PSD to HTML/CSS article I ever read. It goes through the entire process perfectly but there’s no PSD to work from so you’ll either have to design your own or grab the screenshot they’ve used to follow along. Find it here

Build a Sleek Portfolio Site from Scratch

Yet another Nettuts tutorial on the subject. This one has an accompanying tutorial over at PSDTuts to create the mock-up so it really does have everything you could possibly need. If you’re a Tuts+ member you also get to download the PSD and source files. Find it here.

There you have it. If you can complete these 10 tutorials you’ll be well on the way to slicing your own designs in no time at all. I’ll have a follow-up post on the far more interesting PSD to WordPress process in a few days.