Slicing with PhotoShop and HTML CSS Mockup

Step by step instructions to create your own CSS with PhotoShop and ImageReady.

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. Keyboard shortcut is [ctrl+alt+shift+H].
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/xhtml file which is containing in the source code the css code.

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.