How to Use a Sliced PSD on a Website

Use Photoshop slices in a Web page.

Web browsers can't load and display Photoshop's native PSD file format. You can, however, use Photoshop's Slice Tool to slice the PSD into separate image files, and then export the PSD to HTML, which is the markup language most designers use to create Web pages. First, you slice up the PSD, and then you use Photoshop's Save for Web & Devices option to assign links to the slices and export the file as HTML.

Things You'll Need

• Adobe Photoshop CS2 or later

Instructions

1. Open the PSD you want to convert to a Web page in Photoshop: Click the "File" menu and choose "Open." This displays the Open dialog box. Navigate to the PSD, select it, and then click the "Open" button.

2. Select the "Slice Tool" in the Tools panel. The Slice Tool is the fifth option in the Tools panel. By default, Photoshop displays the Crop Tool in the fifth position. To switch to the Slice Tool, click and hold the Crop Tool to display the fly out menu, and then choose "Slice Tool."

3. Hold the mouse button and drag out your first slice. For example, you can create slices for the Web page banner, sidebar, footer and menu items. Photoshop creates separate images for each slice and places them in HTML table cells.

4. Slice up the PSD as desired.

5. Click the "File" menu and choose "Save for Web & Devices." This opens the Save for Web & Devices dialog box. From here you can make extensive changes to your HTML layout. To control the file format for a particular slice, for example, select the slice and choose the file type, such as PNG or JPEG, from the second drop-down menu in the right column.

   You can also add links to your slices from this dialog box: Double-click the slice to open the Slice Options dialog box, and type the link in the URL field.

6. Make the desired changes in Save for Web & Devices, and then click "Save." This opens the Save Optimized As dialog box.

7. Click the "Format" drop-down menu and choose "HTML and Images."

8. Click the "Slices" drop-down menu and choose "All Slices."

9. Click the "Save" button. Photoshop exports the slices and creates an HTML page containing links to the slices. You can use the HTML page as is, or copy and paste the HTML code from the page to another HTML Web page.

Tips & Warnings

• When you save the HTML file, Photoshop saves all the slices to a folder named "images." When you upload the HTML page to a Web server, make sure you also upload the images folder. Otherwise, the page will not display properly.

References

• J-Learning: Using Photoshop Slices
• Media College: Photoshop Slice Tool
• YouTube; Slice and Export a Website Layout + HTML: Photoshop Tutorial!; TutVid; December 2007

Resources

• Adobe: Slice Options