How to Slice PSD for HTML

Slicing up a photo in Photoshop can create a beautiful Web page.

If you're not familiar with HTML to build websites, using Adobe Photoshop to turn an image into a Web page may be the solution. A PSD file is a file created by Adobe Photoshop. This photo editor creates the HTML code for you when you slice the PSD file into small portions. Creating a professional website is only as difficult as creating your PSD file in Photoshop.

Print this article

Adobe Photoshop

Instructions

- 1
  
  Open Photoshop and open the PSD graphic you want to slice for your Web page.
- 2
  
  Select the "Slice" tool which is grouped together in the crop option. When you hold the crop tool, you'll see the slice tool.
- 3
  
  Click and hold the left mouse button as you drag the pointer arrow over the area you want to slice. Let go of the mouse button to complete the slice. Repeat this until you have created all the slices you want for your Web page.
- 4
  
  Choose "File" and "Save for Web & Devices," then click "Save." Give your PSD a new file name, select "HTML and Images" under the "Save As Type" to create an HTML page and click "Save."

Tips & Warnings

Optimizing a large image to reduce the file size helps your Web page load faster.
People on dial-up Internet may have a difficult time loading your page made from sliced images.