Exporting Web Graphics from Photoshop
One of the useful features that Phototoshop offers to Web designers is the Slice Tool. With the Slice Tool, it's easy to cut up your Photoshop Web page mock-up into individual pieces that you then place in your HTML document.
Slice Selection and Saving:
1. Select the Slice Tool from Photoshop's tool menu and draw boxes around an individual element that you want to export:
2. Continue doing this until you have created slices for every element you want to export. Do not include text or colored divs since you will create those using HTML, not graphics. (In the example below the content has been lightened so the slices are more visible.)
3. By default, every slice is assigned a number and these numbers are visible in the Photoshop window. If you don't like them, you can turn them off in Photoshop's Preferences menu.
4. Before exporting the slices, select each one with the Slice Select Tool and give it a useful name in the Slice Options Dialogue:
Exporting the slices:
5. Open the Save for Web and Devices... dialogue and select the appropriate file type and amount of compression for each slice:
6. In the Save for Web and Devices... dialogue, hit the Save button and the Save Optimized As dialogue will pop up. At the bottom of the Save Optimized As dialogue, select All User Slices and hit Save again.
Photoshop will save each slice as an individual image in whatever location you selected.
You now have all of the graphic pieces necessary to code the HTML part of the site.
