Adobe Fireworks 事例教程：从零开始制作一个网页界面

本教程将引导您完成一个典型的 Fireworks 工作流程：创建画布 -> 绘制和编辑图形 -> 应用样式和效果 -> 切片与导出。

fireworks事例教程
（图片来源网络，侵删）

第一部分：基础知识准备

在开始之前，我们先了解几个 Fireworks 的核心概念：

  1. 画布：您的工作区域，就像一张画纸，您可以设置画布的大小、分辨率和背景色。
  2. 图层：像透明的醋酸纸一样堆叠在一起，使用图层可以方便地管理不同的设计元素（如背景、导航栏、内容区等）,避免互相干扰。
  3. 矢量图形：基于数学公式（点、线、曲线）创建的图形，无论放大多少倍，都保持清晰，不损失质量，适合绘制Logo、图标、按钮等。
  4. 位图图形：由像素点阵组成的图像，当放大时会看到马赛克现象,适合处理照片等复杂图像。
  5. 切片：这是 Fireworks 的王牌功能之一，您可以在设计稿上创建“切片”，将一个大图片分割成多个小图片，这样做的好处是：
    • 加快网页加载速度：浏览器可以并行加载多个小文件,而不是一个巨大的文件。
    • 创建交互效果：可以给切片添加“悬停”状态,实现鼠标移上去图片变化的按钮效果。
    • 导出为HTML和图片：Fireworks 可以自动将切片好的图片和相应的 HTML、CSS 代码一起导出,极大简化了前端开发流程。

第二部分：实战项目 - 制作一个简洁的产品展示网页

目标： 设计一个包含导航栏、主视觉图、产品展示区和页脚的网页界面。

步骤 1：新建画布

  1. 打开 Adobe Fireworks。
  2. 选择 文件 > 新建。
  3. 设置画布属性：
    • 宽度：1200 像素
    • 高度：2000 像素 (给足够空间放置所有内容)
    • 分辨率：72 PPI (这是网页设计的标准分辨率)
    • 画布颜色：白色
  4. 点击 确定,现在您有了一个干净的画布。

步骤 2：创建并使用图层

fireworks事例教程
（图片来源网络，侵删）

一个好的习惯是使用图层来组织设计。

  1. 在右侧的 图层 面板中，点击 新建图层 图标。
  2. 将新图层命名为 01 - 背景。
  3. 再次新建图层，命名为 02 - 导航栏。
  4. 继续新建图层：03 - 主视觉图、04 - 产品展示、05 - 页脚。
  5. 现在您的图层面板应该是这样的，并且可以随时点击眼睛图标来显示或隐藏某个图层,方便编辑。

步骤 3：绘制导航栏

  1. 在 图层 面板中，点击 02 - 导航栏 图层,使其成为当前可编辑图层。
  2. 选择左侧工具栏中的 矩形工具。
  3. 在画布顶部拖动鼠标，绘制一个长条矩形作为导航栏背景，您可以在右侧的 属性 面板中设置其填充色为深灰色（#333333）。
  4. 添加 Logo 和导航文字：
    • 选择 文本工具，在导航栏左侧点击，输入 "MyBrand" 作为 Logo。
    • 再次使用文本工具，在 Logo 右侧输入 "首页 | 产品 | 关于我们 | 联系我们"。
    • 在 属性 面板中，可以调整文字的字体、大小和颜色,使其与背景形成对比。

步骤 4：制作主视觉图

  1. 切换到 03 - 主视觉图 图层。
  2. 使用 矩形工具 绘制一个覆盖页面主要区域的矩形。
  3. 在 属性 面板中，为其填充一个渐变色，点击填充色旁边的色块，选择 渐变 > 线性，然后调整渐变的起始和结束颜色（从浅蓝色到深蓝色）。
  4. 添加图片和文字：
    • 将您准备好的产品图片拖入 Fireworks,并放置在主视觉图区域的中央。
    • 使用 文本工具 添加吸引人的标题和副标题，"探索未来科技" 和 "全新产品，震撼上市"。
    • 可以使用 钢笔工具 或 直线工具 绘制一些装饰性的线条或图形,增加设计感。

步骤 5：创建产品展示卡片

fireworks事例教程
（图片来源网络，侵删）

这是练习矢量图形和样式的绝佳机会。

  1. 切换到 04 - 产品展示 图层。
  2. 绘制一个产品卡片：
    • 使用 圆角矩形工具 绘制一个圆角矩形作为卡片背景。
    • 在卡片内部,再绘制一个稍小的矩形作为图片占位符。
    • 使用 文本工具 添加产品名称和简短描述。
  3. 复制卡片：按住 Alt 键拖动您刚做好的卡片，可以快速复制一个副本，然后调整位置,形成多个产品卡片并排展示的布局。

步骤 6：应用效果和样式

Fireworks 的效果和样式能让您的设计快速出彩。

  1. 添加阴影：选中一个产品卡片，在 属性 面板中找到 效果 选项（通常是一个 fx 图标），点击 添加效果 > 阴影和光晕 > 投影，调整参数，为卡片添加一个柔和的投影,使其更有立体感。
  2. 使用样式面板：
    • 选中一个已经添加了投影和渐变填充的卡片。
    • 在右侧的 样式 面板中，点击 新建样式 图标,将其保存为一个样式。
    • 您只需点击其他卡片，然后点击这个新样式，就能一键应用相同的外观,非常高效。

步骤 7：添加页脚

  1. 切换到 05 - 页脚 图层。
  2. 使用 矩形工具 在页面底部绘制一个页脚背景,并填充颜色。
  3. 使用 文本工具 添加版权信息、联系方式等。

至此,您的设计稿基本完成！

第三部分：切片与导出

这是将设计稿变为可用网页资源的关键一步。

步骤 8：创建切片

  1. 选择 切片工具（它看起来像一个带小刀的矩形）。
  2. 在您的导航栏上，沿着每个导航文字（如“首页”、“产品”）的边缘绘制切片，注意，每个独立的交互元素都应该有自己独立的切片。
  3. 对主视觉图、每个产品卡片等需要独立导出的部分也进行切片。

步骤 9：优化和导出

  1. 按 Ctrl+Shift+X (Windows) 或 Cmd+Shift+X (Mac) 快捷键，打开 导出向导。
  2. 选择导出格式：
    • 在左侧选择 图像，然后在右侧选择 GIF 适合颜色较少的图形（如按钮、图标）。
    • 选择 JPEG 适合颜色丰富的照片（如主视觉图）。
    • 选择 PNG 是一个很好的通用选择，支持透明背景,且质量高。
  3. 设置切片：确保在底部的 切片 选项中，选择 导出切片。
  4. 点击 导出。
  5. 在弹出的 导出 对话框中：
    • 保存类型：选择 HTML 和图像。
    • HTML：可以选择 Dreamweaver 或 导出到 Dreamweaver，这样生成的代码与 Adobe Dreamweaver 能更好地兼容。
    • 切片：确保选择 导出切片。
    • 放置：选择 导出到新文件夹，这样会创建一个包含所有图片和 index.html 文件的新文件夹。
  6. 点击 保存。

恭喜！ 您打开导出的文件夹，会看到一个 index.html 文件和一堆图片文件，用浏览器打开 index.html，您就能看到一个由 Fireworks 生成的、包含您所有设计元素的网页框架了！

第四部分：进阶技巧

  • 按钮元件：如果您想制作一个有“悬停”和“点击”状态的按钮，可以使用 元件 功能，创建一个按钮图形，然后将其转换为 按钮 元件，在 元件 面板中，您可以分别设计 滑过 和 按下 状态，Fireworks 会自动生成相应的 JavaScript 代码。
  • 9切片缩放：对于需要拉伸但又要保持边缘不变形的图形（如对话框背景），可以使用 9切片缩放 工具，将图形划分为9个区域，定义哪些区域可以拉伸,哪些区域不能。
  • 共享层：如果您想将某个图层（比如一个通用的导航栏）在多个页面设计中共享，可以使用 共享层 功能。

通过这个实例，您已经走过了 Fireworks 的核心工作流程： 构思 -> 设计 -> 切片 -> 导出

虽然 Adobe 已停止更新 Fireworks，但它作为一个专注于网页原型设计的工具，其切片、样式和快速导出功能至今仍有很高的学习价值，掌握这些技能，不仅能帮助您高效地完成视觉设计,还能更好地与前端开发人员沟通。