第一部分：Fireworks 8 简介

Fireworks 8 是 Adobe 公司（当时还未收购 Macromedia）推出的一款专注于网页图形设计、原型制作和切图导出的软件，它的核心优势在于：

• 一体化工作流：集位图编辑、矢量绘图、网页效果、原型制作和优化导出于一体，无需在 Photoshop、Illustrator 和 Dreamweaver 之间频繁切换。
• 轻量高效：相比 Photoshop，Fireworks 的文件体积更小，运行速度更快，特别适合处理网页界面元素。
• 强大的原型功能：可以轻松创建可点击的网页线框图和交互原型，并导出为 HTML 和 CSS 代码。
• 精确的切图与导出：其“切片”和“导出向导”功能非常强大，能高效地管理网页图片资源，生成 CSS Sprites。

第二部分：界面概览

启动 Fireworks 8 后，您会看到以下主要区域：

1. 菜单栏：包含所有命令，如文件、编辑、视图、选择、修改、文本、滤镜、命令、窗口、帮助。
2. 主工具栏：常用命令的快捷按钮，如新建、打开、保存、打印、撤销、重做等。
3. 工具箱：所有绘图和编辑工具的核心区域，它分为多个部分：
   • 选择工具：指针、选择后方对象、部分选定。
   • 位图工具：选区、橡皮擦、铅笔、刷子、图章、橡皮图章、模糊/锐化/涂抹、减淡/加深/海绵、颜色替换、填充。
   • 矢量工具：直线、形状（矩形、圆角矩形、椭圆、多边形、星形）、钢笔、矢量路径、重绘路径、自由变形、区域变形。
   • Web工具：切片、热点、缩放热点、导航栏、按钮、下拉菜单、坐标工具。
   • 颜色工具：颜色样本、颜色混合器、颜色框。
   • 视图工具：手形、缩放。
4. 属性检查器：这是最重要的面板，当选中任何对象时，它会动态显示该对象的属性（如位置、大小、颜色、效果等），并允许您直接修改。
5. 浮动面板：停靠在右侧或左侧的面板，用于管理图层、样式、URL、颜色样本、帧、历史记录等，您可以通过“窗口”菜单来显示或隐藏它们。

第三部分：核心功能详解

矢量绘图

矢量图形是基于数学公式的,无论如何缩放都不会失真，非常适合制作 Logo、图标和界面元素。

• 基本形状：选择工具箱中的形状工具，在画布上拖动即可绘制，按住 Shift 键可以绘制正方形或正圆。
• 钢笔工具：这是绘制复杂路径的利器。
  • 单击：创建一个角点。
  • 单击并拖动：创建一个平滑的曲线点，会出现方向线。
  • 按住 Alt 键单击曲线点：可以单独调整一侧的方向线。
• 对象操作：
  • 部分选定工具：用于选择和调整矢量路径上的锚点。
  • 修改 > 接合路径：可以将多个独立的路径合并为一个。

位图编辑

位图图像由像素组成,适合处理照片和复杂的纹理。

• 选区工具：
  • 选框：创建矩形选区。
  • 椭圆选框：创建椭圆选区。
  • 套索：自由绘制不规则选区。
  • 多边形套索：通过点击创建多边形选区。
  • 魔术棒：根据颜色相似度创建选区。
• 绘画与修饰工具：
  • 画笔/铅笔：自由绘画，可以在属性检查器中调整大小、颜色和边缘柔化程度。
  • 橡皮擦：擦除像素，按住 Shift 可以擦除直线。
  • 图章工具：将图像的一部分复制到另一部分，按住 Alt 键在源点上单击，然后在目标点拖动即可。
  • 模糊/锐化/涂抹：用于图像的细节修饰。
• 位图与矢量转换：
  • 修改 > 位图 > 转换为位图：将选中的矢量对象变成位图。
  • 修改 > 位图 > 转换为矢量路径：将位图图像的轮廓转换为矢量路径（类似“描边”效果）。

样式与效果

这是 Fireworks 让设计变得高效的关键。

• 样式：将一组属性（如填充色、描边、效果、文字样式等）保存为一个可复用的样式。
  • 创建：绘制一个对象并设置好属性后，将其直接拖到“样式”面板中即可。
  • 应用：选中其他对象，然后在“样式”面板中单击样式即可一键应用。
• 效果：为对象添加各种视觉效果，如阴影、发光、斜角、模糊等。

  在属性检查器的“效果”下拉菜单中选择，并可以实时调整参数，所有效果都是非破坏性的，随时可以修改或移除。

文本工具

• 输入文字：选择文本工具，在画布上单击并输入。
• 格式化：选中文字后，在属性检查器中可以设置字体、大小、颜色、字间距、行间距、对齐方式等。
• 将文本转换为路径：
  • 作用：将文字变成矢量图形，这样您就可以像编辑其他形状一样编辑它（扭曲某个字母的笔画）。
  • 方法：选中文字，执行 修改 > 转换 > 转换为路径。注意：转换后无法再直接编辑文字内容，建议先复制一份文字再转换。

切片与热点

这是 Fireworks 作为网页设计工具的灵魂。

• 切片：
  • 作用：将一张大图切割成多个小图，以便在网页中独立加载和优化，或者为不同区域添加链接。
  • 方法：选择切片工具，在需要切图的位置拖动一个矩形框，Fireworks 会自动生成一个半透明的绿色切片覆盖层。
  • 优化：双击切片（或在属性检查器中），可以打开“导出预览”窗口，为该切片选择最佳的文件格式（GIF, JPG, PNG）和压缩设置。
• 热点：
  • 作用：为一张图片的特定不规则区域添加链接，而无需将其切开。
  • 方法：选择热点工具，在要添加链接的区域绘制一个矩形或多边形，然后在属性检查器的“链接”框中输入 URL 地址。

按钮与导航栏

• 创建按钮：
  1. 绘制一个矩形或其他形状作为按钮。
  2. 按下 F8 键，或执行 修改 > 符号 > 转换为符号。
  3. 在弹出的窗口中选择“按钮”，并命名。
  4. 在弹出的按钮编辑器中,您可以定义四种状态：
     • 释放：按钮的默认状态。
     • 滑过：鼠标悬停时的状态（改变颜色或添加发光效果）。
     • 按下：鼠标点击时的状态。
     • 按下时滑过：按下后鼠标再悬停的状态。
  5. 为每种状态设置不同的外观,然后点击完成。
• 创建导航栏：
  • 作用：将多个按钮关联起来，确保在任何一个页面上，只有一个按钮处于“按下”状态。
  • 方法：创建第一个按钮并设置好所有状态，然后复制这个按钮，修改文字或图标，在属性检查器的“导航栏”选项中，为所有按钮指定相同的“导航栏名称”，并设置“初始状态”为“释放”，然后为当前页面对应的按钮设置“按下”状态。

第四部分：导出与优化

设计的最终目的是在网页中使用。

• 导出向导：
  1. 执行 文件 > 导出向导。
  2. 选择“目标导出文件”（如网页横幅、图标等），Fireworks 会推荐最佳设置。
  3. 点击“继续”，进入“导出预览”窗口，在这里可以精确调整每个切片的格式、颜色、透明度和压缩质量。
  4. 设置完成后,点击“导出”。
• 导出选项：
  • 导出区域：可以选择只导出画布的一部分。
  • 导出：可以选择导出为 HTML 和图像文件、仅图像文件、或者 CSS Sprites 等。
  • 文件名：可以设置切片的命名规则（如 button_01, button_02）。
  • 设置：可以指定存放图像的文件夹。

第五部分：实战项目 - 制作一个简单的网页按钮

1. 新建文档：Ctrl + N，设置画布大小（如 200x80 像素），背景色为透明。
2. 绘制按钮：选择圆角矩形工具，拖动绘制一个圆角矩形，在属性检查器中设置填充色（如 #4A90E2）、描边（无）。
3. 添加文字：选择文本工具，输入“点击我”，设置合适的字体、颜色和大小。
4. 创建按钮符号：同时选中矩形和文字，按下 F8，选择“符号”类型为“按钮”，命名为 myButton，点击“确定”。
5. 编辑状态：在弹出的按钮编辑器中：
   • 释放：保持默认。
   • 滑过：将填充色改为 #357ABD，并添加一个“发光”效果。
   • 按下：将填充色改为 #2E6DA4，并稍微缩小一点图形。
6. 测试：按下 F12 或 Ctrl + Alt + R，在浏览器中预览效果，将鼠标悬停在按钮上，点击它，查看状态变化。
7. 导出：执行 文件 > 导出，选择“仅图像”，格式为 PNG-32，保存即可。

第六部分：学习资源

由于 Fireworks 8 已经过时，现代教程较少，但经典原理是相通的，您可以寻找以下资源：

• 官方文档（存档）：Adobe 官方网站上可能还存留着 Fireworks 8 的帮助文档。
• YouTube 视频教程：搜索 "Fireworks 8 tutorial" 或 "Adobe Fireworks tutorial"，虽然很多是英文，但视频演示非常直观。
• 设计社区：在 Behance、Dribbble 等社区，有时会看到设计师分享他们使用 Fireworks 工作流程的文章或截图，可以借鉴其设计思路。
• 博客与论坛：一些老牌的设计博客（如 Smashing Magazine 的早期文章）和设计论坛（如站酷、UI中国）可能有过时的教程帖，但依然有价值。

Fireworks 8 是一款非常优秀的“古董级”软件，虽然它已被 Adobe 停止更新，但其核心的设计思想和工作流程——组件化、样式化、快速原型制作——至今仍在影响着 Figma、Sketch 等现代设计工具，学习 Fireworks 8 不仅能让你掌握一款特定工具，更能深刻理解网页界面设计的底层逻辑，希望这份教程能帮助你顺利入门！