Photoshop

Slice a web page

You can use the slice tool to draw slice lines directly on an image, or design your graphic using layers, and then create slices based on the layers.

Create a slice with the Slice tool

  1. Select the Slice tool . Any existing slices automatically appear in the document window.
  2. Choose a style setting in the options bar:
    Normal
    Determines slice proportions as you drag.

    Fixed Aspect Ratio
    Sets a height-to-width ratio. Enter whole numbers or decimals for the aspect ratio. For example, to create a slice twice as wide as it is high, enter 2 for the width and 1 for the height.

    Fixed Size
    Specifies the slice’s height and width. Enter pixel values in whole numbers.

  3. Drag over the area where you want to create a slice. Shift-drag to constrain the slice to a square. Alt-drag (Windows) or Option-drag (Mac OS) to draw from the center. Use View > Snap To to align a new slice to a guide or another slice in the image. See Move, resize, and snap user slices.

Create slices from guides

  1. Add guides to an image.
  2. Select the Slice tool, and click Slices From Guides in the options bar.

    When you create slices from guides, any existing slices are deleted.

Create a slice from a layer

A layer based slice encompasses all the pixel data in the layer. If you move the layer or edit the layer’s content, the slice area automatically adjusts to include the new pixels.

A layer-based slice is updated when the source layer is modified.

Layer-based slices are less flexible than user slices; however, you can convert (“promote”) a layer-based slice to a user slice. See Convert auto and layer-based slices to user slices.

  1. Select a layer in the Layers palette.
  2. Choose Layer > New Layer Based Slice.
Don’t use a layer-based slice when you plan to move the layer over a large area of the image during an animation, because the slice dimension may exceed a useful size.