HTML - Saving a Sliced Image as CSS

Image slicing is a technique for creating a web page in Photoshop. Once you have created an image in Photoshop, it can be "sliced" up then saved as a table, or in this case as CSS which is the preferred method. By following these simple steps, you can create a web site in a short period of time, and once everything is saved, you can make any necessary tweaks to make your site attractive.

STEPS

• Using the rulers, pull down guides from the top and left to the areas in which you want to be sliced.
• Using the slice tool, combine slices by selecting the first slice using the command key, then selecting the remaining slices by holding down the shift key. Using the control key select "combine slices". Do this for remaining areas.
• Save your file for Web and Devices and from the dialog box and choose Format: HTML and Images; Slices: All Slices; and Settings: Custom. From the Custom dialog box, choose XHTML and Encoding UTF-8. Change the default setting of Generate Table to Generate CSS by ID.
• Name your folder accordingly and Photoshop will automatically generate an HTML file along with a folder containing all the images from slices.

The above image of the Tri-C homepage was created using slicing images from Photoshop.

Video Tutorials

To learn more on Saving Sliced Images in Photoshop as CSS view the two-part tutorials below:

• Saving a sliced image as CSS with Photoshop CS5 - Pt. 1
• Saving a sliced image as CSS with Photoshop CS5 - Pt. 2