- Open your file with photoshop.
- Edit the document with Image ready.
- 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.)
- Now your document should contain blue numeroted squares and lines.
- Now you need to specify in image ready the ouput parameters. Keyboard shortcut is [ctrl+alt+shift+H].
- Now you choose the CSS export (inside the File->Outputsettings menu).
- 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).
- This is the last step, you need to save the result, using “Save optimized” (inside the File menu).
If you wan to see/copy/edit the css source code you just need to open the file in your favorite web browser and display the source code.
It's a good practice to check the web page in 3 different browsers [including IE and FireFox] for browser compatibility.