Photoshop image slices saved as Web page HTML (div+css layout) method

First, make the image slice (take an image as an example)

First, select the Slice tool and drag on the image to split the image (for example: An image is cut 2 times to form 3 slices)

After slicing as

Second, set slicing options (such as size, target link, picture description, etc.): Select the Slice Selection tool, double-click on the image slice you want to set, and in the Panel that pops up ():

Third, storage slices for Web pages:
Files--Saved as web and device formats

Generally choose the GIF picture format, the background color of the edge of the picture is set to "None", click "Save"

Then, save the type "HTML and images". If you want to save as a div+css layout, set the "other"

The further Settings panel pops up and select slice to generate CSS

In this way, the image slice is saved as a div+css page layout.

Transferred from 163 to the blog

Photoshop image slices saved as Web page HTML (div+css layout) method