PSD to CSS - an automatic way?

[PolishPaul]

I downloaded a premade template:
http://www.websitetemplates.org/free-templates/White-night.html

Which has a .psd file with guides and layers all set up. I want to change the template a bit and take advantage of the layered .psd file. However when i try to select the images (after stripping down fonts etc) i find that they're off by 1 pixel from the existing .css layout.

Is there a way to auto generate a CSS file from a PSD template? I saw some tutorials but the people generate the CSS manually.

What is the best way to go from mock-up to CSS?

I'm new to this approach and would like if someone could point me in the general direction and/or suggest the best approach.

 

[PixelPusher]

There is an automated builder in PS. It is by no means the best way to go, but you asked so here is how to do it. I am assuming you are running a version in the CS suite. I have CS3, so these steps are based on that version.

After slicing up your psd file (design/layout)...

1. Go to File > Save for Web & Devices
2. Select the type of image compression for your images (png, gif, or jpg)
3. Click > Save
4. A dialog window will popup asking you where to save the files, DONT save yet.
5. Click the Settings drop down menu at the bottom of this window (says Custom by default)
6. Select > Other...
7. A Settings dialog box will popup,
8. Select > HTML from the second drop down box (under the Settings one)
9. Check the Output XHTML checkbox
10. Go back to the second drop down box (the one where you selected HTML)
11. Select > Slices
12. Check the "Generate CSS" radio button
13. Select how you want the CSS (IDs or Classes)
14. Adjust the naming format (optional)
15. Click > OK
16. Select where you want to save all the files (html, css, and images)
17. Click > Save

Whala your done!