Adobe Fireworks CS5 全方位教程
Fireworks CS5 是 Adobe 旗下一款功能强大的图形设计软件，特别擅长于网页界面设计、图标制作和交互原型，它结合了位图和矢量编辑功能，被誉为“网页设计师的瑞士军刀”。
（图片来源网络，侵删）
第一部分：入门基础
在开始创作之前,我们需要先了解软件的基本构成。
界面概览
启动 Fireworks CS5 后,您会看到以下主要区域：
- 菜单栏: 包含所有命令，如文件、编辑、视图、选择、修改、文本、滤镜、命令、窗口和帮助。
- 工具栏: 位于左侧，包含所有用于创建和编辑图形的工具，如选择、位图、矢量、文本、颜色、区域选择等。
- 属性检查器: 位于下方，这是最核心的面板，当选中画布上的任何对象时，这里会显示该对象的可编辑属性（如位置、大小、颜色、效果等）。
- 面板组: 位于右侧，用于管理图层、样式、颜色、库等资源，常用的面板包括：
- 图层: 管理画布上的所有元素，类似 Photoshop 的图层。
- 样式: 保存常用的颜色、边框、效果组合,一键应用。
- 库: 存储可重复使用的图形元件。
- 历史记录: 记录你的每一步操作,可以撤销到任意步骤。
- 颜色: 选择和管理颜色，包括色板、颜色选择器和样本。
文档基础
- 新建文档:
文件 > 新建，在这里设置画布尺寸（宽度和高度）、分辨率（网页设计通常为 72 PPI）和画布颜色（通常是白色或透明）。 - 保存文档:
- .png (Fireworks 原生格式): 保存所有图层、样式、切片和交互信息,方便后续编辑。
- .jpg / .gif: 用于导出最终的图片。
- .html: 用于导出包含切片和交互效果的网页原型。
- 画布大小:
修改 > 画布大小,可以随时调整画布尺寸。
第二部分：核心工具详解
Fireworks 的强大之处在于其工具的灵活性和针对性。
矢量工具
矢量工具用于创建可无限缩放而不失真的图形，适合制作 Logo、图标和界面元素。
（图片来源网络，侵删）
- 选择工具: 选择和移动对象，按住
Shift可以多选。 - 钢笔工具: 绘制精确的路径和形状，点击创建锚点,点击并拖动可以创建带有方向线的曲线锚点。
- 矩形/椭圆/多边形工具: 快速创建基本形状，按住
Shift可以绘制正方形、正圆和正多边形。 - 直线工具: 绘制直线。
- 路径修改工具:
- 部分选择工具: 用于选择和编辑路径上的单个锚点，调整其位置和方向线,从而改变曲线形状。
- 矢量路径工具: 用于添加、删除或转换锚点。
- 区域变形工具: 像橡皮泥一样,直接拖动路径来改变其形状。
实践: 尝试用钢笔工具绘制一个简单的苹果图标。
位图工具
位图工具用于处理像素，适合照片修饰、绘制纹理或进行像素级绘画。
- 选区工具:
- 选区框: 创建矩形选区。
- 椭圆选区: 创建椭圆选区。
- 套索工具: 自由绘制不规则选区。
- 多边形套索: 通过点击创建多边形选区。
- 魔术棒: 根据颜色相似度创建选区。
- 选择工具: 选择并移动位图选区内的内容。
- 橡皮擦工具: 擦除像素。
- 画笔/铅笔工具: 进行绘画。
- 油漆桶工具: 填充封闭区域。
- 模糊/锐化/涂抹工具: 用于图像修饰。
实践: 导入一张图片，用魔术棒工具抠取背景,然后用油漆桶工具填充新颜色。
Web 与交互工具
这是 Fireworks 的王牌功能。
（图片来源网络，侵删）
- 切片工具: 这是最核心的工具，它在画布上创建一个可导出的矩形区域，每个切片都会在最终导出的 HTML 中生成一个独立的图片文件，这对于网页优化至关重要。
- 作用: 实现图片的局部优化、悬停效果、热点链接等。
- 热点工具: 在图片上创建不可见的链接区域,用于制作图像地图。
- 切片选择工具: 选择和管理已创建的切片，可以在属性检查器中为它指定链接、替代文本等。
第三部分：核心功能进阶
颜色与样式
- 颜色填充: 选中一个矢量形状，在属性检查器中可以设置其填充类型：
- 无填充: 透明。
- 实色: 纯色填充。
- 渐变: 线性或径向渐变,双击渐变条可以自定义颜色和位置。
- 图案: 使用预设或自定义的图案填充。
- 描边: 为矢量形状添加边框，可以设置描边类型（实线、虚线、点画线）、宽度和颜色。
- 样式: 这是提高效率的利器。
- 创建一个你喜欢的图形效果（一个带阴影和圆角的蓝色矩形）。
- 选中它，点击
窗口 > 样式打开样式面板。 - 点击面板下方的“新建样式”按钮。
- 之后，只需选中任何其他形状，点击这个样式,即可一键应用所有效果。
效果与滤镜
效果是非破坏性的,可以随时在属性检查器中修改。
- 常见效果:
- 阴影: 为对象添加投影。
- 发光: 为对象边缘添加柔和的光晕。
- 斜角和浮雕: 模拟 3D 立体效果。
- 模糊: 使对象变模糊。
- 调整颜色: 调整亮度、对比度、色相等。
实践: 给一个按钮添加“内斜角”和“投影”效果,让它看起来更有立体感。
元件
元件是可重用的对象,分为三种类型：
- 图形元件: 用于静态的、可重用的矢量或位图图形，修改一个实例,其他实例不会改变。
- 按钮元件: 用于创建交互式按钮，它有四种状态：
- 释放: 默认状态。
- 滑过: 鼠标悬停时的状态。
- 按下: 鼠标点击时的状态。
- 按下时: 按下后保持的状态。
- 你可以为每个状态设置不同的外观和切片链接。
- 影片剪辑元件: 包含多帧动画的元件，类似于 Flash 中的 MovieClip。
实践: 创建一个按钮元件，设置“滑过”状态时颜色变亮，“按下”状态时缩小 5%。
第四部分：工作流程实战
实战 1：设计一个简单的网页界面
- 规划: 在纸上或用草图软件画出界面布局（Header, Nav, Content, Footer）。
- 创建画布: 新建一个 960x1200 像素的文档。
- 绘制结构:
- 用矩形工具绘制 Header 区域，填充颜色，添加“投影”效果。
- 用矩形工具绘制导航栏,并输入文字。
- 用矩形工具绘制内容区和页脚。
- 在内容区用矢量工具绘制一个图标,或用文本工具输入标题和正文。
- 应用样式: 将常用的按钮样式、标题样式保存为样式,快速应用到其他元素上。
- 切片导出:
- 使用切片工具，将需要作为独立图片的部分（如 Logo、背景图、按钮）切分出来。
- 按
F12或文件 > 导出，在弹出的对话框中选择“导出”。 - 在“导出”选项中，选择“包含区域 HTML”，选择“将图像放入子文件夹”，Fireworks 会自动生成一个 HTML 文件和一个存放图片的
images文件夹。
实战 2：制作一个带交互的原型
- 设计界面: 设计一个登录页面，包含“登录”和“注册”两个按钮。
- 创建按钮元件: 将“登录”按钮制作成一个按钮元件。
- 设置状态:
- 释放状态: 按钮为蓝色。
- 滑过状态: 按钮变为深蓝色。
- 按下状态: 按钮点击后，跳转到“注册成功”页面。
- 添加行为:
- 选中按钮元件，在属性检查器的“链接”框中输入目标页面的名称（
register_success.html）。 - 在“滑过”状态的切片上,同样可以设置一个不同的图片。
- 选中按钮元件，在属性检查器的“链接”框中输入目标页面的名称（
- 生成原型: 按
F12预览，当鼠标悬停在按钮上时颜色会改变，点击则会跳转到新页面，这个.html文件可以直接发给开发人员或用于演示。
第五部分：常用快捷键
V- 选择工具M- 矩形/椭圆工具L- 套索工具P- 钢笔工具T- 文本工具I- 切片工具K- 切片选择工具Ctrl + D- 取消选择Ctrl + Z- 撤销Ctrl + S- 保存Ctrl + Alt + S- 导出
第六部分：学习资源与提示
- 官方资源: Adobe 官方网站（虽然 CS5 已很老旧，但基础原理不变）。
- 视频网站: 在 YouTube、Bilibili 上搜索 "Fireworks CS5 Tutorial" 或 "Fireworks 网页设计",有大量中文和英文视频教程。
- 设计社区: 站酷、UI中国等社区有设计师分享他们的 Fireworks 作品和工作流程。
- 练习，练习，再练习: Fireworks 是一个实践性很强的软件,多动手做项目是掌握它的最快方式。
Adobe Fireworks CS5 虽然已不再是 Adobe 的主力产品，但其核心设计理念——为网页而生、集成设计与原型——至今仍然非常先进，掌握 Fireworks，不仅能让你快速产出高质量的 UI 设计稿，更能轻松制作出可交互的、可供团队沟通的网页原型，大大提高工作效率，希望这份教程能帮助你开启 Fireworks 的学习之旅！
