Create slices

Last updated on Oct 10, 2026

Learn how to use the Slice tool, guides, or layers to divide images into exportable regions for web optimization in Adobe Photoshop on desktop.

Slices divide an image into smaller sections that you can enhance individually or assign different URL links before exporting for the web.

Create slices with the Slice tool

When you create user slices, Photoshop automatically fills uncovered areas with auto slices. User slices have solid borders, while auto slices have dotted borders.

To align slices to guides or other slices, select View > Snap To before drawing.

Select the Slice tool.

In the options bar, select a style from the dropdown:

Normal: Draws freeform slices.
Fixed Aspect Ratio: Constrains proportions.
Fixed Size: Specifies exact pixel dimensions.

Drag across the image area where you want to create a slice.

Note

You can select Shift-drag to constrain the slice to a square or Alt-drag (Windows) or Option-drag (macOS) to draw from the center.

Repeat to create additional slices.

Create slices from guides

Creating slices from guides deletes all existing slices in your document. Save a copy of your file if you need to preserve your current slice configuration.

Select View > Guides > New guide, then Vertical or Horizontal guides that define your desired slice boundaries and select OK.

Select the Slice tool.

Select Slices from Guides in the options bar.

Create slices from layers

Slices created from layers automatically adjust their boundaries when you move or edit the layer, making them useful for dynamic designs. They appear with solid borders and a layer icon badge, and you cannot resize them unless you convert them to user slices.

Avoid using layer-based slices for layers you plan to animate across large areas, as the slice dimensions may become impractically large.

In the Layers panel, select the layer containing the content you want to slice.

Select Layer > New Layer-Based Slice.

After creating slices, you can select them with the Slice Select tool to move, resize, or modify their properties. User slices offer the most flexibility. To display slice boundaries, select View > Show > Slices.

Select File > Export > Save for Web, set export options for each slice, and save the file. Photoshop exports each slice as a separate image file and generates the HTML or CSS needed to display the slices on a web page.

Create stunning images with Photoshop
Edit, retouch, and transform photos with the industry-leading creative tools you know and love.

Open the app

Customize the file format list

Save and open WebP files in Photoshop

Learn

Learn with step-by-step video tutorials and hands-on guidance right in the app.

Community

Join discussions, find answers, learn from experts, and share your knowledge.

Adobe Home

Access your favorite Creative Cloud apps, services, file management, and more.