Anyone know of a good tutorial on how to go from PSD to html/CSS?

There's plenty of tutorials, but if it's a one-off I would just buy a service for about $50.

20+ Best Tutorials to Convert Psd to Html/CSS at DzineBlog.com - Design Blog & Inspiration

There are lot of tutorials but I prefer w3schools.

I did this once for a client and we used the image as a background to the tables and built the text into the tables that way the images showed up underneath and the text on top is editable. Think of it like a see through table laid over the top of your image.

Photoshop has a splice feature so you just cut it up into pieces and save it as html and it builds a table structure for you that when re-assembled creates the image underneath (kind of like a jigsaw puzzle). You can even add paramters to the pieces for example you might want to cut a slice up around a button and make that area a hyperlink so that even though the button image is "under" the table there is a data cell directly over it that is linked so when they click what they think is the button they are actually clicking a clear data cell. It does the same job. If you want to actually fit the images back in on top of the table (like normal) it's a BIG job. Unless you're really into learning Karen's suggestion above is the best (Pay someone).

This is actually an interesting procedure. I'd like to do a webinar it so if you want me to show you how to do it and don't mind others watching send me a PM and we'll set it up. I'm bored today if you're up for it.

Why dont you google it (which is what people replying here would do) and see if there are tutorials there on the internet..

There are hundreds of tutorials out there.

99% of the time I've spent in photoshop has been for fun and my own projects. I'd do it regardless. The offer above is a freebie to help out because I know the frustration.

A good place to start is always NetTuts. Search for "From PSD to HTML: Building a Set of Website Designs Step by Step" and you will find it. I would link it but I can't post links yet.

As Karen Barr said, if you are only doing it once, it would be easiest to just pay someone. There are any number of services that will do it for under $100.

I think slicing an image and using it as background images for transparent cells (the trick is to use transparent cells and lay your text over the top unless it's fancy text - also makes it much harder for the casuals to steal your images because they have to think a bit more to get at it) is only good practice where you have a fancy intricate and beautiful image that is going to be part of your website theme. In this case it's unavoidable unless you want to load one big arse MF slab of an image behind a massive div.

I always keep the PSD in it's sliced format so if I need to make any changes I can remake the table in Photoshop and set the site up again but you are right it's a hassle and if you have any links or comments in your table it will all have to be done again. I have an example url of a nice site I built using this technique. PM or skype me for the url and you'll see it loads fast and looks great. You'll also be able to examine the slices and see how they are built.

I'll second NetTuts and a crash course in CSS. The reason is that PSD layouts can be so different, so it's hard to give a step by step that would work for every project.

That said, your layers can give an indication as to how the HTML/CSS would go.

If you have one image on top of the other, you'd probably set the bottom image in a div, with that image as the background URL, then position the top image normally (using img src="whatever.jpg") and also declare any padding (which would help position the top image) in the main div.

Slicing images and putting them in tables is bad for various reasons, but the biggest is SEO. If it's a main page that you're not trying to really rank, then it could be okay. If it's an internal page with keyword rich text, you'd to MUCH MUCH MUCH better with actual text and optimized images.

Search for W3schools CSS, and you'll be able to start playing around with an editor that will let you see how positioning and all kinds of other things work in a hands on editor that's going to be much more helpful than just watching a video or reading something.

Yes, I agree for the most part and I would always use text where possible of course but I'm talking about complex images that aren't square or rectangular and will fit nicely into an image tag.

There is a way to SEO image tags as well (using alt tags) and having an image as a background for your table won't harm SEO at all. If it did no one would use them and the internet would be full of text again.

I would not suggest using text in images though unless it's unavoidable such as in a headline or banner but slicing images into tables for a highly stylised site is fine. The tables still exist and you will obviously lay the text over the top as usual so your SEO efforts will still be in tact and may even be improved.

Once I laid text over images and the cells had alt tags on the clear.gif plus the text on the cells was also included in the alt tag so it got a double SEO boost.