《网页制作与设计》立体化电子课件-第5章-Fireworks图像制作

Fireworks图像制作

Fireworks概述图像的优化和导出位图与图像处理图形与文本操作总结与习题第5章Fireworks是用来设计与制作网页图形的专业化软件，可以创建、编辑位图与矢量图像，设计网页效果、修剪和优化图形以减小文件大小，自动进行重复性任务以节省时间等Fireworks不仅可以处理各种网页图像，制作风格各异的Logo、Banner和导航栏，还可以导出附加有HTML代码和JavaScript代码的图像，直接输出Web页，并在内部嵌入Web页常用的动画、JavaScript脚本等Fireworks概述5.1启动Fireworks后，选择“新建Fireworks文件”任务，弹出【新建文档】对话框在对话框中选择画布宽度、高度、分辨率及画布颜色，单击【确定】按钮，进入Fireworks的工作界面，如下图所示Fireworks概述5.1Fireworks的工作界面

Fireworks概述5.1Fireworks工作界面

1.标题栏2.菜单栏3.工具栏4.工具箱5.编辑窗口6.属性面板7.浮动面板Fireworks概述5.1标题栏显示出当前正在编辑的文件名称菜单栏位于标题栏下方，包括10个菜单选项工具栏位于菜单栏的下方，主要是为了方便用户进行某些操作而设置的；工具栏的功能与菜单栏中的某些菜单功能是相同的，但使用工具栏更方便快捷Fireworks概述5.1菜单栏（1）【文件】菜单（2）【编辑】菜单（3）【视图】菜单（4）【选择】菜单（5）【修改】菜单（6）【文本】菜单（7）【命令】菜单（8）【滤镜】菜单（9）【窗口】菜单（10）【帮助】菜单Fireworks概述5.1修改工具栏主要工具栏Fireworks概述5.1工具箱位于编辑窗口的左侧，按功能分为选择、位图、矢量、Web、颜色和视图六个类组所有功能相似的工具被组织成工具组凡右下角有小三角形标志的按钮，则表明是一个工具组；单击并按住三角形按钮，可以拉出工具组中的其他工具Fireworks概述5.1Fireworks概述5.1工具箱的六个工具组编辑窗口位于工具栏的下面，是图像编辑的主要场所编辑窗口底端包含4个选项卡：原始选项卡显示当前编辑的图像文件预览选项卡显示优化后图像的预览效果2幅选项卡以2个窗口形式显示图像效果4幅选项卡以4个窗口形式显示图像效果Fireworks概述5.1属性面板位于编辑窗口的下方，显示当前选中对象的属性。属性面板的内容随着当前选中对象的类型而变化浮动面板由各种不同功能的控制面板组成，可以对这些控制面板独立进行移动、折叠、展开、关闭等操作【窗口】菜单中提供了显示或隐藏各个面板的开关选项；也可通过单击面板的名称来折叠或展开对应面板

Fireworks概述5.1操作文档操作Fireworks文档包括对Fireworks文档进行新建、打开、保存、导入、导出等操作Fireworks概述5.1新建文档打开文档选择【文件/新建】菜单命令，弹出新建文档对话框；在对话框中设置画布属性，单击【确定】按钮，即可建立一个新的图像文档选择【文件/打开】菜单命令，弹出打开对话框；在对话框中输入或选择需打开的文件，单击【打开】按钮，即可打开指定的文档选择【文件/保存】或【文件/另存为】菜单命令，打开另存为对话框；选择或输入要存储路径与文档名，单击【保存】按钮将其保存保存文档Fireworks概述5.1选择【文件/导入】菜单命令，弹出导入对话框；在对话框中提供要导入文档的路径与文件名，单击【打开】按钮即可导入指定的文档。对导入的文档进行修改，并不会影响原有文档，从而能够有效地防止破坏原有文档

将Fireworks文档保存为其他图形格式文件，选择【文件/导出】菜单命令，打开导出对话框；提供保存位置、文件类型及文件名，将其导出。或通过【文件/图像预览】菜单命令，打开图像预览对话框；设置图像文档的格式、品质等属性，进行图像优化，并导出文档导入文档导出文档Fireworks概述5.1修改文档属性修改文档属性包括改变图像大小、修剪画布、修改画布大小、改变画布颜色及旋转画布等操作Fireworks概述5.1改变图像大小修剪画布选择【修改/画布/图像大小】菜单命令，打开图像大小对话框；对话框中设置图像的大小、打印尺寸及分辨率去除画布的多余空间，使用【修改/画布/修剪画布】菜单命令；若文档内容超出画布尺寸，使用【修改/画布/符合画布】菜单命令，使画布自动调整到与文档大小一致当导入的图像倒置或侧放时，可使用【修改/画布】菜单命令对画布进行旋转；旋转方式有3种：旋转180度，顺时针旋转90度，逆时针旋转90度旋转画布Fireworks概述5.1选择【修改/画布/画布颜色】菜单命令，打开【画布颜色】对话框；选择白色、透明、自定义选项之一；选择自定义选项时，系统打开样本选择窗口，供用户从色板中选择所需的颜色选择【修改/画布/画布大小】，打开【画布大小】对话框；在【宽度】和【高度】文本框中输入新尺寸；单击相应的【锚定】按钮，指定在画布哪一位置进行尺寸修改；单击【确定】按钮，使设置的画布尺寸生效改变画布颜色修改画布大小Fireworks概述5.1使用布局工具Fireworks的布局工具包括标尺、辅助线和网格等使用这些布局工具，能够精确定位和排版对象Fireworks概述5.1标尺网格用于测量、组织作品的布局；标尺以像素为单位进行度量。使用【视图/标尺】菜单命令可显示或隐藏标尺。用于精确放置对象。使用【视图/网格/显示网格】菜单命令可显示或隐藏网格。执行【视图/网格/编辑网格】菜单命令，在打开的编辑网格对话框中能够更改网格的颜色、大小等属性辅助线有水平与垂直两类，用来标记文档重要部分、放置和对齐对象。单击标尺并拖动可创建辅助线；将辅助线从画布上拖到看不见的区域即可删除辅助线辅助线Fireworks概述5.1矢量图形中基本形状的绘制是最基本的操作

图形与文本操作5.2像素像素是组成图像的基本单元，像素是一个个的小颜色方块。每个小方块就是一个像素分辨率是指单位长度所包含的像素数量；分辨率越高，图像的颜色过渡就越平滑，显示效果就越好位图图像就是由像素所组成的图像，因此又称像素图矢量图形是由数学方式描述的曲线组成，基本组成单位是锚点和路径矢量图形分辨率位图图像图形与文本操作5.2图形与文本操作5.2绘制直线使用直线工具选择直线工具，在画布上按下鼠标左键，拖动鼠标到合适位置释放鼠标使用钢笔工具选择钢笔工具，在画布上按下鼠标左键，移动鼠标到合适位置单击鼠标图形与文本操作5.2绘制曲线使用钢笔工具选择钢笔工具，在画布上按下鼠标左键，移动鼠标到合适位置单击并拖动鼠标使用矢量路径选择矢量路径工具，拖动鼠标即可绘制绘制几何图形图形与文本操作5.2绘制简单几何图形的方法：选中矩形工具，单击右下角的三角形，会列出很多几何图形工具选择所需要的几何图形，在画布上拖拉即可选择对象在画布上操作任何对象前，必须首先选中该对象Fireworks提供指针、部分选定、选择后方对象等选择工具图形与文本操作5.21指针工具：当单击对象或者在对象周围拖动选区时，指针工具会选择这些对象。可拖动指针工具将一个或多个对象包含在选区内指针工具2部分选定工具：用来选择、移动或修改矢量路径上的点或者属于组的对象部分选定工具3后方对象选择工具：当处理包含多个对象的图形时，可以使用选择后方对象工具选择被其他对象隐藏或遮挡的对象后方对象选择工具图形与文本操作5.2对象变换对象的缩放、旋转、倾斜、扭曲、翻转等操作称为对象的变换图形与文本操作5.21缩放：先用指针工具选定要缩放的对象，然后选择缩放工具，拖动对象周围的控点即可缩放对象2旋转：使用缩放工具可以旋转对象。当鼠标靠近要旋转的对象时，鼠标指针会变成漩形箭头，按住鼠标拖动，即可以中心点为圆心旋转该对象对象旋转3倾斜：选择倾斜工具，当拖动选中对象的四个角的控点时，对象会产生梯形变形；拖动其他的控点，产生平行四边形变形对象倾斜对象缩放图形与文本操作5.24扭曲：选择扭曲工具，拖动某一控制点，调整扭曲对象的形状对象扭曲5翻转：对象翻转分为水平翻转和垂直翻转两种，分别对应于【修改/变形/水平翻转】与【修改/变形/垂直翻转】菜单命令6数值变形：数值变形是通过具体的数值来精确地控制对象的变化；还可以对不同对象或对象的不同部分实施不同角度的旋转操作数值变形对象翻转图形与文本操作5.2对象的操作还包括多种路径操作图形与文本操作5.2路径接合拆分路径接合是指将两个或两个以上的路径连接起来，使它们成为一个统一的路径路径的拆分就是把已经连接起来的统一路径再拆分为多个单独的路径图形与文本操作5.2路径接合与拆分的方法：选择两个或多个路径，然后选择【修改】|【组合路径】|【接合】，即可完成路径的接合操作选择【修改】|【组合路径】|【拆分】，即可把接合的路径拆分图形与文本操作5.2路径联合路径的联合与接合不同，它不仅将多个对象合并为一个对象，而且将其中重合的部分完全融合，只剩下最外部的轮廓联合所得到的路径拥有最先放置对象的笔触和填充属性图形与文本操作5.2路径联合的方法：选择两个或多个路径然后选择【修改】|【组合路径】|【联合】，即可完成路径的联合操作图形与文本操作5.2路径相交路径的相交是指将两个或多个对象的相交部分的外部轮廓保留下来，生成一个新的对象，所得到的路径具有最先放置对象的笔触和填充属性图形与文本操作5.2路径相交的方法：选择两个或多个路径然后选择【修改】|【组合路径】|【交集】图形与文本操作5.2路径打孔路径的打孔是指用上层对象的轮廓删除所覆盖的下层对象的内容，从而生成新的对象图形与文本操作5.2路径打孔的方法：选择两个路径然后选择【修改】|【组合路径】|【打孔】图形与文本操作5.2路径裁切路径的裁切是用上层对象的轮廓修剪下层对象的内容，得到的路径具有最先放置对象的笔触和填充属性路径的裁切与路径的打孔是一对相反操作图形与文本操作5.2路径裁切的方法：选择两个路径然后选择【修改】|【组合路径】|【裁切】图形与文本操作5.2当在一个文档中处理多个对象时，往往需要用到几种操纵多个对象的方法

图形与文本操作5.21对齐多个对象时，先要选中这多个对象，然后选择【修改/对齐】菜单的相应子命令，或者在【窗口】菜单中打开对齐面板，从中选择相应的对齐方式2对象的放置具有一定的顺序，但可修改对象的叠放顺序，方法为：选中需要改变排列次序的对象，执行【修改/排列】菜单的相应子命令对象排列3选中需要组合的所有图形，执行【修改/组合】菜单命令即可将图形组合成一个整体；选中组合的图形，执行【修改/取消组合】菜单命令即可消除组合组合和取消组合对象对齐图形与文本操作5.2输入文本选择文本工具，如果在画布上单击，可以直接输入文本如果在画布上拖出一个框，则可以创建一个固定宽度的文本块图形与文本操作5.2编辑文本指针工具选中输入的文本块，使用属性面板，可以修改文本的属性：如更改字体，更改字号，修改字体颜色，设置加粗、斜体或下划线样式，调整字距、字顶距，设置段落缩进、段前空格、段后空格、水平缩放、文本块方向、文本对齐方式等参数图形与文本操作5.2文本附加到路径要使文本的排列更加生动，可以将文本附加到特定路径，使文本沿着路径的方向排列图形与文本操作5.2文本附加到路径的方法如下：输入文本，绘制一个路径对象同时选中二者，选择菜单命令【文本/附加到路径】命令即可

图形与文本操作5.2文本转换为路径把文本转换为路径后，所有的矢量编辑工具都可以用来编辑转换后的文本对象文本对象的外形可以象矢量图形一样被改变但无法再将该文本对象作为文本来加以编辑图形与文本操作5.2将文本转换为路径的方法为：选中输入的文本执行【文本/转换为路径】菜单命令，将文本转换为路径对象组图形与文本操作5.2将文本路径分解的方法为：选择【修改/取消组合】菜单命令，将文本分解为单一的字母组合此时，可用矢量工具对每个字母对象进行编辑操作图形与文本操作5.2可以将笔触、填充和效果应用到所选的文本块对象创建的文本对象将象其他图形对象一样，保持着可编辑性当编辑文本对象时，其笔触、填充、效果及样式都会自动更新图形与文本操作5.2Fireworks的位图选择工具用来对位图或位图的部分区域进行选取当选择了位图选择工具时，属性面板将显示与选择工具相关的选项位图选择工具如下所示位图与图像处理5.3位图选择工具【矩形选取框】工具：用于在图像中选择一个矩形区域。【椭圆选取框】工具：用于在图像中选择一个椭圆形区域。【套索】工具：用于在图像中选择一个自由变形区域。【多边形套索】工具：用于在图像中选择一个直边的自由变形区域。【魔术棒】工具：用于在图像中选择一个颜色相似区域。位图与图像处理5.3选择工具属性面板位图与图像处理5.3样式样式用来定义选取框的大小样式，包含如下所示的三种选项位图与图像处理5.3样式特征选项正常创建高度和宽度互不相关的选取框固定大小将高度和宽度设置为特定的尺寸固定比例将高度和宽度约束为特定的比例位图与图像处理5.3边缘边缘：定义选取框的边缘特征，包含如下所示的三种选项位图与图像处理5.3边缘特征选项实边创建具有已定义边缘的选取框羽化使像素选区的边缘模糊，使之柔化

消除锯齿防止选取框中出现锯齿边缘位图与图像处理5.3Fireworks提供了许多修饰图像的工具这些工具如下所示位图与图像处理5.3修饰图像工具【橡皮图章】工具：用于把图像的一个区域复制到另一个区域中。【模糊】工具：用于减弱图像中所选区域的焦点。【涂抹】工具：用于拾取颜色并在图像中沿拖动的方向推移该颜色。【锐化】工具：用于锐化图像中的区域。【减淡】工具：用于加亮图像中的部分区域。【烙印】工具：用于加深图像中的部分区域位图与图像处理5.3橡皮图章工具橡皮图章工具用来克隆位图图像的部分区域，以便将此区域压印到图像中的其他区域橡皮图章工具的使用方法如下图所示位图与图像处理5.3Step1Step2打开一幅位图文件，选择橡皮图章工具单击要克隆的区域，将其指定为源；移动光标到图像的其他区域，并拖动指针，可以看到两个指针：十字形的克隆源指针，以及第二个指针拖动第二个指针，第一个指针下的像素复制并应用于第二个指针下的区域Step3位图与图像处理5.3模糊工具模糊工具通过有选择地模糊元素的焦点来强化或弱化图像的局部区域，其方式与摄影师控制景深的方式相同位图与图像处理5.3锐化工具锐化工具对于修复扫描中的问题或聚焦不准的照片很有用位图与图像处理5.3涂抹工具涂抹工具可以象创建图像倒影那样逐渐将颜色混合起来位图与图像处理5.3减淡工具减淡工具用来减淡图像的局部，原理类似于挡住光线的暗室技术位图与图像处理5.3烙印工具烙印工具则用来烙印图像的局部，类似于给照片加强光效果。选择烙印工具后属性面板呈现的界面如下图所示位图与图像处理5.3选择工具属性面板位图与图像处理5.3烙印工具属性面板主要属性说明如下：大小：设置刷子笔尖的大小形状：设置刷子笔尖形状为圆形或方形边缘：设置刷子笔尖的柔度曝光：范围从0％到100％。曝光值越小，光线强度越弱；值越大，光线强度越强范围：包含三个选项，其中阴影用来改变图像的深色部分，中间影调用来改变图像中每个通道的中间范围，高光用来改变图像的加亮部分位图与图像处理5.3Fireworks用颜色和色调调整滤镜来调整图像的对比度、亮度、色调范围、色相和饱和度，用以帮助改善和强化位图图像的颜色模糊和锐化位图的方法如下图所示位图与图像处理5.3调整位图3.使用颜色填充动态效果2.调整亮度和对比度1.调整色调范围4.调整色相与饱和度

5.反转图像的颜色值

位图与图像处理5.3Fireworks提供了一组模糊和锐化选项，可以应用到动态效果或永久滤镜场合模糊和锐化位图的方法如下图所示位图与图像处理5.3模糊锐化位图

2.将图像转换成透明效果

1.对图像进行模糊处理

3.对图像进行锐化处理

位图与图像处理5.3模糊选项模糊柔化所选像素的焦点高斯模糊对每个像素应用加权平均模糊处理，以产生朦朦胧胧的效果进一步模糊模糊处理的效果大约相当于模糊选项的三倍位图与图像处理5.3锐化选项锐化通过增大邻近像素的对比度，对模糊图像的焦点进行调整钝化蒙版通过调整像素边缘的对比度来锐化图像；该选项通常作为锐化图像的首选进一步锐化增大邻近像素的对比度，增大的倍数大约为锐化选项的三倍位图与图像处理5.3热点热点是包含超级链接的网页图像区域，也就是单击后可以连接到其他位置的的图像区域位图与图像处理5.3Fireworks的热点

2.圆形热点1.矩形热点3.多边形热点位图与图像处理5.3Step1Step2打开图像，从Web工具箱中选择需要的热点绘制工具在热点属性面板中的“链接”文本框中输入链接地址；在“Alt”文本框中输入超链接替换的文本；在“目标”下拉列表中选择打开超链接的目标窗口类型Step3拖动鼠标，在需要创建热点的目标区域周围绘制热点图形位图与图像处理5.3切片切片是从Fireworks文档中分割出一块小的图片区域，并将其单独发布为一个文件切片是网页对象，它不以图像的形式存在，而是以HTML代码的形式出现切片能够获得较高的下载速度，可用于优化图像，创建或更新交互等位图与图像处理5.3创建切片编辑切片打开需要创建切片的图像，从工具箱中选择“切片”工具或“多边形切片”工具；在需要创建切片的位置绘制矩形或多边形，即可创建一个切片在Fireworks中，可以通过拖动切片辅助线来调整切片的大小，调整相邻矩形切片的大小。切片的编辑还可以通过属性面板来完成选中切片，在切片属性面板的“链接”文本框中输入要设置超链接的目标地址；在“Alt”文本框中输入超链接替换文本；在“目标”下拉列表中选择打开超链接的目标窗口类型

设置URL位图与图像处理5.3Fireworks中通过行为面板可以创建复杂的切片交互。行为面板中包含各种交互行为，可以将这些行为附加到切片中选择【文件/导出】菜单命令，在导出对话框中，设置导出文件导出类型为HTML和图像，并将其保存为网页；可将切片对象生成多个切片文件；单击【导出】按钮，完成导出功能切片交互导出文档位图与图像处理5.3图像映射图像映射是指在一幅图中有多个对象分别指向不同的链接，这个设置了多个热点的图像就叫映射图位图与图像处理5.3按钮按钮是网页最基本的元素按钮通常包括如下所示的4种不同的状态，每种状态表示该按钮在响应各种鼠标事件时的外观

位图与图像处理5.3释放按钮的默认外观或静止时的外观，使按钮无任何交互时所显示的外观当指针移动到按钮时该按钮的外观按钮被单击后的外观鼠标滑过处于“按下”状态下的按钮的外观按下时滑过滑过按下位图与图像处理5.3利用按钮编辑器，可以创建所有这些不同的按钮状态，以及用来触发按钮动作的区域具体操作步骤如下所示

位图与图像处理5.3Step1Step2新建一个文件，选择菜单【编辑/插入/新建按钮】命令，打开“按钮”编辑器制作按钮在编辑器区域绘制图形、创建文本或导入按钮。对导入的按钮可以修改其文字、设置文字属性、修改按钮大小和显示效果单击“滑过”选项卡，单击【复制弹起时的图形】，释放状态下的按钮即被复制过来，然后修改文字属性和按钮的显示效果Step3位图与图像处理5.3Step4Step5打开“按下”选项卡，单击【复制滑过时的图形】，修改文字属性和按钮的显示效果。按此法可制作“按下时滑过”按钮单击【完成】，即可在画布上看到该按钮的实例，同时在库面板中可以看到该按钮元件在属性面板中为按钮添加链接，此时，该按钮就制作完成了Step6位图与图像处理5.3导航栏导航栏是一组指向不同链接地址的按钮，用于在一系列具有相同级别的网页间进行跳转导航栏通常在整个站点保持一致，从而可以提供一种固定的导航方法位图与图像处理5.3使用一个按钮元件的多个实例排列在一起，再对各个实例进行修改，为它们指定不同的链接地址，一个导航栏就绘制完成了在Fireworks中制作导航栏的步骤如下所示位图与图像处理5.3Step1Step2首先创建一个按钮元件；从“库”面板中，将该按钮元件的一个实例拖到工作区中选择该按钮实例，然后选择菜单中的【编辑/克隆】命令或按住Alt键并拖动该按钮实例以制作一个按钮实例按住Shift键并拖动按钮，使按钮实例水平或垂直对齐Step3位图与图像处理5.3Step4Step5重复以上步骤，创建其他的按钮实例选择每个按钮实例，使用“属性”面板为其指定替代文本、URL和其他属性保存并导出文件，导出为HTML文件Step6位图与图像处理5.3弹出菜单弹出菜单是在网页中由鼠标来触发的一种菜单导航效果当鼠标移动到导航菜单上时，或者当鼠标点击导航菜单时，就会显示弹出菜单当鼠标从导航菜单上面移开时，弹出菜单就会自动消失位图与图像处理5.3创建弹出菜单的具体操作步骤如下所示位图与图像处理5.3Step1Step2选择制作弹出菜单的切片；选择【修改/弹出菜单/添加弹出菜单】菜单命令，弹出菜单编辑器对话框在“内容”选项卡中设置弹出菜单命令的文本、链接地址和目标打开“外观”选项卡，设置按钮弹起状态和滑过状态所对应的菜单项单元格格式Step3位图与图像处理5.3Step4Step5打开“高级”选项卡，设置单元格宽度、高度、边距等；打开“位置”选项卡，设置菜单在切片上的位置单击【完成】按钮

，即可在画布上看到该按钮的实例，同时在库面板中可以看到该按钮元件按下F12键，在浏览器中预览调试网页的输出效果；调试完成后，导出到HTML文件Step6位图与图像处理5.3图像优化图像的优化是指在保持图像品质的前提下压缩图像，从而使