Fireworks 曾是网页设计和原型制作领域的王者，以其强大的功能、轻量级的文件和无缝的工作流而闻名，虽然 Adobe 已在 2025 年停止了对 Fireworks 的更新，但它仍然是一个功能强大且高效的工具，尤其适合创建网页 UI、图标和交互原型。
（图片来源网络，侵删）
本教程将分为以下几个部分：
- 入门篇：界面与核心概念
- 基础操作篇：创建、选择与绘制
- 进阶功能篇：样式、符号与切片
- 实战应用篇：创建一个简单的网页界面
- 导出与优化篇：将设计变为现实
- 资源与总结
第一部分：入门篇 - 界面与核心概念
1 为什么学习 Fireworks？
- 一体化工作流：集位图编辑、矢量绘图、网页布局和原型制作于一体。
- 轻量高效：文件体积小，运行流畅,非常适合快速迭代设计。
- 强大的切片功能：可以轻松将设计稿导出为网页所需的图片、HTML 和 CSS 代码,大大节省开发时间。
- 出色的原型制作：可以创建带有链接、交互状态（如悬停、点击）的可点击原型,方便向客户或开发团队演示。
2 熟悉工作区
启动 Fireworks 后，你会看到一个由多个面板组成的工作区,了解这些面板是高效工作的第一步。
- 菜单栏：包含所有命令，如文件、编辑、视图、选择、修改、文本、命令、窗口等。
- 工具栏：位于左侧，包含所有绘图、选择和编辑工具，这是你最常用的区域。
- 选择工具：用于选择和移动对象。
- 位图工具：如选区、橡皮擦、画笔、钢笔、油漆桶等。
- 矢量工具：如直线、形状（矩形、圆形、多边形）、钢笔工具等。
- Web工具：如切片、热点、导航栏等。
- 属性检查器：位于主界面的下方，是“智能”面板，当你选中一个工具或对象时，它会显示与该对象相关的所有属性和设置（如颜色、大小、边框、效果等）,这是第二个最常用的面板。
- 常用面板：可以通过
窗口菜单打开或关闭。- 图层：管理设计中的所有元素，像 Photoshop 一样重要。
- 资源/库：存储和管理符号、样式、颜色等可重用元素。
- 样式：将一组属性（如颜色、边框、阴影）保存为可一键应用的样式。
- 颜色：选择和管理颜色，支持色板、吸管工具等。
3 核心概念：位图 vs. 矢量
理解这两者的区别是掌握 Fireworks 的关键。
- 位图：由像素组成，放大后会失真，出现马赛克效应，适合处理照片和复杂的图像细节，工具：画笔、橡皮擦、选区等。
- 矢量：基于数学公式（点、线、曲线）构成，无论如何放大都保持清晰，适合绘制图标、Logo 和界面元素，工具：形状工具、钢笔工具等。
第二部分：基础操作篇 - 创建、选择与绘制
1 创建新文档
文件 > 新建，在这里设置画布尺寸（如 1920x1080 像素）、分辨率（网页设计通常为 72 PPI）、背景色（白色或透明）。
（图片来源网络，侵删）
2 选择与移动对象
- 选择工具：点击单个对象可以选择它，按住
Shift键可以加选多个对象。 - 部分选择工具：用于选择矢量图形中的某个锚点或路径段,进行精细调整。
- 移动对象：选中对象后，直接拖动即可，按住
Shift键可以水平或垂直移动。
3 绘制基本矢量图形
- 选择工具：从左侧工具栏选择一个形状工具，如“矩形”工具。
- 设置属性：在底部的属性检查器中，设置填充颜色、描边颜色和描边宽度。
- 绘制：在画布上按住鼠标左键并拖动,即可绘制出形状。
- 提示：按住
Shift键可以绘制正方形、正圆等规则图形。
4 使用钢笔工具绘制自定义路径
钢笔工具是创建复杂矢量图形的利器。
- 选择钢笔工具。
- 点击：在画布上点击创建一个锚点。
- 创建曲线：点击下一个锚点时，按住鼠标左键并拖动，可以创建带有控制手柄的曲线,从而绘制平滑的弧线。
- 闭合路径：将钢笔工具移动到第一个锚点上，当光标变成一个小圆圈时,点击即可闭合路径。
第三部分：进阶功能篇 - 样式、符号与切片
这是 Fireworks 的精髓所在,能让你事半功倍。
1 样式
样式可以将一个对象的属性（颜色、边框、阴影、内发光等）保存下来,然后一键应用到其他对象上。
- 创建样式：
- 创建一个对象,并在属性检查器中设置好你喜欢的所有效果。
- 选中该对象。
- 将属性检查器中的缩略图直接拖拽到右侧的“样式”面板中,即可创建一个新样式。
- 应用样式：选中其他对象，然后点击“样式”面板中你创建的样式即可。
2 符号
符号是可重用的对象实例，修改符号源，所有实例都会自动更新，这对于制作图标、按钮等重复元素至关重要。
（图片来源网络，侵删）
- 创建符号：
- 绘制一个图形（如一个按钮）。
- 选中该图形。
- 按
F8键，或右键选择转换为符号。 - 在弹出的窗口中，输入符号名称，选择类型（通常为“图形”）,然后点击确定。
- 编辑符号：
- 方法一：双击画布上的符号实例，进入符号编辑模式，修改完成后，点击画布左上角的“完成”按钮。
- 方法二：在“资源/库”面板中,双击符号进行编辑。
- 符号类型：
- 图形：静态图像,最常用。
- 按钮：包含四种状态：释放、滑过、按下和选中,非常适合制作交互原型。
- 动画：用于创建简单的 GIF 动画。
3 切片
切片是 Fireworks 用于网页布局的核心功能，它允许你将一个大的设计稿切割成多个小图片，并导出为独立的 HTML 文件和图片文件。
- 选择切片工具：在工具栏中选择“矩形切片”工具。
- 绘制切片：在你的设计稿上，用矩形工具框住需要导出的区域，一个 Logo、一张图片、一个按钮。
- 设置切片导出设置：选中一个切片，在底部的属性检查器中，你可以设置：
- 切片导出设置：点击旁边的文件夹图标，在弹出的窗口中选择导出格式（如 GIF, JPEG, PNG）。
- URL：为该切片添加链接。
- 替代文本：鼠标悬停时显示的提示文本。
- 鼠标滑过状态：可以指定当鼠标悬停时显示的图片,用于制作按钮的悬停效果。
第四部分：实战应用篇 - 创建一个简单的网页界面
让我们动手实践,创建一个简单的博客首页头部。
- 新建文档：创建一个 1200x400 像素的画布。
- 绘制背景：使用矩形工具绘制一个全尺寸的矩形，填充一个深蓝色（#1a237e）。
- 创建 Logo：
- 使用文本工具输入 "MYBLOG"。
- 在属性检查器中设置字体、颜色（白色）和大小。
- 选中文字，按
F8将其转换为符号，类型为“图形”。
- 创建导航栏按钮：
- 使用矩形工具绘制一个按钮形状,填充浅灰色。
- 选中按钮，在属性检查器中添加一个“内阴影”效果,使其更有立体感。
- 在按钮上添加文字，如“首页”。
- 同时选中按钮和文字，按
F8将它们组合成一个“按钮”符号。 - 复制这个
