fireworks怎么使用教程

Adobe Fireworks 教程：从入门到精通

重要提示：Adobe 已于 2025 年正式停止开发和更新 Fireworks。 尽管如此，它依然是许多网页设计师、UI/UX 设计师和前端开发者的“神器”，尤其是在制作网页原型、图标和切图方面，其速度和效率至今难以被完全替代，本教程基于 Fireworks CS6 等主流版本。

第一部分：入门基础

认识 Fireworks 的工作界面

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

• 菜单栏: 包含所有命令，如文件、编辑、视图、选择、修改、滤镜、命令、视图和帮助。
• 工具栏: 位于左侧，包含所有用于创建和编辑图形的工具（如选择、钢笔、矩形、画笔等）。
• 属性检查器: 位于下方，是最核心的面板，它会根据你当前选择的工具或对象，显示相应的属性选项（如填充颜色、描边、大小、位置等）。
• 浮动面板: 位于右侧，用于管理图层、样式、颜色、历史记录等，你可以通过 窗口 菜单来显示或隐藏这些面板。
  • 图层: 管理文档中的所有元素，类似于 Photoshop 的图层。
  • 资源/库: 存储和管理可重用的元素，如符号、样式、颜色等。
  • 样式: 一组预设的图层效果（如描边、填充、阴影），可以一键应用到对象上。

文档的基本操作

• 新建文档: 文件 > 新建，在这里设置画布的宽度、高度、分辨率（网页设计通常为 72 PPI）和画布颜色（通常是白色或透明）。
• 打开/保存文档: 文件 > 打开 / 保存 / 另存为，Fireworks 的原生格式是 .png，但它也支持 PSD、JPG、GIF 等格式。
• 导出: 这是 Fireworks 的一个核心功能，用于将设计稿导出为网页可用的格式（如 JPG、GIF、PNG）以及生成 CSS 代码和切图。文件 > 导出。

第二部分：核心功能详解

矢量图形与位图图形

Fireworks 最大的优势在于它同时支持矢量图形和位图图形。

• 矢量图形: 由数学公式定义的线条和形状，特点是无限放大不失真，文件体积小，非常适合用于 Logo、图标、按钮等。

  • 常用工具: 矩形、椭圆、多边形、钢笔、直线。
  • 编辑: 使用部分选定工具（白色箭头）可以单独调整路径上的锚点。

• 位图图形: 由像素点阵组成，特点是有精度限制，放大后会变模糊，适合处理照片、复杂的纹理和渐变。

  
  （图片来源网络，侵删）
  • 常用工具: 画笔、油漆桶、橡皮擦、图章、模糊、锐化等。
  • 编辑: 使用魔术棒可以快速选择颜色相似的区域。

颜色、描边与填充

这是设计中最基础也最重要的部分,在属性检查器中你可以轻松控制它们。

• 填充: 对象内部的颜色或图案。
  • 无填充: 选择“无”。
  • 实色填充: 选择一个纯色。
  • 渐变填充: 选择“线性”或“ radial”（径向）渐变，并可以自定义渐变的颜色和位置。
  • 图案填充: 使用预设的图案。
• 描边: 对象边缘的线条。
  • 无描边: 选择“无”。
  • 实色描边: 选择颜色和大小。
  • 描边类别: Fireworks 的王牌功能之一！提供了各种预设的描边样式，如“书法”、“喷枪”、“油画”等，让你的线条充满艺术感。
  • 自定义描边: 你可以点击描边类别旁边的下拉箭头，进入高级设置，调整纹理、边缘、不透明度等，创造出独一无二的描边效果。

文本工具

• 创建文本: 选择文字工具，在画布上点击并输入。
• 设置样式: 在属性检查器中，你可以设置字体、字号、颜色、字间距、行间距等。
• 将文本转换为路径: 如果你想对文字进行变形或使用特殊字体，可以选中文字，然后执行 修改 > 路径 > 转换为路径。注意： 转换后，文字将失去其文本属性，无法再像普通文本一样编辑。

蒙版

蒙版的作用是控制对象的显示区域，隐藏不想要的部分，Fireworks 有两种蒙版：

• 矢量蒙版: 使用矢量形状（如矩形、圆形）来创建蒙版区域，蒙版的形状决定了显示区域。
• 位图蒙版: 使用位图图像的灰度信息来创建蒙版，黑色区域完全隐藏，白色区域完全显示，灰色区域半透明显示。

创建蒙版步骤（通用）：

1. 将要被遮罩的对象和用作蒙版的对象放在同一个图层中,并确保蒙版对象位于上方。
2. 同时选中这两个对象。
3. 右键单击,选择 蒙版 > 组合为蒙版。

第三部分：网页设计利器

切片工具

切片是 Fireworks 进行网页切图的核心，它将一个大的设计稿切割成多个小的、优化的图片文件，以便在网页中加载。

• 创建切片: 选择切片工具（在工具栏中通常与矩形工具、热点工具在一个组里），在画布上拖动，绘制一个矩形区域，Fireworks 会自动生成一个半透明的绿色矩形。
• 设置切片导出选项: 选中切片，在底部的属性检查器中，你可以为这个切片单独设置：
  • 切片类型: 图像、HTML 等。
  • 导出文件名: 自定义文件名。
  • 导出格式: PNG-24（支持透明）、JPG（照片）、GIF（动画）等。
  • 导出设置: 如颜色深度、平滑等。

热点工具

热点用于为图片的特定区域添加交互行为,如超链接。

• 创建热点: 选择热点工具，在需要添加链接的区域（如一个按钮）上拖动绘制一个矩形热点区域，热点本身在导出时是看不见的。
• 设置链接: 选中热点，在属性检查器中设置链接的 URL、目标窗口（_blank 在新窗口打开）和替代文本。

按钮和符号

• 按钮: 是一种特殊的符号，可以轻松创建出具有不同状态（如弹起、滑过、按下）的交互式按钮。
  • 创建按钮: 绘制一个按钮形状，然后执行 编辑 > 插入 > 新建按钮，在弹出的窗口中，你可以为“弹起”、“滑过”、“按下”和“按下时滑过”这四个状态分别绘制不同的图形或效果。
• 符号: 可以重复使用的图形对象，修改符号后，文档中所有该符号的实例都会同步更新，极大地提高了效率。
  • 创建符号: 选中一个图形，按 F8 或执行 修改 > 元件 > 转换为符号，选择“图形”或“按钮”。
  • 编辑符号: 双击画布上的符号实例，进入编辑模式，修改完成后，点击文档左上角的“完成”按钮。

第四部分：导出与优化

这是将你的设计稿变为网页资源的最后一步。

1. 使用导出向导: 文件 > 导出向导，它会引导你选择文件类型、设置优化选项，并预览不同格式下的文件大小和质量，帮助你做出最佳选择。
2. 使用预览/导出: 文件 > 在浏览器中预览 / 导出。
   • 导出: 这是最常用的方式，导出时，Fireworks 会生成一个 HTML 文件，其中包含了所有切好的图片和对应的 <img> 标签，以及热点生成的 <a>
   • 导出设置: 在导出前，可以打开 文件 > 图像预览，在这里可以全局设置导出格式、颜色、抖动等，然后点击“导出”。