Tutorial off PSD to CSS

Hello

Has anyone got a tutorial or know how to convert a psd to xhtml/css?

Thanks

I really don't think this is something that can be taught with a simple tutorial. But if somebody can prove me wrong, by all means...

Honestly, the key to doing this is knowing what CSS can do and what it can't. When I'm designing a mockup in Photoshop, I think about what's going to be CSS and what's going to be image as I'm going.

Once the client approves the mockup, I use the slice tool to designate the image resources, and export them with "save to web". I then set up an HTML file with the layout skeleton and some example content, and use CSSEdit to style it into congruence with the PSD in live time.

This works for me because I have a good idea of exactly what CSS can and can't do, which is something that came with experience. I've never found a really good tutorial on the subject.

Basically, you want as little of the PSD to be image as possible. Look for the following things that you'll need to slice and export:

- Rounded borders/corners
- Images
- Gradients
- Non-web text

These things are easily styled with CSS:

- Straight borders
- Solid background colors
- Most text

Remember that CSS sucks at filling vertical space. If your design has a sidebar that runs all the way down the page, you're going to have to get tricky. Similarly, positioning text in the vertical middle of a navbar is going to be a potential headache (particularly if you're sizing accessibly so that it can be easily resized).

Hope that helps! Good luck finding a good tutorial!

Thanks a lot George that was very helpful!

I know this is a very general question, but how long does it take you roughly to design a layout and code it? Sorry it's quite generally but i'm interested.

Time requirement for me depends a lot on the complexity of the project and how many mockups I go through before the client is happy. For a simpler design where the client only requires tweaks and small changes to the first mockup, probably 5-6 hours from blank canvas to styled HTML (although there's usually more styling for content above that).

If the design is complex (for instance, a number of different pages with fairly major design differences) or if the client goes through a number of different mockups before they're happy, then it's more like 8-12 before I've got a completed HTML template.

There's also time fluctuations based on how inspired I am with a project, how much attention to detail I can afford based on client's budget, whether or not I have to think about designing the site's interface as I go, etc.

Yeah you have to design the template while keeping in mind how you're going to code it.