Adobe Fireworks CS6 全方位教程
Fireworks CS6 是 Adobe 旗下一款经典的“小而美”的设计软件，它集位图编辑、矢量绘图和网页原型设计于一体，是网页设计师和UI/UX设计师的利器，虽然现在官方已停止更新，但其高效的工作流程和轻量级的特性，至今仍被许多设计师喜爱。
（图片来源网络，侵删）
第一部分：入门基础
什么是 Fireworks？为什么选择它？
- 定位：专为屏幕设计而生，它不像 Photoshop 那样专注于照片处理，也不像 Illustrator 那样专注于复杂插画，而是专注于为网页、移动应用创建视觉元素和交互原型。
- 核心优势：
- 一体化工作流：在一个软件里完成从图标设计、切片导出到制作可点击原型的所有工作。
- 轻量高效：运行速度快，占用资源少，非常适合快速出稿。
- 强大的切片和导出功能：可以精确控制每个元素的导出格式、质量和命名，是前端开发人员的最爱。
- 样式和符号：可以创建可复用的设计元素，大大提高效率。
界面初探
启动 Fireworks CS6 后，你会看到熟悉的 Adobe 风格界面，主要由以下几个部分组成：
- 菜单栏：所有命令的入口。
- 主工具栏：包含最常用的操作，如新建、打开、保存、打印、撤销等。
- 工具面板：位于左侧，是所有绘图和编辑工具的集合。
- 属性检查器：位于下方，当选中某个对象时，这里会显示并允许你修改该对象的所有属性（如颜色、边框、效果等）。
- 文档窗口：中间的画布区域，是你进行设计的地方。
- 面板组：位于右侧，包含图层、样式、库、历史记录等面板，可以自由折叠和组合。
第二部分：核心工具详解
Fireworks 的工具面板分为多个类别，我们重点掌握最核心的几个。
选择工具
- 指针工具 (V)：选择和移动对象，按住
Shift可以多选。 - 选择后方对象 (Ctrl+点击)：当对象重叠时，可以选中被上层对象遮挡的下层对象。
- 部分选定工具 (A)：选择矢量对象的某个锚点或路径段，进行精细调整。
位图工具
用于处理像素图像,如照片、复杂纹理等。
- 选区工具：
- 矩形选框 和 椭圆选框：创建规则选区。
- 套索工具 和 多边形套索工具：创建不规则选区。
- 魔术棒工具：根据颜色相似度创建选区。
- 位图绘图工具：
- 刷子工具：自由绘制像素线条。
- 铅笔工具：绘制硬边线条。
- 橡皮擦工具：擦除像素。
- 位图修饰工具：
- 模糊/锐化/涂抹工具：对像素进行模糊、锐化或涂抹效果。
- 减淡/加深/海绵工具：提亮、变暗或调整像素饱和度。
矢量工具
用于创建无限缩放的图形,如 Logo、图标、按钮等。
（图片来源网络，侵删）
- 直线工具：绘制直线。
- 形状工具：
- 矩形工具、圆角矩形工具、椭圆工具、多边形工具：按住
Shift可以绘制正方形、正圆等。
- 矩形工具、圆角矩形工具、椭圆工具、多边形工具：按住
- 钢笔工具：矢量绘图的核心，通过点击创建锚点，拖动控制柄来绘制平滑曲线，熟练掌握钢笔工具是成为高手的关键。
- 文本工具：在画布上添加文字，可以设置字体、大小、颜色、间距等，文字在 Fireworks 中是可编辑的矢量对象。
Web 工具
Fireworks 的特色，用于准备网页素材。
- 切片工具：最重要的工具之一，在画布上绘制矩形区域，将大图切割成多个小图，导出时，每个切片可以单独设置格式和优化。
- 切片选择工具：选择和编辑已创建的切片。
- 热点工具：为图片中不规则的区域（如圆形按钮）创建可点击的链接区域，常用于图片地图。
第三部分：核心功能与工作流
图层
- 作用：管理画布上的所有对象，就像 Photoshop 中的图层一样，让设计井井有条。
- 操作：可以新建、删除、显示/隐藏、锁定图层，以及调整图层的上下顺序来控制对象的堆叠关系。
符号
- 作用：将常用元素（如按钮、图标、Logo）定义为“符号”，修改符号后，画布上所有该符号的实例都会自动更新，极大地提高了修改效率。
- 类型：
- 图形符号：静态的图形元素。
- 按钮符号：可以定义四种状态（弹起、滑过、按下、按下时滑过），用于制作交互效果。
- 操作：选中对象 -> 右键 -> 转换为符号，双击符号实例可以进入“符号编辑模式”。
样式
- 作用：将一组属性（如填充色、描边、阴影、特效等）保存为一个“样式”，之后可以一键将这个样式应用到其他对象上，实现设计风格的统一。
- 操作：选中一个设置好效果的对象 -> 在 “样式”面板 中点击 “新建样式”，需要时，只需选中其他对象，点击该样式即可。
切片与导出
这是 Fireworks 的核心工作流，也是它备受前端开发青睐的原因。
-
步骤 1：切片
- 完成你的设计稿。
- 使用 “切片工具” 在需要导出的部分（如背景图、按钮图标）绘制切片，建议对齐像素，使用
Alt键可以从中心绘制。 - 使用 “切片选择工具” 点击切片，在 “属性检查器” 中为每个切片命名，并选择导出格式（如
.jpg、.png、.gif）和优化设置。
-
步骤 2：导出
（图片来源网络，侵删）- 点击菜单 文件 > 导出。
- 在弹出的对话框中,选择一个保存位置。
- 导出区域：选择 “切片”。
- ：选择 “包括无切片区域” 或 “仅导出切片”。
- 设置：确保 HTML 选项被勾选，可以选择生成 HTML 表格或 CSS 布局。
- 点击 “导出”。
-
结果：Fireworks 会生成一个文件夹，里面包含所有切好的图片文件，以及一个 HTML 文件，这个 HTML 文件已经用表格或 CSS 将图片拼接好了，可以直接在浏览器中查看效果，大大减少了前端的工作量。
第四部分：实战演练——制作一个简单的网页按钮
- 新建文档：
Ctrl + N，设置一个合适的大小，300x200 像素，背景色为白色。 - 绘制形状：选择 圆角矩形工具，在画布上绘制一个圆角矩形。
- 添加文字：选择 文本工具，在矩形上输入“点击我”。
- 应用样式：在 “样式”面板 中，选择一个预设的按钮样式，或者手动在 “属性检查器” 中为矩形和文字添加颜色、阴影、内发光等效果。
- 创建按钮符号：同时选中矩形和文字，右键点击，选择 “转换为符号”，类型选择 “按钮”。
- 定义状态：在弹出的按钮编辑器中，你会看到四个状态帧。
- 弹起：这是默认状态，不做修改。
- 滑过：点击“滑过”帧，点击“复制弹起图形”，然后修改颜色或添加一个高光效果，作为鼠标悬停时的样式。
- 按下：同理，复制并修改，作为鼠标点击时的样式。
- 按下时滑过：这个状态比较特殊，通常可以保持与“按下”状态一致或不做设置。
- 预览效果：按
Ctrl + Alt + P打开预览模式，将鼠标悬停在按钮上，你就能看到交互效果了！ - 导出：使用切片工具框住整个按钮，命名为
btn，格式选择.png，然后按Ctrl + Shift + X快速导出，查看生成的图片和 HTML。
第五部分：学习资源与技巧
推荐资源
- Adobe 官方帮助文档：最权威的资料，包含所有工具和功能的详细说明。
- 视频教程平台：
- B站 (Bilibili)：搜索“Fireworks 教程”、“Fireworks 入门”，有大量中文免费视频。
- YouTube：搜索 "Fireworks CS6 Tutorial"，有大量高质量的英文教程。
- 设计社区：
- 站酷、UI中国：搜索 Fireworks 相关的作品和文章，学习高阶技巧。
- Lynda.com (现为 LinkedIn Learning)：有系统性的付费课程，质量很高。
实用技巧
- 快捷键是你的朋友：
V(选择)、T(文字)、B(位图)、U(矢量)、Ctrl + D(复制)、Ctrl + Z(撤销) 等，熟悉快捷键能极大提升效率。 - 使用网格和辅助线：
Ctrl + '打开网格，Ctrl + ;打开辅助线，帮助你对齐元素，确保设计稿的精确性。 - 善用“历史记录”面板：Fireworks 会记录你的每一步操作，如果误删了，可以在这里找到并恢复。
- 保持文件整洁：及时命名图层和符号，删除多余的元素，这会让你的文件易于管理和修改。
Fireworks CS6 是一款过时但依然强大的工具，它的核心价值在于 “快速原型” 和 “高效切图”，虽然现在市面上有 Figma、Sketch、Adobe XD 等更现代的工具，但 Fireworks 的工作流和设计理念依然值得学习。
掌握 Fireworks，不仅能让你多一项设计技能，更能让你深刻理解网页设计背后的逻辑，这对于成为一名优秀的网页或 UI 设计师非常有帮助，祝你学习愉快！
