Photoshop CS4 Logo

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 . (Press the C key to cycle through tools grouped with the Crop too.)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 panel.
  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.

Comments (7)
Ratings:0 of 3 people found this helpful
  • jackie oswaldJanuary 5, 2009

    sounds great but i do not have that option on cs4  only has layer, new, layer…

  • Mark Wheeler(Administrator)January 23, 2009

    Like many Photoshop commands, the New Layer-based Slice command is unavailable for the Background layer. Select an upper layer in the Layers panel, and that command will become available in the lower-half of the Layers menu.

  • Zeno Bokor(Moderator)April 4, 2009

    For information about changing the keyboard shortcuts check out this page:
    http://help.adobe.com/en_US/Photoshop/11.0/WSfd1234e1c4b69f30ea53e41001031ab64-76b7a.html

  • star4dayNovember 8, 2009

    Did not find this helpfulWhile this gets me one step down the road, it doesn’t tell me anything about how to set the state of the slice (over, down) as this option doesn’t appear in slice options.  Could translating from ImageReady be any more complicated?

  • Zeno Bokor(Moderator)November 9, 2009

    It doesn’t tell you that because Photoshop can’t do it. Photoshop can’t create the actual rollover behavior, only the images needed for the rollover. The easiest way from Photoshop would be to duplicate all the layers that make up the button and move them to the side, slice the button and change it’s appearance. Once you have your two images, use Dreamweaver to add the rollover functionality to them.

    Create a rollover image in Dreamweaver:
    http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WSc78c5058ca073340dcda9110b1f693f21-7cb0a.html

  • taylor2394March 8, 2010

    Did not find this helpfulI have a tutorial book on Photoshop and Dreamweaver integration for web pages, and the book uses Photoshop v.6.0 and ImageReady. I need to know how to find the same options for CS4 that are there for 6.0. I was informed that ImageReady was no longer bundled with Photoshop because all the devices in ImageReady were integrated with CS4, but I can’t find anything but the Save for Web & Devices option. For example, the web content palette in ImageReady, where do I find it on CS4?

  • Zeno Bokor(Moderator)March 9, 2010

    Only some features were added to compensate for the disappearance of ImageReady. Here’s a technote detailing where those features went in CS3 (it should be mostly similar to CS4): http://kb2.adobe.com/cps/400/kb400899.html

===================

Convert auto and layer-based slices to user slices

A layer-based slice is tied to the pixel content of a layer, so the only way to move, combine, divide, resize, and align it is to edit the layer—unless you convert it to a user slice.

All auto slices in an image are linked and share the same optimization settings. If you want to set different optimization settings for an auto slice, you need to promote it to a user slice.

  1. Using the Slice Select tool, select one or more slices to convert.
  2. Click Promote in the options bar.
    You can promote an auto slice in the Save For Web & Devices dialog box by unlinking it. See Work with slices in the Save For Web & Devices dialog box
Advertisements