- 第一部分：认识 Fireworks 8
- 它是什么？用它来做什么？
- 界面布局介绍
- 第二部分：核心概念与基础操作
- 文档设置
- 矢量图 vs. 位图
- 图层
- 帧（动画核心）
- 第三部分：实战演练——制作一个简单的网页按钮
- 创建文档
- 绘制矢量形状
- 应用样式与颜色
- 添加文字
- 导出成品
- 第四部分：进阶功能简介
- 切片与热点（网页交互核心）
- 制作简单动画
- 样式与蒙版
- 第五部分：学习资源与总结
第一部分：认识 Fireworks 8
1 Fireworks 8 是什么？用它来做什么？
Fireworks 被誉为“网页三剑客”（Dreamweaver, Fireworks, Flash）中的一员，它的定位是：
- 网页图形设计：快速创建网页上需要的各种视觉元素，如 Logo、按钮、图标、Banner、导航栏等。
- 网页原型制作：将多个设计元素组合在一起，模拟出整个网页的布局和交互效果，用于向客户或开发人员展示设计思路。
- 图像优化：内置强大的图像优化功能，可以在保证质量的前提下，将图片文件体积降到最小，非常适合网页加载。
Fireworks 就是网页设计师的“瑞士军刀”，集设计、切图、原型于一体。
2 界面布局介绍
启动 Fireworks 8 后，你会看到一个熟悉的 Adobe 风格界面，主要由以下几部分组成：
- 菜单栏：位于顶部，包含所有命令（文件、编辑、视图、选择、修改、文本、滤镜、命令、窗口、帮助）。
- 主工具栏：位于菜单栏下方，包含最常用的操作，如新建、打开、保存、撤销、重做、预览模式等。
- 工具面板：位于左侧，是核心操作区域，包含了所有绘图、编辑、选择工具。
- 选择工具：指针、部分选定（用于选择矢量图的锚点）。
- 位图工具：选区、橡皮擦、铅笔、刷子、钢笔、文本等。
- 矢量工具：矩形、圆形、多边形、星形、直线、钢笔等。
- Web工具：切片、热点、矩形热点、圆形热点。
- 属性检查器：位于界面底部或右侧，这是最重要的面板，当选中画布上的任何对象时，这里会显示该对象的所有可编辑属性（如位置、大小、颜色、边框、文字样式等）。
- 其他浮动面板：
- 图层：管理画布上的所有对象，类似 Photoshop 的图层。
- 帧：用于制作动画，每一帧都是一个独立的画面。
- 样式：可以保存常用的颜色、边框、效果组合，一键应用到其他对象上。
- 库：存放可以重复使用的元素，如图形、按钮等。
第二部分：核心概念与基础操作
1 文档设置
在开始任何设计前,首先要设置好画布。
- 文件 -> 新建 (Ctrl+N)
- 在弹出的对话框中设置：
- 宽度/高度：根据你的设计需求设定，例如设计一个 1920px 宽的网页 Banner。
- 分辨率：网页设计通常设置为 72 像素/英寸，印刷品则需要 300。
- 画布颜色：选择背景色，通常是白色或透明。
2 矢量图 vs. 位图
理解这一点至关重要,它决定了你的工作方式。
-
位图：由像素点组成，放大后会失真，出现马赛克，Fireworks 中的照片、复杂背景都是位图。
- 工具：选区工具、橡皮擦、铅笔、刷子、图章等。
- 编辑：直接修改像素。
-
矢量图：基于数学公式（点、线、曲线）绘制，无限放大也不会失真，Logo、图标、按钮通常用矢量图制作。
- 工具：矩形、圆形、钢笔、文本等。
- 编辑：通过修改锚点和路径来改变形状。
小技巧：按住 Shift 键可以绘制正方形、正圆等规则图形。
3 图层
图层是 Fireworks 的骨架，它让你能够将不同的元素（如背景、图片、文字、按钮）分层管理，互不干扰。
- 新建图层：点击图层面板下方的“新建/复制图层”按钮。
- 重命名图层：双击图层名称。
- 显示/隐藏：点击图层前的眼睛图标。
- 锁定图层：点击图层前的铅笔图标，锁定后无法编辑该图层内容。
- 调整层级：拖动图层可以改变其上下顺序，上层的元素会遮挡下层的。
好习惯：给每个图层起一个有意义的名字，如“背景层”、“Logo层”、“按钮层”。
4 帧
帧是制作动画的基础,一个动画就是由多帧画面连续播放形成的。
- 帧面板：默认在右下角。
- 添加帧：点击面板下方的“新建/复制帧”。
- 播放动画：点击面板下方的播放按钮。
- 帧延迟：双击帧下方的时间数字（如 7），可以设置该帧的显示时间（单位：百分之一秒）。
第三部分：实战演练——制作一个简单的网页按钮
让我们来亲手制作一个有渐变和阴影效果的蓝色按钮。
目标： 创建一个“提交”按钮。
步骤：
-
新建文档
文件->新建，设置宽度 200px，高度 60px，分辨率 72，背景色透明。
-
绘制按钮形状
- 在左侧工具栏选择 矩形工具。
- 在画布上拖动鼠标,画出一个矩形。
- 在底部的 属性检查器 中：
- 设置 宽 为 180px，高 为 40px。
- 设置 填充颜色 为蓝色（如
#0066CC）。 - 设置 笔触 为 无。
-
添加圆角
- 确保矩形被选中。
- 在属性检查器中,找到 矩形圆度 的设置（通常是一个带小方块的图标）。
- 将数值调整为
20，你会看到四个角都变圆了。
-
添加渐变效果
- 选中矩形。
- 在属性检查器的 填充类别 下拉菜单中，选择 线性渐变。
- 你会看到颜色条,默认是黑白渐变，点击色标可以修改颜色。
- 将左侧色标改为
#0099FF，右侧色标改为#0066CC。 - 拖动渐变条的方向,让颜色从上到下渐变。
-
添加阴影效果
- 选中矩形。
- 在属性检查器中,点击 效果 旁边的 号。
- 选择 阴影和光晕 -> 投影。
- 在弹出的设置面板中,调整不透明度、距离、柔和度等参数，点击“确定”，你的按钮立刻就有了立体感。
-
添加文字
- 在左侧工具栏选择 文本工具。
- 在按钮上点击,输入文字“提交”。
- 在属性检查器中设置文字样式：
- 选择一种粗体字体（如
Arial Black或微软雅黑）。 - 调整字号（如
18）。 - 设置文字颜色为白色 (
#FFFFFF)。 - 可以调整字间距,让文字居中于按钮。
- 选择一种粗体字体（如
-
导出按钮
- 按住
Ctrl键，同时选中按钮的矩形框和文字。 文件->导出。- 在弹出的窗口中：
- 保存类型：选择 PNG 可移植网络图形格式，PNG 支持透明背景，非常适合网页元素。
- 优化：可以预设为“网络-精确”，或手动调整颜色数量以减小文件体积。
- 点击“保存”。
- 按住
恭喜！你已经成功制作并导出了你的第一个 Fireworks 作品。
第四部分：进阶功能简介
1 切片与热点
这是 Fireworks 用于网页开发的核心功能。
-
切片：
- 作用：将一张大的设计稿切割成多个小图，并生成对应的 HTML 表格代码。
- 优点：
- 优化加载：用户只看到他需要加载的部分，加快页面加载速度。
- 交互：可以为不同的切片添加不同的链接和悬停效果。
- 使用：选择 Web 工具栏中的 切片工具，在设计稿上拖动，画出切片区域，导出时会自动处理。
-
热点：
- 作用：在一张图片上定义可点击的链接区域，但不会切割图片。
- 使用：选择 矩形热点 或 圆形热点 工具，在图片上绘制一个热区，然后在属性检查器中设置其链接地址。
2 制作简单动画
让我们让刚才的按钮有一个被按下的效果。
- 准备素材：制作两个按钮状态，一个“正常”状态，一个“按下”状态（可以复制一个，稍微缩小一点并改变颜色）。
- 切换到帧面板：
窗口->帧。 - 新建帧：点击“新建帧”按钮，创建第二帧。
- 放置元素：在第二帧中，删除“正常”状态的按钮，放置“按下”状态的按钮。
- 设置动画：回到第一帧，在属性检查器的 自动形状 部分（如果对象是矢量图形），可以找到 动画 选项。
- 选择 自动动画。
- 设置 帧 为
2。 - 设置 移动 为
0（我们不希望按钮移动）。 - 设置 方向 为
0（不重要）。 - 设置 缩放 为
90%（按下时缩小）。 - 点击“确定”。
- 播放预览：点击帧面板的播放按钮，你会看到按钮在两帧之间缩放，模拟出按下效果。
3 样式
如果你有很多按钮需要保持风格一致,样式面板非常有用。
- 设计好一个按钮。
- 选中这个按钮的所有部分。
- 将其拖动到 样式 面板中，会弹出一个对话框，为新样式命名。
- 以后任何时候,只需在样式面板中点击这个样式，就能一键应用到新的对象上。
第五部分：学习资源与总结
1 学习资源
由于 Fireworks 8 比较古老，现代的教程很少，但经典永不过时。
- 官方帮助文档：安装 Fireworks 时自带的帮助文件是最好的入门资料，按
F1即可调出。 - YouTube/Bilibili：搜索 "Fireworks 8 tutorial" 或 "Fireworks 8 教程"，能找到很多老外或国内早期设计师录制的视频教程。
- 设计论坛：站酷、UI 中国等社区搜索关键词，能找到一些历史文章和经验分享。
2 总结
Fireworks 8 虽然年代久远，但它所倡导的设计-原型-开发工作流程，以及矢量与位图结合、图层管理、切片导出等核心思想，至今仍是网页设计和 UI 设计的基础，学习 Fireworks 8 不仅能让你掌握一款经典的工具，更能为你理解和使用更现代的设计软件打下坚实的基础。
希望这份教程能帮助你顺利入门 Fireworks 8！多动手实践，你会发现它的强大之处。
