引言：为什么是 Fireworks 8？
Fireworks 8（发布于 2005 年）虽然是一款“老”软件，但它曾是网页设计师、UI/UX 设计师的“神器”，它的核心优势在于：
（图片来源网络，侵删）
- 轻量高效：相比 Photoshop，它体积小、运行快，专为网页设计优化。
- 一体化工作流：集成了位图编辑、矢量绘图、网页切片、原型制作和优化导出于一体，无需在多个软件间频繁切换。
- 强大的切片与导出：可以轻松对设计稿进行切片，并针对不同区域（如图片、按钮、背景）导出为最优化的文件格式（如 GIF, JPG, PNG），并自动生成 HTML 和 CSS 代码。
- 原型制作：可以快速创建带有链接和交互效果的网页点击原型。
第一部分：基础入门篇
认识工作区
打开 Fireworks 8，你会看到以下主要区域：
- 菜单栏：所有命令的集合。
- 主要工具栏：常用工具的快捷按钮，如新建、打开、保存、导入、导出等。
- 工具面板：最核心的区域，包含所有绘图和编辑工具。
- 选择工具：指针、部分选择工具（用于选择矢量路径的锚点）。
- 位图工具：刷子、铅笔、橡皮擦、图章、模糊/锐化/涂抹等。
- 矢量工具：直线、形状（矩形、圆形、多边形）、钢笔、文本。
- Web工具：切片、热点、区域替换图。
- 颜色工具：颜色选择器、笔触/填充颜色选择。
- 属性检查器：这是最重要的面板！ 当你选中画布上的任何对象时，这个面板会动态显示并允许你修改该对象的所有属性（如位置、大小、颜色、效果、字体等）。
- 其他常用面板：
- 图层：管理画布上的所有对象，和 Photoshop 的图层类似。
- 样式：保存常用的效果组合，一键应用。
- 历史记录：记录你的操作步骤，可以撤销多步操作。
文档基础
- 新建文档：
文件>新建，在这里设置画布的宽度、高度、分辨率。- 分辨率：网页设计通常使用 72 PPI，印刷品则使用 300 PPI。
- 画布设置：
修改>画布>画布大小，可以扩展或裁剪画布。 - 保存文件：
- .png：Fireworks 的原生格式，保留所有图层、效果和编辑信息，是工作过程中的首选。
- .jpg/.gif：用于最终导出为网页图片。
第二部分：核心功能篇
位图编辑
Fireworks 拥有强大的位图处理能力，非常适合处理照片和创建复杂的图像效果。
- 导入位图：
文件>导入，或直接从文件夹拖入。 - 选择与修饰：
- 使用 marquee (矩形选框) 、 lasso (套索) 等工具选中图像区域。
- 使用 橡皮擦 擦除部分图像。
- 使用 图章工具，按住
Alt键点击取样，然后拖动进行复制。 - 使用 模糊、锐化、涂抹 等工具进行细节修饰。
- 滤镜：
滤镜菜单提供了大量效果，如模糊、锐化、杂点、调整颜色（曲线、色相/饱和度）等，可以快速改变图像外观。
矢量绘图
矢量图形可以无限放大而不失真,是制作 Logo、图标、按钮和线条图形的最佳选择。
- 基本形状：选择矩形、圆形等工具，在画布上拖动即可绘制，按住
Shift键可以绘制正方形/正圆。 - 钢笔工具：绘制精确路径的利器。
- 点击创建直角锚点。
- 点击并拖动创建带有平滑曲线的锚点。
- 按住
Alt键点击锚点，可以单独调整一侧的曲线手柄。
- 颜色与描边：
- 在工具面板底部,有两个色块：代表填充和描边。
- 点击色块可以设置对象的内部颜色和边框颜色。
- 在属性检查器中,可以精确调整描边的宽度、样式（虚线、点线）和端点样式。
文本工具
- 创建文本：选择文本工具，在画布上点击并输入文字。
- 编辑文本：选中文字后，在属性检查器中可以修改字体、字号、颜色、字间距、行间距等。
- 文本特效：属性检查器下方有“效果”按钮，点击可以添加内阴影、外发光、斜角、描边等效果，制作漂亮的标题或按钮文字。
第三部分：网页应用篇
这是 Fireworks 的精髓所在，也是它被称为“网页设计神器”的原因。
（图片来源网络，侵删）
切片
切片的作用是将一张完整的设计稿切割成多个小图片,以便于在网页中独立加载和优化。
- 为什么切片？
- 加快加载速度：浏览器可以并行下载多个小文件，而不是等待一个大文件。
- 针对性优化：可以将图片区域导出为高质量的 JPG，而将纯色或简单图形导出为体积更小的 GIF 或 PNG-8。
- 如何切片？
- 在工具栏中选择 切片工具。
- 在你的设计稿上,像用矩形选框工具一样，框出你想要独立导出的区域。
- 你会看到,画布上出现了半透明的绿色切片覆盖层，并且导出了预览窗口。
- 按住
Shift键可以绘制正方形切片。
优化与导出
切片完成后,需要为每个切片设置最佳的导出格式和参数。
- 优化面板：
窗口>优化，这是导出前的关键设置。- 预设：可以选择“网页216色”、“JPEG - 高品质”等预设，Fireworks 会自动调整其他参数。
- 导出格式：GIF（适合纯色、线条、透明背景）、JPG（适合照片、复杂渐变）、PNG-8（类似 GIF，支持更多颜色）、PNG-24（支持透明和高质量，但文件较大）。
- 颜色：设置颜色数量，数量越少，文件越小，但质量越低。
- 导出：
文件>导出。- 在弹出的窗口中,选择导出。
- 导出：只导出图片文件。
- 导出 HTML：这是最强大的功能！ 它会导出：
- 一个包含所有切片图片的
images文件夹。 - 一个
.html文件，这些图片被正确地拼接在一起，还原了你的设计稿。 - 一个
.css文件，包含了图片的定位信息。 - 你可以直接把这个 HTML 文件放到浏览器中查看，甚至可以作为网页的雏形进行修改。
- 一个包含所有切片图片的
交互与原型
Fireworks 可以快速制作可点击的网页原型。
- 热点：为一张图片（如 Banner）添加链接区域，而无需切片。
- 选择热点工具，在图片上框出要链接的区域。
- 在属性检查器中,设置链接的
URL、目标（如_blank在新窗口打开）。
- 切片行为：为切片添加交互效果，如鼠标悬停时改变图片。
- 双击一个切片,打开切片检查器。
- 在“鼠标悬停”或“按下”状态下，点击“+”号添加“交换图像”行为。
- 选择一张预先准备好的悬停状态的图片作为交换对象。
- 导出时,选择
文件>导出，并勾选包括 HTML 中的 JavaScript，这样生成的 HTML 文件就会包含交互效果。
第四部分：实用技巧与进阶
- 使用样式：为按钮、标题等元素创建一个样式后，只需点击一下，就可以将相同的外观应用到其他对象上，保证设计的一致性。
- 符号：将常用的元素（如 Logo、导航按钮）转换为符号，修改符号后，画布上所有该符号的实例都会同步更新，极大提高了修改效率。
- 蒙版：使用一个矢量或位图对象来遮罩另一个对象，创造出有趣的视觉效果，先选中要被遮罩的对象，再按住
Shift键选中蒙版对象，修改>蒙版>组合为蒙版。 - 混合模式：在属性检查器中，可以像 Photoshop 一样为对象设置混合模式（如叠加、正片叠底），创造丰富的图层效果。
总结与资源
虽然 Fireworks 8 已经非常古老，但它所蕴含的设计理念和操作逻辑（尤其是切片和导出 HTML 的思想）至今仍然影响着许多现代设计工具，学习 Fireworks 8 不仅能让你使用一款经典的软件，更能让你深刻理解网页图形设计的底层逻辑。
（图片来源网络，侵删）
学习资源推荐：
- 官方文档：Adobe 官网（当时是 Macromedia）可能还存有 Fireworks 8 的帮助文档。
- 视频教程：在 YouTube 或 Bilibili 上搜索 "Fireworks 8 教程" 或 "Fireworks 8 网页设计"，可以找到大量由早期设计师录制的中文/英文视频教程。
- 社区与博客：搜索一些早期的设计博客，如 Smashing Magazine、A List Apart 等，可能会有关于 Fireworks 的经典文章和技巧分享。
希望这份教程能帮助你开启 Fireworks 8 的学习之旅！
