Slice images for the Web

Use Pixelmator's Slice Tool to divide an image into smaller images and to optimize each part of an image with its own optimization settings. Slicing is useful for website layouts with different elements, such as buttons, logos, layouts with different backgrounds, and other objects.

1. Select the Slice Tool in the Tools palette. 2. Drag over the area where you want to create a slice. **Tip:** To slice a square using the Slice Tool, hold down the Shift key as you drag. To draw a slice from its center, hold down the Option key when you begin to drag.
  1. Select the Slice Tool in the Tools palette.
  2. Drag over the area where you want to create a slice.

    Tip: To slice a square using the Slice Tool, hold down the Shift key as you drag. To draw a slice from its center, hold down the Option key when you begin to drag.

1. Use the Slice Tool to create slices. 2. In the Tool Options bar: #img:"1342186787000.jpg":"SliceOptions.jpg"# **A** - Enter a slice name. **B** - Choose JPEG, PNG, PNG Indexed, GIF from the format pop-up menu. **C** - Specify format options such as quality and matte color for JPEG, transparency color for PNG, or quality of colors and matte color for PNG Indexed and GIF. 3. Click the Export for Web button in the Tool Options bar, or choose Share > Export for Web. The Export dialog appears. 4. Choose where you want to save sliced and optimized images. 6. Click the Save button. **Tip:** To save an optimized slice quickly, drag the slice thumbnail from the Tool Options bar onto your Desktop.
  1. Use the Slice Tool to create slices.
  2. In the Tool Options bar:

img:"1342186787000.jpg":"SliceOptions.jpg"

A - Enter a slice name.

B - Choose JPEG, PNG, PNG Indexed, GIF from the format pop-up menu.

C - Specify format options such as quality and matte color for JPEG, transparency color for PNG, or quality of colors and matte color for PNG Indexed and GIF.

  1. Click the Export for Web button in the Tool Options bar, or choose Share > Export for Web. The Export dialog appears.
  2. Choose where you want to save sliced and optimized images.
  3. Click the Save button.

    Tip: To save an optimized slice quickly, drag the slice thumbnail from the Tool Options bar onto your Desktop.

1. Select the Slice Tool in the Tools palette. 2. Click within a slice. **Tip:** To select more than one hold down the Shift key while selecting slices.
  1. Select the Slice Tool in the Tools palette.
  2. Click within a slice.

    Tip: To select more than one hold down the Shift key while selecting slices.

Position the Slice Tool pointer inside the slice, then drag to move the border. **Tip:** Press the Shift key while moving to restrict movement to a vertical, horizontal, or 45° diagonal line.

Position the Slice Tool pointer inside the slice, then drag to move the border.

Tip: Press the Shift key while moving to restrict movement to a vertical, horizontal, or 45° diagonal line.

Grab a corner, or a side handle of the slice and drag. **Tip:** Press the Shift key while resizing a slice to make a square slice.

Grab a corner, or a side handle of the slice and drag.

Tip: Press the Shift key while resizing a slice to make a square slice.

Sometimes, slices may overlap. In order to reach the underlying slices, you can change their stacking order.

1. Select one or more slices. 2. With the Slice Tool selected, Control-click the selected slices, or click the Action pop-up menu in the Tool Options bar. 3. Choose Bring to Front, Bring Forward, Send Backward or Send to Back from the Slice Tool shortcut menu. **Overlapping:** When slices overlap, the last slice you created is the top slice in the stacking order.
  1. Select one or more slices.
  2. With the Slice Tool selected, Control-click the selected slices, or click the Action pop-up menu in the Tool Options bar.
  3. Choose Bring to Front, Bring Forward, Send Backward or Send to Back from the Slice Tool shortcut menu.

Overlapping: When slices overlap, the last slice you created is the top slice in the stacking order.

When you create a new slice, additional inactive auto slices are generated to account for the remaining areas of the image. You can easily convert the remaining areas of the image to slices.

To convert an inactive slice to an active one: 1. With the Slice Tool selected, Control-click the inactive slice you would like to convert. 2. Choose Promote to Slice from the Slice Tool shortcut menu.

To convert an inactive slice to an active one:

  1. With the Slice Tool selected, Control-click the inactive slice you would like to convert.
  2. Choose Promote to Slice from the Slice Tool shortcut menu.
1. Select one or more slices. 2. With the Slice Tool selected, do one of the following: * Press the Backspace key on your keyboard. * Control-click the slices, and choose Remove Slice from the Slice Tool shortcut menu. When you delete a slice, inactive auto slices are generated automatically to fill the document area. * Click the Action pop-up menu in the Tool Options bar, and select Remove slice.
  1. Select one or more slices.
  2. With the Slice Tool selected, do one of the following:
    • Press the Backspace key on your keyboard.
    • Control-click the slices, and choose Remove Slice from the Slice Tool shortcut menu. When you delete a slice, inactive auto slices are generated automatically to fill the document area.
    • Click the Action pop-up menu in the Tool Options bar, and select Remove slice.
Do one of the following: * With the Slice Tool selected, Control-click the image area to choose Clear Slices from the shortcut menu. * Click the Action pop-up menu in the Tool Options bar to select Clear Slices.

Do one of the following:

  • With the Slice Tool selected, Control-click the image area to choose Clear Slices from the shortcut menu.
  • Click the Action pop-up menu in the Tool Options bar to select Clear Slices.

If you create more than one slice it's a good idea to name your slices.

By default, slices are named Slice 1, Slice 2, Slice 3, etc. It might be useful for you to rename your slices. 1. Select the slice you want to rename. 2. In the Tool Options bar, click on a slice name and type a new name. 3. Press the Return key on your keyboard to confirm the new name.

By default, slices are named Slice 1, Slice 2, Slice 3, etc. It might be useful for you to rename your slices.

  1. Select the slice you want to rename.
  2. In the Tool Options bar, click on a slice name and type a new name.
  3. Press the Return key on your keyboard to confirm the new name.

Sometimes when comparing an optimized image preview with the original image, you may want to hide the slice boundaries.

Do one of the following: * With the Slice tool selected, Control-click the slice to choose Hide Slices from the shortcut menu. * In the Tool Options, click the Action pop-up menu bar to select Hide Slices.

Do one of the following:

  • With the Slice tool selected, Control-click the slice to choose Hide Slices from the shortcut menu.
  • In the Tool Options, click the Action pop-up menu bar to select Hide Slices.
Do one of the following: * With the Slice tool selected, Control-click the image to select Show (or Hide) Optimized Preview. * In the Tool Options bar, click the Action pop-up menu to select Show (or Hide) Optimized Preview.

Do one of the following:

  • With the Slice tool selected, Control-click the image to select Show (or Hide) Optimized Preview.
  • In the Tool Options bar, click the Action pop-up menu to select Show (or Hide) Optimized Preview.

SEE ALSO

Alignment and object spacing guides

The default color of slices (yellow) can be changed if needed. 1. Choose Pixelmator > Preferences. 2. Select the Rulers tab. 3. Click the Slices Color box and use the #article:"93":"text":"Colors palette "# to choose a new color for slices.

The default color of slices (yellow) can be changed if needed.

  1. Choose Pixelmator > Preferences.
  2. Select the Rulers tab.
  3. Click the Slices Color box and use the Colors palette to choose a new color for slices.