How to Slice a PSD in CS4 to HTML

The slice option in Photoshop CS4 easily converts PSD files to HTML.

Coding a Web site or Web file may be a difficult task for designers, but using Adobe Photoshop CS4 to create Web files is an option many designers overlook. An Adobe Photoshop or a PSD file easily can be sliced into an HTML document by those familiar with the program. This enables designers to use the robust Photoshop design software to create beautiful, but properly coded, Web files with ease.

Things You'll Need

• Photoshop CS4

Instructions

1. Open the document you wish to slice in Photoshop CS4.

2. Select the slice tool from your toolbar. The slice tool is in the same group as the crop option. If it is hidden, click and hold down the crop tool to reveal the option.

3. Choose a style setting from the options bar. You have three choices: fixed size, where slice sizes are set by whole numbers; fixed aspect ratio, where height-to-width ratio is predetermined, and normal, where the slice proportions are determined as you drag your cursor to make your slices.

4. Click and drag your cursor over the sections as you want to slice them.

5. Select File and "Save for Web" and in the save window select "HTML & images" for the file output option to create an HTML file of your document once you are done making all of your slices. If you make any changes to your document, you will need to save it again in this manner and completely replace any previous HTML file and the related images.

Tips & Warnings

• Slice your sections by the content displayed in the document. For example, if you have a Photoshop document with text and images, slice the text and images separately and, in the alt descriptions for each slice, add short descriptions of the content.

• Also remember to slice sections according to the links they will have in your final document.

• For Photoshop documents with transparent layers, make sure your image output option is either GIF or PNG.

References

• Adobe Photoshop CS4: Slice a web page