Adobe Fireworks 切片终极教程
Fireworks 的切片功能是其核心优势之一，它曾是网页设计师和前端开发者的最爱，切片的主要目的是将一张复杂的设计稿（如网站首页）分割成多个独立的小图片，从而实现：
（图片来源网络，侵删）
- 加速网页加载：用户只需加载当前可见区域的部分图片，而不是等待一张巨大的图片。
- 实现复杂交互：为图片的不同部分添加不同的链接、悬停效果或替换图像。
- 优化文件大小：可以对不同区域使用不同的压缩格式和级别（如 JPEG、GIF、PNG），在保证质量的同时最小化文件体积。
第一部分：基础概念
在开始之前,我们先了解两个核心工具：
切片工具
- 图标：一个带小刀的矩形。
- 作用：在你的画布上绘制矩形区域，这些区域就是将来要导出的独立图片。
- 使用方法：选择切片工具，像使用矩形工具一样，在你需要导出的部分拖动绘制。
切片选择工具
- 图标：一个带小箭头的手形。
- 作用：这是你最常使用的工具，用于选择、移动、调整切片的大小，以及查看和修改切片的属性。
- 使用方法：选择它后，可以点击任何一个切片进行选中，选中的切片会显示一个绿色的外框。
第二部分：核心工作流程
一个完整的切片工作流程通常包括以下四个步骤：
绘制切片 优化切片 导出切片 （可选）生成 HTML
下面我们通过一个实例来详细讲解每一步。
（图片来源网络，侵删）
第三部分：详细步骤教程
假设我们有一个网站首页的设计稿,现在要把它切片。
绘制切片
- 打开设计稿：在 Fireworks 中打开你的 PNG 文件。
- 选择切片工具：在工具栏中选择“切片工具”。
- 开始绘制：
- 从Logo的左上角拖动到右下角，为 Logo 创建一个切片。
- 为导航栏的每个按钮分别绘制切片。重要提示：每个按钮都应该是独立的切片，这样你才能为每个按钮设置不同的链接和悬停效果。
- 为主图 Banner绘制一个切片。
- 为页脚的版权信息和社交媒体图标绘制切片。
- 为背景或纯色区域也绘制切片,这样可以优化为小体积的 GIF 或 PNG-8。
技巧：
- 按住 Shift 键拖动：可以绘制出正方形的切片。
- 参考线：使用视图 > 标尺 和 视图 > 引导线 来对齐切片，确保边缘完美贴合。
- 图层：如果你的设计稿使用了图层，可以在“图层”面板中锁定不需要切片的图层，防止误操作。
优化切片
这是最关键的一步,它决定了导出图片的质量和大小。
- 选择切片选择工具。
- 单击选中一个切片（Logo 切片）。
- 打开“优化”面板：如果面板没有显示，可以通过 窗口 > 优化 来打开。
- 设置优化选项：
- 格式：
- JPEG：适合照片、渐变、色彩丰富的图像（如 Banner），可以通过“品质”滑块调整压缩率。
- PNG-24：适合需要透明背景的复杂图像（如 Logo），支持数百万种颜色，无损压缩。
- PNG-8：适合图标、按钮、文字等颜色较少的图像，文件体积小，也支持透明。
- GIF：类似 PNG-8，适合颜色非常少的图像。
- 平滑：可以轻微柔化图像边缘，减少压缩产生的锯齿。
- 杂边：当导出为 GIF 或 PNG-8 时，用于处理半透明边缘的颜色。
- 格式：
为不同切片设置不同格式：
（图片来源网络，侵删）
- Logo：选择
PNG-24，并勾选“透明”。 - Banner：选择
JPEG，品质设为 80 左右。 - 按钮：选择
PNG-8，颜色数设为 32 或 64，并勾选“透明”。 - 背景色块：选择
JPEG或GIF，颜色数可以设得很低。
高级技巧：导出区域
- 在优化面板下方,有一个“导出区域”预览窗口，它会实时显示你当前选中的切片导出后的样子。
- 你可以在这里直接预览不同设置的效果,找到质量和体积的最佳平衡点。
导出切片
- 文件 > 导出。
- 在弹出的“导出”对话框中，进行以下设置：
- 保存类型：选择 HTML 和图像，这是最常用的选项。
- HTML：可以选择“Dreamweaver”或“导出”，这决定了生成的 HTML 代码风格。
- 切片：确保选择的是“导出切片”。
- 将图像放入子文件夹：强烈建议勾选！这会将所有导出的小图片存放在一个名为“images”的文件夹中，保持项目文件整洁。
- 设置：点击“设置...”按钮，可以进一步调整导出选项，如文件名前缀等。
- 点击“保存”。
Fireworks 会在你选择的目录下生成一个 HTML 文件和一个 images 文件夹，HTML 文件中已经嵌入了所有切片图片，并使用了 <table> 布局来还原你的设计稿。
生成 HTML 与交互（可选）
Fireworks 不仅能切图，还能直接生成带交互效果的网页。
-
为切片添加链接：
- 用“切片选择工具”点击一个按钮切片。
- 在“属性”面板（窗口 > 属性）中，找到“链接”选项，输入你想要跳转的 URL（如
index.html,about.html）。 - 你还可以设置“目标”（如
_blank在新窗口打开）。
-
创建悬停效果：
- 这是 Fireworks 的“杀手级”功能，你需要在设计稿中预先制作好“鼠标悬停”状态的图片（按钮变亮或变色）。
- 步骤： a. 用“切片选择工具”选中要添加悬停效果的按钮切片。 b. 在“行为”面板（窗口 > 行为）中，点击“+”号。 c. 选择 “简单图像交换”。 d. 在弹出的对话框中，选择你为这个按钮准备的“悬停状态”图片。 e. 点击“确定”。
- 当你导出 HTML 时，Fireworks 会自动生成 JavaScript 代码，实现鼠标悬停时图片切换的效果。
第四部分：最佳实践与技巧
- 规划先行：在开始切片前，先思考好哪些部分需要交互，哪些是纯装饰，这样能让你更高效地绘制切片。
- 合理命名：在导出前，可以在“属性”面板中为每个切片命名，这样导出的图片文件名就会是可读的（如
logo.png,btn_home.png），而不是自动生成的slice_01.png。 - 切片与热点：
- 切片：会导出图片并占据空间。
- 热点工具：只创建一个可点击的“热点区域”，不会切割或导出任何图片，它常用于在不破坏设计整体性的情况下，为一张大图添加链接（在一张地图上为不同城市添加链接）。
- 使用蒙版切片：当你需要导出不规则形状的图片时，可以使用切片蒙版，先绘制一个常规的矩形切片，然后选中它和上方的形状，修改 > 蒙版 > 组合为蒙版。
- 检查导出结果：导出后，务必在浏览器中打开生成的 HTML 文件，检查图片是否正确显示、链接是否有效、悬停效果是否正常。
第五部分：现代替代品
虽然 Fireworks 已经停止开发，但它的切片理念至今仍然适用，在现代网页设计中，替代方案通常是：
- 设计工具：Figma, Sketch, Adobe XD，它们同样有强大的切片和导出功能，并且更符合现代前端工作流（如导出 SVG、2x/3x 图像）。
- 前端框架：使用 CSS Grid 或 Flexbox 布局，配合 CSS 背景图或
<img>标签来实现。 - CSS Sprites：将多个小图标合并成一张大图，通过
background-position来显示不同部分，以减少 HTTP 请求，这与 Fireworks 的切片思想异曲同工。
Fireworks 的切片功能是一个强大而高效的工具，它将设计师从繁琐的手动切图和代码编写中解放出来，掌握它的核心流程——绘制 -> 优化 -> 导出，并善用其交互功能，你就能快速地将设计稿转化为功能完备的网页原型。
希望这份教程对你有帮助！
