第一部分：Fireworks CS5 简介
1 Fireworks 是什么？
Fireworks 是一款“一切为网页而生”的图形软件，它的核心优势在于：
（图片来源网络，侵删）
- 位图与矢量完美结合：既能像 Photoshop 一样处理像素，又能像 Illustrator 一样绘制矢量图形。
- 强大的切片与导出功能：可以轻松将设计稿切割成网页所需的图片格式，并生成 HTML 和 CSS 代码，大大提高前端开发效率。
- 快速原型制作：通过页面状态、切片链接和热点，可以快速制作出可点击、可交互的网页原型。
- 组件功能：可以创建可复用的 UI 元素（如按钮、导航栏），修改一个即可更新所有实例。
2 为什么选择 Fireworks CS5？
- 轻量高效：相比 Photoshop 和 Illustrator，Fireworks 的体积小，启动快，对电脑配置要求较低。
- 工作流无缝：从设计到切图，再到生成代码，一气呵成，是网页设计师的利器。
- 社区资源丰富：尽管已停止更新，但网上仍有海量的教程、模板和插件可供学习使用。
3 界面初识
打开 Fireworks CS5，你会看到熟悉的 Adobe 软件风格界面，主要区域包括：
- 菜单栏：所有命令的集合。
- 工具栏：位于左侧，包含选择、绘制、颜色等工具。
- 属性检查器：位于下方，是工作的核心，会根据你选择的工具动态显示相关属性。
- 面板组：位于右侧，包含图层、样式、库等面板。
- 画布：中间的主要工作区域。
第二部分：核心功能详解
1 文件操作与画布设置
- 新建文件：
文件 > 新建，设置宽度、高度（通常为像素），分辨率（网页设计一般选 72 PPI），画布颜色（透明或白色）。 - 打开/保存：与其他软件类似，支持
.png（Fireworks 原生格式，保留所有编辑信息）、.jpg、.gif等格式。 - 画布大小：
修改 > 画布大小，可以调整画布尺寸，并选择“锚点”来决定从哪个方向扩展或裁剪画布。
2 工具详解
A. 选择工具组
- 选择工具：最常用的工具，用于选择和移动对象。
- 部分选定工具：用于选择矢量图形中的单个锚点或路径，进行精细调整。
- 缩放工具：放大或缩小画布视图。
- 手形工具：拖动画布以查看不同区域。
B. 位图工具组
- 选区工具：创建矩形、椭圆等规则选区。
- 套索工具：自由绘制不规则选区。
- 魔术棒工具：根据颜色相似度创建选区。
- “橡皮擦”工具：擦除像素，按住
Alt键可变为“恢复”工具。 - “模糊/锐化/涂抹”工具：用于修改像素的边缘效果。
- “减淡/加深/海绵”工具：用于调整像素的亮度和饱和度。
C. 矢量工具组
- 线条工具：绘制直线。
- 钢笔工具：绘制精确的贝塞尔曲线和复杂形状。
- 形状工具：包含矩形、圆角矩形、椭圆、多边形、星形等，按住
Shift键可绘制正圆、正方形。 - 文本工具：添加和编辑文字，双击文字块可以进入文本编辑模式。
D. Web 工具组
- 切片工具：这是 Fireworks 的灵魂功能之一，在画布上拖动，创建矩形切片区域，切片的主要目的是：
- 将大图分割成小图,加快网页加载速度。
- 为不同区域设置不同的导出格式（如 Logo 导出为 PNG，背景导出为 JPG）。
- 为区域添加链接或交互行为。
- 热点工具：为不规则形状或图片的某个区域添加链接，常用于地图或图片导航。
3 颜色、样式与效果
- 颜色面板：在这里选择填充色和描边色，可以吸取颜色、使用颜色选择器或管理色板。
- 样式面板：将你制作好的按钮、图标等效果保存为样式，一键应用到其他对象上，实现统一风格。
- 效果面板：为对象添加各种非破坏性效果，如阴影、发光、斜角等，可以随时修改或删除，非常方便。
4 图层、蒙版与混合模式
- 图层面板：与 Photoshop 类似，用于管理画布上的所有对象。强烈建议养成使用图层的习惯，这会让你的文件井井有条。
- 蒙版：
- 矢量蒙版：用矢量形状来遮位位图或矢量图。
- 位图蒙版：用位图（灰度图）来控制显示区域，黑色隐藏，白色显示，灰色半透明。
- 创建方法：选中对象和蒙版源，
修改 > 蒙版 > 组合为蒙版。
- 混合模式：控制图层或对象之间颜色如何混合，如“正片叠底”、“滤色”等，可以创造丰富的视觉效果。
第三部分：实战演练 - 设计一个简单的网页界面
假设我们要设计一个博客首页的头部。
步骤 1：新建画布并规划
文件 > 新建，宽度 1200px，高度 400px，分辨率 72 PPI。- 在右侧图层面板,双击“图层 1”，重命名为“背景”。
- 新建图层,命名为“Logo”。
- 再新建图层,命名为“导航栏”。
为什么分图层？ 为了方便管理和修改，每个元素放在自己的图层是专业设计师的习惯。
步骤 2：绘制背景
- 选中“背景”图层。
- 选择矩形工具,在画布上绘制一个与画布一样大的矩形。
- 在属性检查器中,设置填充色为你喜欢的颜色（如深蓝色
#1a237e）。 - 为背景添加一个微妙的渐变效果,选中矩形，在属性检查器的“填充类别”中选择“线性渐变”，调整颜色和角度。
步骤 3：制作 Logo
- 选中“Logo”图层。
- 使用文本工具,输入你的博客名称，选择合适的字体和大小（如白色，
Arial，36pt）。 - 使用矩形工具,在文字下方画一个细长的矩形作为装饰条，设置颜色为亮黄色
#ffd600。 - 将文字和矩形选中,
修改 > 组合，将它们组合成一个整体，将这个组合拖到左侧合适的位置。
步骤 4：制作导航栏
- 选中“导航栏”图层。
- 使用文本工具,输入导航文字，如“首页”、“、“文章”、“联系”。
- 选中所有导航文字,在属性检查器中调整文字间距，使其看起来更均匀。
- 将它们移动到画布右上角。
步骤 5：切片与导出
这是最关键的一步,我们要将设计稿变成网页可用的图片。
（图片来源网络，侵删）
- 显示切片：
视图 > 切片 > 显示切片，你会看到每个切片区域有一个绿色的边框。 - 使用切片工具：
- 选择切片工具,从 Logo 的左上角拖到右下角，为 Logo 创建一个切片。
- 同样,为导航栏的每个文字创建独立的切片，这样每个链接都可以单独设置。
- 为背景创建一个大切片。
- 设置切片导出选项：
- 选择一个切片（比如背景切片）。
- 在右侧的优化面板中，设置导出格式，对于复杂的背景，选择 JPEG，并调整品质。
- 选择 Logo 切片，优化格式选 PNG-24，因为它能很好地支持透明背景。
- 选择导航文字切片,优化格式选 PNG-32 或 JPEG，根据其背景复杂度决定。
- 导出：
文件 > 导出。- 选择一个文件夹,在“保存类型”中选择 HTML 和图像。
- 在弹出的“导出”对话框中，确保“将图像放入子文件夹”是勾选的，这样图片和 HTML 文件会分开放置，便于管理。
- 点击“导出”。
- 查看结果：导出后，你会得到一个
.html文件和一个images文件夹，用浏览器打开 HTML 文件，你就能看到你的设计稿已经被完美地切割并拼接出来了！
第四部分：进阶技巧
- 页面状态：在状态面板中，可以创建多个“页面状态”，用于制作按钮的“鼠标悬停”、“鼠标按下”等不同效果，或者制作多页面的交互原型。
- 共享层：在多个页面之间创建共享层，可以确保导航栏、页脚等公共元素在所有页面中保持一致。
- 批处理导出：
文件 > 批处理，可以对一个文件夹中的多个文件进行统一的格式和大小调整，非常高效。
第五部分：学习资源推荐
由于软件较老,资源需要耐心寻找。
-
官方文档 (英文)：
- Adobe 官方还保留着 Fireworks CS5 的帮助文档，是最权威的参考资料。
- 搜索 "Adobe Fireworks CS5 Help" 即可找到。
-
视频教程 (YouTube)：
- 搜索关键词: "Fireworks CS5 tutorial", "Adobe Fireworks web design", "Fireworks CS5 slice and export"。
- 推荐频道：很多设计师和培训机构上传了高质量的教程，如 "Tutvid", "SimpleTut" 等。
-
中文博客与论坛：
（图片来源网络，侵删）- 站酷、UI中国：搜索 "Fireworks"，可以找到一些历史文章和作品分享。
- 知乎：搜索相关问题，可以看到很多设计师分享的使用心得和工作流。
- 经典论坛：虽然有些沉寂，但 "蓝色理想" 等老牌设计论坛中仍有大量关于 Fireworks 的经典帖子值得一看。
Fireworks CS5 是一款过时的但依然非常强大的工具，掌握它，你将拥有一种独特的、高效的网页设计和原型制作能力，学习它的关键在于：
- 勤加练习：跟着教程做，然后自己尝试设计完整的网页界面。
- 理解核心逻辑：重点理解“位图/矢量”、“切片/热点”、“优化/导出”这几个核心概念。
- 善用图层：保持文件整洁是高效工作的前提。
希望这份详细的教程能帮助你顺利入门 Fireworks CS5！祝你学习愉快！
