Adobe Fireworks 教程：从入门到精通

Fireworks（简称 FW）虽然 Adobe 已停止开发，但它凭借其轻量、高效和专为 Web 设计优化的特性，至今仍被许多设计师喜爱，它非常适合快速创建网站界面、图标、广告图和高保真交互原型。

第一部分：入门基础

认识 Fireworks 的工作区

启动 Fireworks 后，你会看到以下核心区域：

• 菜单栏: 包含所有操作命令，如文件、编辑、视图、选择、修改、滤镜、命令、视图和帮助。
• 工具面板: 位于左侧，是绘制和编辑图形的核心工具，分为选择、位图、矢量、网页、颜色和视图六个类别。
• 属性检查器: 位于下方，这是最常用的面板，当选中画布上的任何对象（文本、形状、位图等）时，这里会显示该对象的所有可编辑属性，如位置、大小、颜色、效果等。
• 文档窗口: 中间最大的区域，就是你进行设计的地方，可以同时打开多个文档窗口。
• 浮动面板: 右侧的面板，如“层”、“样式”、“库”等，用于管理复杂的设计元素，你可以通过“窗口”菜单来显示或隐藏它们。

第二部分：核心功能与操作

文档设置与画布操作

新建文档:

• Ctrl + N (Windows) / Cmd + N (Mac)
• 画布大小: 设置设计稿的宽度和高度，单位可以是像素、厘米等，对于网页设计，通常使用像素。
• 分辨率: 网页设计通常设置为 72 PPI，如果需要打印，则设置为 300 PPI。
• 画布颜色: 选择白色、透明或自定义颜色。

调整画布:

• 修改 > 画布大小: 可以扩展或裁剪画布。
• 修改 > 画布颜色: 随时更改画布背景色。
• 视图 > 标尺: 显示/隐藏标尺，可以拖出参考线来辅助对齐 (Ctrl + Alt + R / Cmd + Option + R)。

矢量图形绘制 (Vector Graphics)

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

• 基本形状工具: 矩形、圆角矩形、椭圆、多边形、星形等，按住 Shift 键可以绘制正方形、正圆。
• 钢笔工具: 绘制精确的路径和曲线，是矢量设计的核心工具。
  • 单击: 创建一个转角点。
  • 单击并拖动: 创建一个平滑的曲线点。
• 直线工具: 绘制直线。
• 铅笔工具: 自由绘制路径。
• 颜色设置: 在工具面板的“颜色”区域，可以分别设置描边（边框）和填充（内部）的颜色、样式和透明度。

编辑矢量对象:

• 选择工具: 用于选择和移动整个对象。
• 部分选择工具: 用于选择和编辑路径上的锚点，通过拖动锚点或其控制手柄来改变形状。

位图编辑

位图是由像素组成的,放大后会失真，主要用于处理照片或创建复杂的纹理效果。

• 位图工具:

  • 选区工具: 矩形、椭圆、套索等，用于选择像素区域。
  • 橡皮擦工具: 擦除像素。
  • 画笔工具: 自由绘制。
  • 油漆桶工具: 填充颜色。
  • 文字工具: 在 Fireworks 中，文字默认是矢量，但可以轻松转换为位图 (修改 > 转换为位图)。

• 位图蒙版: 这是 Fireworks 的一个杀手级功能，用于将一个位图或矢量图形的形状作为“遮罩”，来显示或隐藏另一个图层的内容。

  
  （图片来源网络，侵删）
  1. 将要显示的内容放在上层。
  2. 将用作遮罩的形状（例如一个圆形）放在下层。
  3. 同时选中这两个图层。
  4. 右键点击,选择 “蒙版 > 组合为蒙版”。

文本处理

• 文本工具: 在画布上点击并输入文字。
• 属性检查器: 在这里可以设置字体、字号、颜色、字重、对齐方式等。
• 将文本转换为路径: 修改 > 转换为路径，这样做的好处是，即使对方电脑没有安装你使用的字体，也能正确显示，缺点是文字失去了文本属性，不能再像文本一样编辑。

样式与效果

• 样式: 将一组属性（如颜色、描边、效果）保存为一个“样式”，选中一个对象后，点击样式面板中的样式，即可快速应用，这对于保持整个UI设计的一致性非常有用。
• 效果: 位于属性检查器底部，可以给对象添加各种非破坏性的效果，如内阴影、外发光、模糊、斜角和浮雕等，可以随时在属性检查器中修改或移除效果。

第三部分：网页设计与原型

这是 Fireworks 最强大的领域之一。

切片

切片是 Fireworks 的核心网页功能，它不是真的“切图”，而是将你的设计稿分割成多个独立的、可导出的区域。

• 切片工具: 在工具面板的“网页”类别中。
• 为什么使用切片？
  1. 优化导出: 可以对切片区域进行不同的优化设置，图片区域用JPEG，纯色背景用GIF，透明背景用PNG。
  2. 创建交互效果: 切片可以响应鼠标事件（如 onMouseOver），实现按钮的悬停效果。
  3. 生成HTML: 可以将带切片的图片自动导出为包含 <table> 或 <div> 布局的 HTML 文件。

使用切片的步骤：

1. 用切片工具在你设计稿上画出切片区域。
2. 选中切片,在属性检查器中设置它的导出设置（如格式、质量）。
3. `文件 > 导出**，在弹出的对话框中，选择“HTML和图像”，Fireworks 会自动为你生成网页代码和对应的图片文件。

按钮元件

创建可交互的按钮非常简单。

1. 绘制一个按钮图形。
2. 选中它,修改 > 元件 > 转换为元件...。
3. 选择类型为“按钮”，点击确定。
4. 在按钮编辑器中,你可以设置四种不同的状态：
   • 释放: 按钮的默认状态。
   • 滑过: 鼠标悬停时的状态（可以改变颜色或添加效果）。
   • 按下: 鼠标点击时的状态。
   • 按下时滑过: 按下后鼠标移入的状态。
5. 为每个状态设置好图形后,点击“完成”，Fireworks 会自动生成所需的 JavaScript 代码。

多状态页面

一个 Fireworks 文件（.png）可以包含多个页面，每个页面代表一个独立的网页（如首页、关于我们、联系我们等）。

• 页面面板: 在右侧浮动面板中。
• 作用:
  • 在一个文件中管理整个网站的多个页面。
  • 可以在不同页面之间共享“主页面”（Master Page）上的元素，如网站的页眉、页脚和导航栏，避免重复劳动。
  • 在导出时,可以选择导出所有页面或特定页面。

第四部分：导出与优化

• 导出: 文件 > 导出。
  • 导出区域: 只导出你选择的矩形区域。
  • 导出: 可以指定导出的文件名、格式、位置和切片处理方式。
• 导向Web: 文件 > 导向Web，这是一个向导，可以一步步引导你完成切片、优化和导出 HTML 的过程。

常用导出格式：

• PNG: Fireworks 的原生格式，支持透明度和高质量压缩，是网页UI设计的首选。
• JPEG: 适合照片等复杂图像，不支持透明。
• GIF: 适合颜色较少、有大块纯色或需要透明动画的图像。
• CSS Sprites: 可以将多个小图标合并成一张大图，通过 CSS background-position 来显示，减少HTTP请求，提升网页加载速度，Fireworks 可以轻松实现。

第五部分：实用技巧与资源

实用技巧

1. 快捷键: 大幅提升效率。V (选择工具), T (文字工具), F8 (转换为元件), Ctrl + D (复制)。
2. 对齐面板: 选中多个对象后，使用对齐面板（修改 > 对齐）可以轻松实现居中、分布等对齐操作。
3. 组合: Ctrl + G / Cmd + G，将多个对象组合成一个整体，方便移动和编辑。
4. 历史记录面板: 撤销/重做的次数可以通过“历史记录”面板来查看和操作，甚至可以保存一系列操作为“命令”。

学习资源推荐

由于 Fireworks 已停止更新，新教程较少，但经典教程依然非常有效。

1. Adobe 官方教程 (存档):

   • Adobe 官网仍有 Fireworks CS6 的官方教程库，质量非常高。
   • 链接: Adobe Fireworks Tutorials (Adobe 官网)

2. YouTube 视频教程:

   • 搜索关键词: "Adobe Fireworks tutorial", "Fireworks UI design", "Fireworks slice and export"。
   • 推荐频道/UP主: 虽然很多是英文的，但操作演示直观易懂，可以开字幕学习，搜索 "Tutvid" 或 "Chris Spooner" 等设计类博主，他们过去也做过很多 FW 教程。

3. 博客与社区:

   • UX Booth: 曾发表过关于 Fireworks 在用户体验设计中应用的深度文章。
   • 国内设计社区: 在“站酷”、“UI中国”等平台搜索“Fireworks”，可以找到一些设计师分享的经验和作品。

4. 替代软件:

   • 如果你需要寻找 Fireworks 的替代品，可以考虑：
     • Figma: 当前最流行的 UI/UX 设计工具，基于浏览器，协作功能强大。
     • Sketch (仅限 Mac): 轻量、高效，是 Mac 平台设计师的首选之一。
     • Adobe XD: Adobe 官方的 UI/UX 设计工具，与 Creative Cloud 生态无缝集成。

Adobe Fireworks 是一款专注于 Web 设计的“瑞士军刀”，虽然它已经“退役”，但其核心设计理念——快速、高效、原型驱动——至今仍然影响着众多设计工具。

学习 Fireworks，不仅能掌握一款经典软件，更能深刻理解网页UI设计的底层逻辑，希望这份教程能成为你学习路上的好帮手！