As a webdesigner you’re working a lot with photoshop and now you would like to convert your psd (or jpg, png, whatever photoshop can read) files to a valid CSS and (X)HTML document.
Do you know that you can do it using photoshop and image ready and that it will take about 30 seconds ? If you want to know how do it everything is explained step by step with proper screen captures just in case
1-open your file with photoshop
2-Edit the document with Image ready
3-Slice your document using the “Slice” tool, this will allow you to define all the different parts of your web page (for example, the header, the menu etc.)
4-Now your document should contain blue numeroted squares and lines
5-Now you need to specify in image ready the ouput parameters.
6-Now you choose the CSS export (inside the File->Outputsettings menu)
7-Now you have defined your output options you just have to click on OK. (this will validate your settings but won’t create the file yet).
8-This is the last step, you need to save the result, using “Save optimized” (inside the File menu).
And now the work is finished,imageready has just created an “images” folder containing all the sliced images and an html file which is containing in the source code the css code.
If you wanna see/copy/edit the css source code you just need to open the file in your favorite web browser and display the source code.
-Extract of the css code generated by photoshop/imageready:
Everything is ok now you have your css and XHTML file. Of course you might need to edit it by hand to modify and or tweak some part of it.
NOTE: This tutorial was not written by me but permission has been granted for me to use it to earn myself some more points. :P