Fireworks 8 教程：从入门到精通

第一部分：认识 Fireworks 8

Fireworks 8 是什么？

Fireworks 8 (简称 FW8) 是 Macromedia 公司（后被 Adobe 收购）开发的一款专业图像处理软件,它的核心定位是：

  • 网页图形设计：创建用于网站的按钮、图标、横幅、Logo 等各种图形元素。
  • 网页原型制作：快速绘制线框图、高保真原型，并可以轻松导出为可点击的 HTML/CSS 代码,用于与开发人员沟通。
  • 图像优化与切片：对图像进行压缩和优化，减小文件大小，同时保证最佳视觉效果，通过切片技术，可以将一张大图分割成多个小图，分别优化,从而加快网页加载速度。

为什么选择 Fireworks 8？

  • 一体化工作流：集位图编辑（类似 Photoshop）、矢量绘图（类似 Illustrator）和网页原型功能于一体,无需在多个软件间切换。
  • 轻量高效：相比于 Photoshop，FW 启动更快，占用的系统资源更少,非常适合网页图形的快速处理。
  • 强大的原型功能：独有的“页面”和“切片”功能,让制作可交互的原型变得异常简单。
  • 精准的导出控制：可以精确控制每个切片的导出格式（GIF, JPG, PNG）、颜色深度、质量等。

第二部分：界面初探

启动 Fireworks 8 后,你会看到以下主要界面区域：

  • 菜单栏：所有命令的集合，如文件、编辑、视图、选择、修改、文本、滤镜、命令、窗口、帮助。
  • 主工具栏：包含最常用的命令，如新建、打开、保存、打印、撤销、重做、导入、导出等。
  • 工具面板：所有绘图和编辑工具的集合，它分为几个标签页：
    • 选择：用于选择、移动、缩放对象。
    • 位图：用于像素级别的编辑，如画笔、橡皮擦、图章、选框等。
    • 矢量：用于绘制路径、形状，如钢笔、直线、矩形、椭圆、多边形等。
    • Web：用于创建切片、热点（图像映射）和按钮元件。
    • 颜色：设置笔触颜色和填充颜色。
  • 属性检查器：这是 FW 的核心面板，当选中一个对象时，这里会显示该对象的所有可修改属性（如位置、大小、颜色、效果等）,它会根据你选择的工具和对象动态变化。
  • 文档窗口：你的画布所在区域,在这里进行所有创作。
  • 浮动面板：如“层”、“样式”、“历史记录”等，可以通过“窗口”菜单来显示或隐藏它们。

第三部分：核心概念

在开始绘图前，必须理解 FW 的几个核心概念：

  1. 位图 vs. 矢量

    • 位图：由像素构成，放大后会失真，出现马赛克，适合处理照片等复杂图像，工具面板中的“位图”工具用于编辑位图。
    • 矢量：由数学公式定义的路径构成，无论如何放大都不会失真，适合绘制 Logo、图标等，工具面板中的“矢量”工具用于绘制矢量图形。

  2. 对象、层和帧

    • 对象：画布上的任何元素，一个矩形、一段文字、一张图片都是一个对象。
    • 层：像 Photoshop 中的图层一样，用于管理对象，不同的对象放在不同的层上，可以独立编辑，避免互相干扰，通过“层”面板来管理。
    • 帧：这是 FW 制作动画和原型的基础，每一帧都包含一个独立的画面，通过在不同的帧上放置不同的内容，并设置播放顺序，就可以制作出动画或原型页面切换效果，通过“帧”面板来管理。

  3. 元件

    • 将一个或多个对象组合成一个可重复使用的“符号”，这可以极大地提高工作效率,并减小文件体积。
    • 类型：
      • 图形：简单的静态图形。
      • 按钮：具有“弹起”、“滑过”、“按下”和“按下时滑过”四种状态的交互元件。
      • 动画：一个内置的小动画片段。

第四部分：基础操作教程

教程 1：创建一个简单的网页按钮

这个教程将带你体验 FW 的核心工作流：绘制 -> 样式化 -> 导出。

  1. 新建文档：文件 -> 新建，设置画布大小（如 200x80 像素）,背景色为透明或白色。
  2. 绘制形状：选择“矢量”工具栏中的矩形工具,在画布上拖动绘制一个矩形。
  3. 应用样式：
    • 在属性检查器中，为矩形设置一个填充颜色（如蓝色）和笔触颜色（如深蓝色）。
    • 为了让按钮有质感，可以添加一个效果，选中矩形，在属性检查器中点击“+”号，选择 斜角和浮雕 -> 内斜角，调整参数,你会看到按钮立刻有了立体感。
  4. 添加文字：选择“文本工具”，在按钮上输入文字，如“点击我”，在属性检查器中设置字体、大小和颜色。
  5. 导出为网页素材：
    • 点击 文件 -> 导出。
    • 在弹出的对话框中,保存位置为你的项目文件夹。
    • 导出：选择“仅图像”，格式选择 GIF 或 PNG32，文件名命名为 button.gif。
    • 确定,现在你就得到了一个可以直接用在网页上的按钮图片。

教程 2：制作一个简单的网页原型

这个教程将展示 FW 的核心优势——快速原型。

  1. 创建多页面：
    • 打开 帧 面板。
    • 点击面板右下角的“新建/复制帧”按钮，新建 3 帧，现在你有 3 个空白的“页面”。
    • 双击每一帧的名称，将其重命名为“首页”、“关于我们”、“联系方式”。
  2. 绘制线框图：
    • 在“首页”帧上，使用“矢量”工具绘制一个代表网页布局的线框图，一个大的矩形代表头部，几个小矩形代表导航菜单,一个长方形代表内容区。
    • 切换到“关于我们”帧，修改内容区的线框,代表不同的页面布局。
  3. 创建可点击的链接（切片）：
    • 切换回“首页”帧。
    • 选择“Web”工具栏中的切片工具。
    • 在导航菜单的“关于我们”文字上拖动，绘制一个矩形切片,你的画布上会覆盖上绿色的半透明切片网格。
    • 选中刚刚绘制的切片，在属性检查器的链接一栏中，输入 #about（这里的 是一个占位符，在实际原型中会指向目标页面）。
    • 在目标一栏中，选择 _self（在同一窗口打开）。
  4. 设置页面跳转：
    • 再次选中这个切片。
    • 在属性检查器中，找到并展开 “行为” 面板（通常在属性检查器下方）。
    • 点击 号，选择 导航 -> 转到 URL。
    • 在弹出的对话框中，URL 保持 #about 不变，然后在 “打开 URL 于” 的下拉菜单中，选择 “帧”。
    • 在右侧的列表中，选择目标帧 “关于我们”。
    • 点击 确定。
  5. 预览原型：
    • 按 F12 键，或在浏览器中预览导出的 HTML 文件。
    • 当你将鼠标移动到“关于我们”的切片上时，光标会变成手形，点击它，页面就会跳转到“关于我们”的线框图。

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

  • 快捷键：熟练使用快捷键能极大提升效率。
    • V - 选择工具
    • I - 钢笔工具
    • R - 矩形/椭圆工具
    • T - 文本工具
    • F8 - 将选中对象转换为元件
    • Ctrl+Z / Ctrl+Y - 撤销/重做
  • 样式：将常用的效果组合（如按钮的斜角、阴影）保存为“样式”，以后只需点击一下,就能快速应用到其他对象上。
  • 历史记录：窗口 -> 历史记录，记录了你最近的每一步操作，你可以点击某一步，然后点击面板底部的“重放”按钮，或者直接拖动步骤到“重放”按钮,实现批处理。

第六部分：资源与学习

由于 Fireworks 8 已经非常古老，官方资源已经很少,但社区资源依然宝贵。

  1. 经典教程文章：

    • 在网上搜索“Fireworks 8 教程 site:adobe.com”可以找到一些官方的 archived 教程。
    • 搜索“Fireworks 8 入门教程”、“Fireworks 8 原型制作”等关键词，可以找到很多国内博客和论坛（如蓝色理想、站酷）上的老手文章,质量很高。

  2. 视频教程：

    • 在 YouTube 上搜索 "Fireworks 8 tutorial"，有大量英文视频教程,从基础到进阶应有尽有。
    • 在国内的 Bilibili 等视频网站也能找到一些搬运或录制的中文教程。

  3. 社区与论坛：

    • Adobe Community：虽然 Fireworks 已停止更新,但仍有一个专门的板块。
    • 一些设计论坛的旧版块中，仍有关于 Fireworks 的讨论帖。

Fireworks 8 是一款设计理念超前的工具，虽然它的界面和功能在今天看来有些过时，但它所倡导的“为网页设计而生”的工作流、一体化的设计环境以及强大的原型能力，对今天的 UI/UX 设计师和前端开发者依然有重要的启发意义，希望这份教程能帮助你打开 Fireworks 8 的大门,领略它的魅力。