第1章 图形设计基础教程 本教程将指导您运用 Macromedia fireworks mⅨX执行一些基本的设计图形任务。您将获得使用 业界领先的web图形应用程序的实践经验,同时还将学习一些基本的图形设计概念 如果您对使用 Fireworks设计图形已经很熟悉,则可以直接转到第39页的“Web设计基础知 识教程”,在那里您将学习用 Fireworks设计网页的知识 学习内容 在本教程的指导下,花不到一小时的时间使用 Fireworks创建一则老爷车租赁广告。您将学习如 何完成下列任务 ·第12页的“复制 Tutorials文件夹 ·第12页的“查看已完成的文件” ·第12页的“创建和保存新文档” ·第14页的“浏览 Fireworks工作环境” ·第15页的“创建和编辑矢量对象” ·第18页的“导入位图和选择象素” ·第21页的“添加和编辑动态效果” ·第22页的“使用层和对象” 第26页的“创建和编辑蒙版 ·第28页的“创建和编辑文本” ·第34页的“导出文档” 应了解的知识 虽然本教程面向那些 Fireworks初学者,但它同时讲述了许多 Fireworks新功能,因此有经验的 Fireworks高级用户也将从中受益。尽管学习本教程对是否是图形设计人员没有要求,但您应当 具有基本的计算机技能,并且能够使用常见的桌面应用程序。您还应该知道如何浏览硬盘上的文 件和文件夹
11 第 1 章 图形设计基础教程 本教程将指导您运用 Macromedia Fireworks MX 执行一些基本的设计图形任务。您将获得使用 业界领先的 Web 图形应用程序的实践经验，同时还将学习一些基本的图形设计概念。 如果您对使用 Fireworks 设计图形已经很熟悉，则可以直接转到第 39 页的 “Web 设计基础知 识教程”，在那里您将学习用 Fireworks 设计网页的知识。 学习内容 在本教程的指导下，花不到一小时的时间使用 Fireworks 创建一则老爷车租赁广告。您将学习如 何完成下列任务： • 第 12 页的 “复制 Tutorials 文件夹” • 第 12 页的 “查看已完成的文件” • 第 12 页的 “创建和保存新文档” • 第 14 页的 “浏览 Fireworks 工作环境” • 第 15 页的 “创建和编辑矢量对象” • 第 18 页的 “导入位图和选择象素” • 第 21 页的 “添加和编辑动态效果” • 第 22 页的 “使用层和对象” • 第 26 页的 “创建和编辑蒙版” • 第 28 页的 “创建和编辑文本” • 第 34 页的 “导出文档” 应了解的知识 虽然本教程面向那些 Fireworks 初学者，但它同时讲述了许多 Fireworks 新功能，因此有经验的 Fireworks 高级用户也将从中受益。尽管学习本教程对是否是图形设计人员没有要求，但您应当 具有基本的计算机技能，并且能够使用常见的桌面应用程序。您还应该知道如何浏览硬盘上的文 件和文件夹
复制 Tutorials文件夹 开始之前,您将创建 Tutorials文件夹的一个副本,以便可以保存您的工作结果,同时使您或其 他用户能够在以后使用原始文件完成本教程 1导航到硬盘上的 Fireworks应用程序文件夹 注意:如果无法查看 Fireworks应用程序文件夹,可能是由于对系统上的文件的访问权限受限所致。您可以从Web上 的Fireworks支持中心〔httJ/www.macromedia.com/support/fireworks/下载本教程所需的文件 2将 Tutorials文件夹的副本拖到桌面上。 查看已完成的文件 查看已完成的教程文件,以便了解所完成的工程具有什么样的外观。 1启动Web浏览器 2在硬盘上导航到已复制到桌面上的 Tutorials文件夹,然后浏览到 Tutorial1/Complete 注意:某些 Microsoft windows版本默认情况下隐藏已知文件类型的扩展名。如果您未更改此设置, Complete文 件夹中的文件将不会显示扩展名。在处理Web图形时,最好能够看到文件扩展名。有关如何重新显示文件扩展名的信 息,请参阅 Windows帮助。 3选择 final. jPg文件,并将其拖到打开的浏览器窗囗中 在本教程中,您将使用 Fireworks设计和导出此老爷车出租广告的一个副本 注意: Complete文件夹还包含生成此JPEG文件所使用的 Fireworks文档。若要查看此文档,请双击 final. png 创建和保存新文档 您已经查看了 final jpg文件,现在可以“开工”了 1在 Fireworks中,选择“文件”>“新建”。 新建文档”对话框打开。 新建文档 面布大小:876.6K 宽度①):50象索 高度90:50象索 辨率 画布颜色 ⊙白 ○透明① ■确定□取消 12第1章
12 第 1 章 复制 Tutorials 文件夹 开始之前，您将创建 Tutorials 文件夹的一个副本，以便可以保存您的工作结果，同时使您或其 他用户能够在以后使用原始文件完成本教程。 1 导航到硬盘上的 Fireworks 应用程序文件夹。 注意：如果无法查看 Fireworks 应用程序文件夹，可能是由于对系统上的文件的访问权限受限所致。您可以从 Web 上 的 Fireworks 支持中心 (http://www.macromedia.com/support/fireworks/) 下载本教程所需的文件。 2 将 Tutorials 文件夹的副本拖到桌面上。 查看已完成的文件 查看已完成的教程文件，以便了解所完成的工程具有什么样的外观。 1 启动 Web 浏览器。 2 在硬盘上导航到已复制到桌面上的 Tutorials 文件夹，然后浏览到 Tutorial1/Complete。 注意：某些 Microsoft Windows 版本默认情况下隐藏已知文件类型的扩展名。如果您未更改此设置， Complete 文 件夹中的文件将不会显示扩展名。在处理 Web 图形时，最好能够看到文件扩展名。有关如何重新显示文件扩展名的信 息，请参阅 Windows 帮助。 3 选择 final.jpg 文件，并将其拖到打开的浏览器窗口中。 在本教程中，您将使用 Fireworks 设计和导出此老爷车出租广告的一个副本。 注意：Complete 文件夹还包含生成此 JPEG 文件所使用的 Fireworks 文档。若要查看此文档，请双击 final.png。 创建和保存新文档 您已经查看了 final.jpg 文件，现在可以 “开工”了。 1 在 Fireworks 中，选择 “文件” > “新建”。 “新建文档”对话框打开
2输入480作为宽度,输入214作为高度。请确保这两个数字都是以象素为单位,并且画布颜 色为白色,然后单击“确定” 即会打开一个文档窗口,标题栏中显示无标题-1png( Windows)或 Untitled1 3如果文档窗口未最大化,也就是说它没有填满屏幕的中心区域,则请单击文档窗口顶部的最 大化按钮( Windows)或缩放框( Macintosh)。这样,您就有足够的空间来工作了。 4选择“文件”>“另存为” 另存为”( Windows)或“保存”( Macintosh)对话框打开。 另存为 p囟 保存在①):[回桌面 网上邻居 文件名0): Intitled+1png 保存( 保存类型): Fireworks(pa 厂取消 5浏览到桌面上的 Tutorials/ Tutorial文件夹。 6将文件命名为 vintage 7如果尚未选中“添加文件扩展名”选项,请选择它(仅限 Macintos 8单击“保存”。 标题栏中显示具有PNG扩展名的新文件名。PNG是 Fireworks本身的文件格式。PNG文 件是源文件;通过它您可以在 Fireworks完成所有工作。在本教程的最后,您将学习如何将文 档导出为另一种格式,以用于Web 在完成本教程期间,请记住经常选择“文件”>“保存”保存您的工作。 注意:在学习本教程的过程中,您可能会发现撤消所做的更改很有用。 Fireworks可以撤消您最近所做的几次更改 取决于您在“首选项”中设置的撤消次数。如需撤消最后一次更改,请选择“编辑”>“撤消 图形设计基础教程13
图形设计基础教程 13 2 输入 480 作为宽度，输入 214 作为高度。请确保这两个数字都是以象素为单位，并且画布颜 色为白色，然后单击 “确定”。 即会打开一个文档窗口，标题栏中显示 无标题- 1.png (Windows) 或 Untitled-1 (Macintosh)。 3 如果文档窗口未最大化，也就是说它没有填满屏幕的中心区域，则请单击文档窗口顶部的最 大化按钮 (Windows) 或缩放框 (Macintosh)。这样，您就有足够的空间来工作了。 4 选择 “文件” > “另存为”。 “另存为” (Windows) 或 “保存” (Macintosh) 对话框打开。 5 浏览到桌面上的 Tutorials/Tutorial1 文件夹。 6 将文件命名为 vintage。 7 如果尚未选中 “添加文件扩展名”选项，请选择它 （仅限 Macintosh）。 8 单击 “保存”。 标题栏中显示具有 PNG 扩展名的新文件名。 PNG 是 Fireworks 本身的文件格式。 PNG 文 件是源文件；通过它您可以在 Fireworks 完成所有工作。在本教程的最后，您将学习如何将文 档导出为另一种格式，以用于 Web。 在完成本教程期间，请记住经常选择 “文件” > “保存”保存您的工作。 注意：在学习本教程的过程中，您可能会发现撤消所做的更改很有用。 Fireworks 可以撤消您最近所做的几次更改，具体 取决于您在 “首选项”中设置的撤消次数。如需撤消最后一次更改，请选择 “编辑” > “撤消
浏览 Fireworks工作环境 在继续之前,请先査看一下组成 Fireworks工作环境的元素: 文件②②我图的选修改文①命令G镜①留口①② 画□大小□大 ·屏幕正中是文档窗囗。文档窗口中间是画布。您所创建的 Fireworks文档和任何图形都显示在 ·屏幕顶部是菜单栏。从菜单栏中可以访问大多数 Fireworks命令 ·屏幕左侧是“工具”面板。如果“工具”面板不可见,请选择“窗口”>“工具”。在“工 具”面板中,您可以找到用于选择、创建和编辑各种图形项目以及Web对象的工具 ·屏幕底部是属性检査器。如果属性检査器不可见,请选择“窗口”>“属性”。属性检査器显 示所选对象或工具的属性。您可以更改这些属性。如果未选择任何对象或工具,则属性检査 器将显示文档属性 属性检査器显示的属性分两行或四行。如果属性检査器处于半高状态,即只显示两行,这时 单击右下角的展开箭头可以看到所有属性。 半高状态的展开箭头 ·屏幕的右侧是各种面板,如“层”面板和“优化”面板。从“窗口”菜单中可以打开这些面 板以及其它面板。 14第1章
14 第 1 章 浏览 Fireworks 工作环境 在继续之前，请先查看一下组成 Fireworks 工作环境的元素： • 屏幕正中是文档窗口。文档窗口中间是画布。您所创建的 Fireworks 文档和任何图形都显示在 这里。 • 屏幕顶部是菜单栏。从菜单栏中可以访问大多数 Fireworks 命令。 • 屏幕左侧是 “工具”面板。如果 “工具”面板不可见，请选择 “窗口” > “工具”。在 “工 具”面板中，您可以找到用于选择、创建和编辑各种图形项目以及 Web 对象的工具。 • 屏幕底部是属性检查器。如果属性检查器不可见，请选择“窗口”>“属性”。属性检查器显 示所选对象或工具的属性。您可以更改这些属性。如果未选择任何对象或工具，则属性检查 器将显示文档属性。 属性检查器显示的属性分两行或四行。如果属性检查器处于半高状态，即只显示两行，这时 单击右下角的展开箭头可以看到所有属性。 • 屏幕的右侧是各种面板，如 “层”面板和 “优化”面板。从 “窗口”菜单中可以打开这些面 板以及其它面板。 半高状态的展开箭头
·将指针移到各种界面元素上。如果指针在界面项目上停留足够长的时间,则会显示工具提示。 工具提示标识整个 Fireworks工作环境中的工具、菜单、按钮和其它界面功能。如果将指针从 所指向的界面元素上移走,工具提示就会消失 随着教程的继续,您会了解有关这些元素的更多信息 创建和编辑矢量对象 使用 Fireworks,您可以创建和编辑两种图形:矢量对象和位图图象。 矢量对象是以数学方法来描绘几何形状。矢量路径是由点定义的。当放大矢量路径或将矢量路径 缩放为更大或更小的尺寸时,矢量路径的品质不会下降。下图中的树叶是矢量对象的集合。可以 看到,当放大树叶时,树叶的边缘仍保持平滑 对比而言,位图图象是由彩色象素网格组成的。具有复杂颜色变化的图象(如照片)大多是位 图图象。 许多应用程序所提供的工具只能编辑矢量形状或位图图象两者之一,而 Fireworks对于这两种类 型的图形都能够进行处理。在本节中,您将处理矢量图形 图形设计基础教程1
图形设计基础教程 15 • 将指针移到各种界面元素上。如果指针在界面项目上停留足够长的时间，则会显示工具提示。 工具提示标识整个 Fireworks 工作环境中的工具、菜单、按钮和其它界面功能。如果将指针从 所指向的界面元素上移走，工具提示就会消失。 随着教程的继续，您会了解有关这些元素的更多信息。 创建和编辑矢量对象 使用 Fireworks，您可以创建和编辑两种图形：矢量对象和位图图象。 矢量对象是以数学方法来描绘几何形状。矢量路径是由点定义的。当放大矢量路径或将矢量路径 缩放为更大或更小的尺寸时，矢量路径的品质不会下降。下图中的树叶是矢量对象的集合。可以 看到，当放大树叶时，树叶的边缘仍保持平滑。 对比而言，位图图象是由彩色象素网格组成的。具有复杂颜色变化的图象 （如照片）大多是位 图图象。 许多应用程序所提供的工具只能编辑矢量形状或位图图象两者之一，而 Fireworks 对于这两种类 型的图形都能够进行处理。在本节中，您将处理矢量图形