Friday, September 26, 2008

Web Design Using Slices in Photoshop

When you slice an image, the slice divides an image into smaller images that are shown on a web page using CSS layers, or html table. When you divide the image, you can assign different URL links to create page navigation, or your optimization settings are used to optimize each section of image. You export and optimize a sliced image using the save for web & devices option. Photoshop generates the html code or CSS code that you need to show you sliced image by saving each slice as a separate file.

When you work with slices, keep these basics in mind, you can either create a slice by using the slice tool or you can create them using layer based slices. After you create a slice, you can select it using the slice select tool and then resize, align, or move it to other slices. You can set your options for each slice, which include the type, name, and URL in the slice options box. In your save for web and devices is where you find the options for different settings to optimize each slice.

Slices are categorized by their content type, which included auto, image, or no image, and are categorized by the way they are created, user, layer based, or auto. When you create slices with the slice tool, they are called user slices. When you create slices from a layer they are called layer based slices. Once you create a new user slice or layer based slice, extra auto slices are made to fill in for the remaining areas of the image. You could also say that auto slices fill the space in the image that is not defined by user slices or layer based slices. Auto slices are remade every time you add or edit user slices or layer based slices, and you can easily convert auto slices to user slices.

This article is written by Kevin M. Sugrue and is an extract from part of 'The Essentials of Web Layouts in Photoshop' Ebook. For more go to http://www.tutorialhell.com/ebooks

No comments: