There are several ways to modify the slices. Note that when you create a user-slice based on a layer, the slice automatically adjusts to any subsequent changes that are made to the layer, such as when you add an outer glow layer or drop shadow effect.įigure 5 When guides are added to an image you can click on the Slices from Guides button in the slice tool options to create slices based on guides.
User-slices can be created by dragging with the slice tool in this way, but they can also be based on the layer bounds (choose Layer New Layer Based Slice), or the guides in a Photoshop image by clicking on the Slices From Guides button in the slice tool Options bar. As you add a new user-slice, ‘auto-slices’ will be automatically generated every time you add or edit a user-slice. When you drag with the slice tool inside the document, you are creating what is known as a ‘user-slice’. When you select the slice tool and drag you will notice the first slice (01) is assigned to the entire image. Slicing makes it easy to specify what type of content will appear in a slice and how the image content in a slice shall be optimized.
Web slices download#
You can use image slices in Photoshop to create and design dynamic web page layouts from a layered Photoshop image that will download efficiently and produce HTML output files that can be further edited in a program like Adobe GoLive or Dreamweaver. Different compression or format options can be applied to individual slices such that areas where image detail matters most, less JPEG compression is applied. Note how you can select individual slices (such as the main image) and choose specific image optimization settings.
Web slices update#
This is really handy because it will mean that the slice sections will update in size whenever layer effects such as a drop shadow effect are added or adjusted.įigure 4 Here is how the above ‘sliced’ image would look when viewed in the Save For Web & Devices dialog. You can also create slices based on the Photoshop layers by choosing Layer New Layer Based Slice. You can then optimize individual slices via the Photoshop Save for Web Dialog (see Figure 4). The slice tool Options bar is shown in Figure 1 and the slice select tool Options bar is shown in Figure 2.įigure 2 The slice select tool Options bar.įigure 3 Images can be sliced up in Photoshop using the slice tool. But if the slice numbers are currently hidden and you want to see the slice numbers displayed next to each slice, then go to the Guides, Grid and Slices preferences and check the ‘Show Slice Numbers’ option. The default setting is to show slice numbers.
But note that the Command/Control key lets you toggle between the two tools and as well as this, the slice tool automatically becomes the slice select tool whenever you hover over a user slice, thus allowing you to edit it without having to manually select the slice select tool each time. You can then use the slice select tool to go back and edit the size of each slice afterwards. To slice an image you use the slice tool to drag across an image to manually define a user-slice, and as you create such user-slices, Photoshop automatically generates additional auto-slices that divide up the other areas (as shown in Figure 3). The slice tools in Photoshop are particularly useful for Web designer’s as these allow them to divide an image up into rectangular sections, and the slices can then used in Photoshop to specify how each individual slice will be optimized, what file format a slice area should be saved in and what compression settings should be used.