将 Web 页切片

切片类型

Web 页切片

将自动切片和基于图层的切片转换为用户切片

查看切片和切片选项

切片使用 HTML 表或 CSS 图层将图像划分为若干较小的图像，这些图像可在 Web 页上重新组合。通过划分图像，您可以指定不同的 URL 链接以创建页面导航，或使用其自身的优化设置对图像的每个部分进行优化。

可以使用“存储为 Web 和设备所用格式”命令来导出和优化切片图像。Photoshop 将每个切片存储为单独的文件并生成显示切片图像所需的 HTML 或CSS 代码。

将 Web 页划分为若干切片.

在处理切片时，请谨记以下基本要点：

可以通过使用切片工具或创建基于图层的切片来创建切片。
创建切片后，可以使用切片选择工具选择该切片，然后对它进行移动和调整大小，或将它与其它切片对齐。
可以在“切片选项”对话框中为每个切片设置选项，如切片类型、名称和 URL。
可以使用“存储为 Web 和设备所用格式”对话框中的各种优化设置对每个切片进行优化。

切片类型

切片按照其内容类型（表格、图像、无图像）以及创建方式（用户、基于图层、自动）进行分类。

使用切片工具创建的切片称作用户切片；通过图层创建的切片称作基于图层的切片。当您创建新的用户切片或基于图层的切片时，将会生成附加自动切片来占据图像的其余区域。换句话说，自动切片填充图像中用户切片或基于图层的切片未定义的空间。每次添加或编辑用户切片或基于图层的切片时，都会重新生成自动切片。可以将自动切片转换为用户切片。

用户切片、基于图层的切片和自动切片的外观不同 — 用户切片和基于图层的切片由实线定义，而自动切片由虚线定义。此外，用户切片和基于图层的切片显示不同的图标。可以选取显示或隐藏自动切片，这样可以更容易地查看使用用户切片和基于图层的切片的作品。

子切片是创建重叠切片时生成的一种自动切片类型。子切片指示存储优化的文件时如何划分图像。尽管子切片有编号并显示切片标记，但无法独立于底层切片选择或编辑子切片。每次排列切片的堆叠顺序时都重新生成子切片。

可以使用不同的方法创建切片：

自动切片是自动生成的。
用户切片是用切片工具创建的。
基于图层的切片是用图层面板创建的。

Web 页切片

可以使用切片工具直接在图像上绘制切片线条，或使用图层来设计图形，然后基于图层创建切片。

使用切片工具创建切片

选择切片工具。（按 C 键可以循环切换“裁剪工具”组中的工具。）

任何现有切片都将自动出现在文档窗口中。
选取选项栏中的样式设置：
- 正常在您拖动时确定切片比例。
- 固定长宽比设置高宽比。输入整数或小数作为长宽比。例如，若要创建一个宽度是高度两倍的切片，请输入宽度 2 和高度 1。
- 固定大小指定切片的高度和宽度。输入整数像素值。
在要创建切片的区域上拖动。按住 Shift 键并拖动可将切片限制为正方形。按住 Alt 键 (Windows) 或 Option 键 (Mac OS) 拖动可从中心绘制。

使用“视图”>“对齐”使新切片与参考线或图像中的另一切片对齐。请参阅移动用户切片、调整用户切片大小和对齐用户切片。