Fireworks 8 完整入门教程
第一部分：初识 Fireworks 8
什么是 Fireworks 8？
（图片来源网络，侵删）
Fireworks 8 是 Macromedia（后被 Adobe 收购）开发的一款图形设计软件，它被定位为“为 Web 而生的图形工具”,核心优势在于：
- 一体化设计： 集位图编辑（类似 Photoshop）、矢量绘图（类似 Illustrator）和 Web 切图/导出于一体。
- 高效原型： 可以轻松创建带有交互效果（如切片、按钮、弹出菜单）的网页原型。
- 轻量快捷： 相比 Photoshop 和 Illustrator 的庞大体型，Fireworks 运行更快，资源占用更少,非常适合快速迭代设计。
为什么学习 Fireworks 8？
- 怀旧与经典： 许多老牌 Web 设计师和前端工程师都使用过它,了解它有助于理解历史。
- 特定场景高效： 对于快速制作网站 UI、App 界面原型、图标和广告条，Fireworks 8 至今依然非常高效。
- 入门图形软件： 对于想学习设计但不想一开始就面对复杂软件的新手，Fireworks 是一个很好的起点。
第二部分：界面与核心概念
熟悉工作区
启动 Fireworks 8 后,你会看到以下主要区域：
（图片来源网络，侵删）
- 菜单栏： 所有命令的集合，如文件、编辑、视图、选择、修改、文本、滤镜、命令、窗口、帮助。
- 主要工具栏： 包含最常用的操作，如新建、打开、保存、打印、撤销、重做、导入、导出等。
- 工具面板： 位于左侧，是设计的核心，包含了所有绘图和编辑工具,我们将重点介绍它。
- 属性检查器： 位于底部，是“智能”面板，当你选中画布上的任何对象时，它会自动显示该对象可编辑的属性（如颜色、大小、效果等）。
- 其他面板： 位于右侧，如“层”、“帧”、“样式”、“库”等,用于管理和组织设计元素。
核心概念
- 位图 vs. 矢量：
- 位图： 由像素组成，放大后会失真，出现马赛克，适合处理照片、复杂图像，工具：钢笔、选择、橡皮擦、图章、模糊、锐化等。
- 矢量： 由数学公式定义的路径组成，无论如何放大都保持清晰，适合绘制图标、Logo、按钮，工具：直线、矩形、圆形、多边形、钢笔、自由变形等。
- 层： 就像 Photoshop 里的图层，用于堆叠和管理不同的设计元素,方便编辑。
- 帧： 用于创建动画，每一帧都是画面的一个瞬间,通过连续播放帧形成动画。
- 切片： Fireworks 的灵魂功能，它将一张大图切割成多个小区域，并可以导出为独立的 HTML 文件和图片,实现网页的快速布局和加载优化。
第三部分：核心工具详解（工具面板）
选择工具组
- 指针工具 (V): 选择和移动对象。
- 选择后方对象 (C): 当对象重叠时,可以点击选择被上层挡住的下层对象。
- 部分选定工具: 选择矢量对象的“锚点”,通过拖动锚点来改变形状。
位图工具组
- 选取框工具: 创建矩形选区。
- 椭圆选取框工具: 创建椭圆选区。
- 套索工具: 自由绘制不规则选区。
- 多边形套索工具: 通过点击创建多边形选区。
- 魔术棒工具: 根据颜色相似度自动创建选区。
- 裁剪工具: 裁剪画布大小。
- 切片工具: 创建切片区域（Web 导出用）。
- 切片选择工具: 选择和编辑已创建的切片。
- 钢笔工具: 绘制精确的矢量路径,也可以创建位图选区。
- 矢量路径工具: 编辑位图选区的边缘。
- 视图缩放工具: 放大和缩小画布视图。
- 手形工具: 平移画布。
- 刷子工具: 用自定义的笔刷绘制位图。
- 铅笔工具: 用细线绘制位图。
- 橡皮擦工具: 擦除像素。
- 橡皮图章工具: 复制图像的一部分到另一处。
- 模糊/锐化/涂抹工具: 分别用于模糊、锐化和涂抹图像。
- 减淡/加深/海绵工具: 分别用于提亮、加暗和调整图像饱和度。
矢量工具组
- 直线工具: 绘制直线。
- 形状工具组： 矩形、圆角矩形、椭圆、多边形、星形。
- 钢笔工具: 绘制自定义矢量形状。
- 矢量路径工具: 编辑矢量路径的锚点和方向线。
- 重定向路径工具: 改变矢量路径的形状。
- 自由变形工具: 自由拖动矢量路径的任何部分来改变形状。
- 区域变形工具: 推或拉矢量路径的特定区域。
Web 工具组
- 热点工具: 为图片的某个区域创建可点击的链接区域（用于图像映射）。
- 切片工具: 切割图片。
- 切片选择工具: 选择切片。
- 不透明度工具: 创建渐变透明的效果（常用于制作按钮高光）。
颜色工具组
- 笔触颜色: 设置线条或路径的颜色。
- 填充颜色: 设置形状或路径内部的颜色。
- 默认笔触/填充颜色: 恢复为默认的黑白设置。
- 无笔触/填充颜色: 去掉线条或填充。
第四部分：实战演练
制作一个简单的 Web 按钮
- 新建文档：
文件->新建，设置一个合适的大小，如 200x80 像素,背景色为白色。 - 绘制形状： 选择 矩形工具，在画布上绘制一个矩形，在 属性检查器 中，设置圆角半径为 10。
- 添加样式：
- 在 属性检查器 中，为矩形选择一个漂亮的填充颜色（如蓝色）。
- 为矩形添加一个 内发光 效果,让按钮看起来有立体感。
- 添加文字： 选择 文本工具，在按钮上输入“点击我”，在 属性检查器 中，设置字体、大小和颜色,使其与背景形成对比。
- 导出：
文件->导出。- 在弹出的窗口中，选择 格式 为
HTML 和图像。 - 点击
导出，Fireworks 会自动生成一个 HTML 文件和一个包含切片图片的文件夹，用浏览器打开 HTML 文件,你就能看到一个完整的按钮。
创建一个带有弹出菜单的导航栏
- 绘制导航栏： 使用矩形工具和文本工具,绘制好几个并排的导航按钮。
- 创建切片： 选择 切片工具，在每个导航按钮上绘制一个矩形切片,确保每个按钮都被一个切片覆盖。
- 设置弹出菜单：
- 使用 指针工具,点击第一个按钮上的切片。
- 在 属性检查器 的最下方，找到并点击 号旁边的
添加弹出菜单。 - 此时会弹出
弹出菜单编辑器，你可以添加菜单项、设置链接、设置样式（字体、颜色、效果等）。 - 设置完成后，点击
完成。
- 导出： 同样地，
文件->导出，选择HTML 和图像格式，导出的 HTML 文件在浏览器中打开时，鼠标悬停在第一个按钮上,就会显示你设置的弹出菜单。
第五部分：高级技巧与资源
样式
- 创建样式： 选中一个已经设计好的按钮（包括它的所有效果和属性），然后在 样式 面板中点击
新建样式按钮。 - 应用样式： 之后，你只需绘制一个新的矩形，再在样式面板中点击你创建的样式，新矩形就会瞬间拥有和原按钮一模一样的外观,这对于保持设计一致性至关重要。
滤镜
- Fireworks 8 自带了许多强大的滤镜，如模糊、锐化、扭曲、阴影等，选中对象后，可以在
滤镜菜单或属性检查器中找到它们,实时预览效果。
自动化
命令菜单下包含了一些可以自动执行任务的脚本，比如批量缩放图片、批量导出等,可以极大提高工作效率。
学习资源
由于 Fireworks 8 已经过时，现代的在线教程很少,最好的资源是：
- 官方帮助文档： 安装目录下有
Fireworks 8 Help.pdf,这是最权威的参考资料。 - YouTube/Bilibili： 搜索 "Fireworks 8 tutorial" 或 "Fireworks 8 教程",可以找到大量由早期用户上传的视频教程。
- 设计社区： 在一些老牌的设计论坛或博客（如 Smashing Magazine 的早期文章）中，可以找到关于 Fireworks 的技巧和文章。
第六部分：现代替代品
虽然 Fireworks 8 很经典，但如果你要进行现代设计,以下工具是更好的选择：
- UI/UX 设计与原型：
- Figma: 当前最主流的在线协作设计工具，功能强大,社区资源丰富。
- Adobe XD: Adobe 出品的免费设计工具，与 Photoshop/Illustrator 协作性好。
- Sketch: Mac 平台的老牌王者,插件生态非常成熟。
- 图形编辑：
- Adobe Photoshop: 位图编辑的行业标准。
- Adobe Illustrator: 矢量绘图的行业标准。
- Affinity Designer: 性价比极高的替代品，支持 Windows, Mac, iPad。
Fireworks 8 是一款划时代的 Web 设计工具，通过本教程，你已经掌握了它的核心界面、工具和基本工作流程，虽然它已被时代淘汰，但学习它的设计思想和高效的工作方式，对于理解 Web 设计的发展历程和提升设计效率依然大有裨益,祝你学习愉快！
