Slicing the Image

First, I opened the file in Photoshop and selected the slice tool. Then I used the guide lines to divide the page into sections. Then I used the slices from guides option to turn the sections into slices. For slices that were meant to be one piece, I clicked on a slice and then held shift while I selected the other slices. Then I right-clicked and combined slices.

Saving the Sliced Image

I used Save for Web and Devices and then selected different slices, testing the best GIF, JPEG, or PNG format for each. I then saved under format:HTML and Images, custom:other, and All Slices. Under HTML I kept Output:XHTML and switched to UTF-8. Then under Slices I switched to Generate CSS, referenced by ID. Then I hit OK and save.

Using the CSS Slices

From the resulting HTML and folder of Images, I mostly just used the images and referenced the HTML for size info. I created my own divs on this page and wrote HTML and CSS to properly place the images.

Tri-C homepage search home about Tri-C campus visit my Tri-C space