Image slicing methods in Photoshop

Photoshop is a great tool for designing web pages. Converting your designs to a web page involves slicing your design into smaller images. The images can then be reassembled into a web page using HTML and CSS. Photoshop has many ways of slicing your design. Lets take a look at multiple ways of creating slices.

Slices from guides

Slicing from guides is a very quick way of slicing your design into the main sections of a web page. Start by turning the rulers on: View > Rulers, then drag guides below the main sections of your web page design, such as the logo, navigation bar etc (indicated by blue circles below). Select the Slice Tool and then click the Slices From Guides button in the Control panel. Slices will be created between the guides.

Layer based slicing

Layer based slicing is perfect when you want to convert an image in a layer into a sliced image. In the Layers panel select the layer to be converted. Go to Layer > New Layer Based Slice, a new user slice will be created from the image/artwork area in the layer. If the artwork on the layer is resized, the Layer Based Slice will be updated too.

Slice my slice

Creating multiple slices from a single slice is easy, and is a great method for creating a navigation bar.  Select the Slice Tool, and then right-click on a slice and select Divide Slice. To divide the slice below into the 5 slices, I choose: Divide Vertically Into 5 Slices across, evenly spaced.

User slices and auto slices

There are two types of slices: User Slices and Auto Slices. Slices that you have created using the Slice Tool are known as User slices. Photoshop places a numbered blue icon at the top left corner of your slice, and gives it a solid border edge to let you know it’s a User Slice (see below).  Layer based slices are also created by the user, so they have the same visual properties as User slices.

Auto slices are created by Photoshop to help you in the slicing process. Photoshop creates auto slices around user slices. A numbered grey icon at the top left corner of the slice and a dotted border edge lets you know its an Auto Slice (see image above). An Auto Slice can be promoted to a User Slice by clicking on it with the Slice Select Tool and clicking on the Promote button in the Control panel.

One reason for promoting a slice to a User Slice is when you come to saving your sliced images (File > Save for Web), you can choose just to save images created from All User Slices. But both Auto and User slices can be used to slice your design by choosing the All Slices.