网页制作与网站设计第三章.pptx

《网页制作与网站设计第三章.pptx》由会员分享，可在线阅读，更多相关《网页制作与网站设计第三章.pptx（100页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第三章第三章 网页图形与图像处理网页图形与图像处理【本章内容】3.1 Fireworks基础3.2 图形的绘制与编辑3.3 图像处理3.4 图像的优化与导出第1页/共100页3.1 Fireworks CS4基础【本节内容】3.1.1 Fireworks CS4的新功能3.1.2 Fireworks CS4的安装、启动与退出3.1.3 Fireworks CS4的界面3.1.4 创建Fireworks文件第2页/共100页3.1 Fireworks CS4基础 Adobe Fireworks（以前是Macromedia Fireworks）是用来设计和制作专业化网页图形的终极解决方案。使用Fi

2、reworks可以在一个专业化的环境中创建和编辑网页图形、对其进行动画处理、添加高级交互功能以及优化图像。从而创建非凡的网页图像。Fireworks有着在同一个应用程序中合二为一地处理位图和矢量图的巨大优势。第3页/共100页3.1.1 Fireworks CS4的新功能Fireworks CS4不仅继承了以前Fireworks的强大功能，还增加了更友好、高效的新特性、新的功能。在新功能的帮助下，我们可以更方便地使用Fireworks。改进的性能和稳定性：使用Fireworks CS4从文件打开和保存到元件更新，以有密集的位图和矢量操作等整体性能增强，让用户能够更快速有效地工作。全新的用户界面

3、：Fireworks CS4使用简单易用的通用用户界面设计，用户可以从其他Creative Suite应用程序（如Photoshop CS4、Illustrator CS4、Flash CS4）轻松切换到Fireworks CS4。第4页/共100页3.1.1 Fireworks CS4的新功能基于CSS布局：用户现在可以Fireworks CS4功能强大的图形环境中设计完整的网页，然后一次性导出符合标准、基于CSS且附有外部样式表的标准网页兼容布局。可以从最常用的6个版面之一着手，并使用自动边缘和边距检测合并前景和背景图形。将Fireworks CS4富元件拖放到Fireworks CS4布

4、局上，指定标题、链接和表单属性以进行精确的CSS控制。导出Adobe PDF：从Fireworks CS4设计组件复合生成高精度、交互式且安全的PDF文档，以增强客户端通信。可以为查看以及打印、复制和注释等其他任务单独创建密码来保护您的设计。第5页/共100页3.1.1 Fireworks CS4的新功能动态样式：使用专业设计的样式或自定义样式集自定义Fireworks对象或文本。修改一个样式源即可更新样式所有实例的已应用效果、颜色和文本属性。使用增强的样式面板可以提高工作效率。单击图标，可以在默认Fireworks样式、当前文档样式或其他库样式之间进行选择，轻松访问多个样式集。Adobe文字

5、引擎：Fireworks CS4现在也具备Photoshop和Illustrator用户熟悉的“Adobe文字引擎”，可使用增强排版能力实现出众的字体设计；可以从Photoshop（CS3以上）和Illustrator（CS3以上）导入或复制/粘贴双字节字符，并保持相同的清晰度；可以在紧凑的文本徽标路径内浮动文字。第6页/共100页3.1.1 Fireworks CS4的新功能工作区改进：将智能辅助线快速置入画布中，以实现快速准确地定位和测量画布上的辅助线和元素。当在画布上将辅助线拖动到位时，警告屏幕会表明相应位置。本地元件编辑可使用设计的其余部分来精确美化内容中的元件；扩展的9切片缩放工具现

6、在可应用于画布上的任何对象，而不仅仅是元件。可自定义、重用的资产：借助公用库启动您的的设计流程，这是一个由Web和软件应用程序、界面及网站中常用的图形元件、表单元素、文本符号和动画组成的库。使用您的自定符号和样式扩大集合，继续推动快速设计。集成Adobe Kuler：在Fireworks CS4中可以直接访问Adobe Kuler在线服务提供的最新颜色主题以采样并应用于用户的Web设计。也可以调制出和谐的颜色供自己使用或上传到Kuler。第7页/共100页3.1.2 Fireworks CS4的安装、启动与退出1、安装 安装Fireworks CS4步骤如下：（1）将 Fireworks CS

7、4安装光盘插入计算机的光盘驱动器。（2）开始安装：在 Windows系统中会自动启动Fireworks 安装程序。（3）根据屏幕上安装向导的提示输入相关信息。（4）安装完成时，重新启动计算机。第8页/共100页3.1.2 Fireworks CS4的安装、启动与退出2、中文版Fireworks CS4的启动（1）通过“开始”菜单下的“程序/Adobe/Adobe Fireworks CS4”实现。（2）通过快捷方式。第9页/共100页3.1.2 Fireworks CS4的安装、启动与退出3、中文版Fireworks CS4的退出l选择“文件/退出”菜单项；l单击程序窗口标题栏右侧的“关闭”按

8、钮；l直接按组合键【Alt+F4】如果修改了Fireworks文件内容后直接关闭应用程序，系统会弹出是否保存文件的对话框，提示用户对所做和修改是否保存。如单击“是”按扭，则在进行必要的文件保存设置后，保存对文件的修改退出；如单击“否”按扭，则不保存对文件的修改直接退出。第10页/共100页3.1.3 Fireworks CS4的界面1、中文版Fireworks CS4的界面Fireworks CS4的工作界面，如图3-1所示。它由标题栏、菜单栏、常用工具栏与修改工具栏、工具箱、属性检查器、其它面板和开始页六部分组成，开始页位于窗口的中间，它包括打开最近的项目、新建、扩展和教程区四种任务提示。通

9、过打开和新建都可以进入编辑界面（如图3-2）。与工作界面相比，不同之处是：编辑界面窗口的中间部分用编辑区取代了工作界面窗口的开始页。这个编辑区便是图像编辑的主要场所,包括显示文件的名称（扩展名为.png）的标题栏，用于编辑的“原始”按钮，按不同幅面预览图像的“预览”、“2幅”及“4幅”3个按钮及右上角的导出钮。第11页/共100页3.1.3 Fireworks CS4的界面1、中文版Fireworks CS4的界面图3-1 Fireworks CS4的工作界面第12页/共100页3.1.3 Fireworks CS4的界面2、常用工具栏与修改工具栏 Fireworks CS4的常用工具栏及修改

10、工具栏在菜单栏的下方。常用工具栏有新建、保存、打开、导入、导出、打印（文档），撤销、重做（步骤），剪切、复制与粘贴（复制），除了导入、导出文件的按钮以外，其余与office软件常用工具栏差不多。第13页/共100页3.1.3 Fireworks CS4的界面3、工具箱工具箱位于屏幕的左侧，它包含了用于创建、选择和编辑的多种工具，它分成了6类别并用标签标明，如图3-3所示。一些工具包含在同一个工作组中，在同一个工作组中的工具右下角有三角形，在它们上面按下鼠标不放，便会弹出同组其它工具，将鼠标移到所要的工具上单击便可实现切换。图3-3 工具箱第14页/共100页3.1.3 Fireworks CS

11、4的界面3、“属性”检查器“属性”检查器是一个上下文关联面板，它显示当前选区的属性、当前工具选项或文档的属性。默认情况下，“属性”检查器停放在工作区的底部，如图3-4所示。“属性”检查器可以半高方式打开，只显示两行属性，也可以全高方式打开，显示四行属性。还可以在将“属性”检查器留在工作区中的同时将其完全折叠。图3-4“属性”检查器第15页/共100页3.1.3 Fireworks CS4的界面4、浮动面板浮动面板可以帮助我们编辑文档中所选对象或元素的各个方面，可用于处理帧、层、元件、颜色样本等。Fireworks CS4主要包含“优化”面板、“层”面板、“帧”面板、“历史记录”面板、“形状”面

12、板、“样式”面板、“库”面板、“URL”面板、“混色器”面板、“样本”面板、“信息”面板、“行为”面板、“查找”面板、“对齐”面板、“自动形状属性”面板、“图像编辑”面板、“特殊字符”面板。每个面板都是可拖动的，因此我们可以按自己喜欢的排列方式将面板组合到一起。默认情况下，某些面板不会显示出来，但是如果需要，我们可以通过“窗口”菜单显示它们。第16页/共100页3.1.4 创建Fireworks文件1、创建新文件创建新文件的步骤如下：（1）选择“文件/新建”命令，打开“新建文档”对话框。（2）以像素、英寸或厘米为单位输入画布宽度和高度度量值。（3）以像素/英寸或像素/厘米为单位输入分辨率。（4

13、）为画布选择白、透明或自定义颜色。如果选择使用“自定义”颜色，可以单击“自定义”颜色选择框上的小黑三角，在弹出的颜色选择框中选择所需画布颜色。（5）单击“确定”按钮，便可开始创作了。第17页/共100页3.1.4 创建Fireworks文件 2、打开文件 打开文件的步骤如下：（1）选择“文件/打开”命令。（2）在弹出的“打开”对话框中找到文件所在的文件夹，选择文件。（3）单击“打开”按钮。用用 FireworksFireworks可以打开在其它应用程序中或以其它文可以打开在其它应用程序中或以其它文件格式创建的文件，但在打开非件格式创建的文件，但在打开非 PNG PNG 格式的文件时，将基格式的

14、文件时，将基于所打开的文件创建一个新的于所打开的文件创建一个新的 Fireworks PNG Fireworks PNG 文件。可以文件。可以使用使用 Fireworks Fireworks 的所有功能来编辑图像。然后，可以选择的所有功能来编辑图像。然后，可以选择“另存为另存为”将所编辑的文档保存为新的将所编辑的文档保存为新的 Fireworks PNG Fireworks PNG 文文件或保存为另一种文件格式；这样做，原始文件仍然保持件或保存为另一种文件格式；这样做，原始文件仍然保持不变，只是增加了新的格式文件罢了。不变，只是增加了新的格式文件罢了。第18页/共100页3.1.4 创建Fir

15、eworks文件 3、保存文件 新建的文件可以在任何时候保存，具体的做法是：（1）选择“文件/保存”命令。（2）在弹出“另存为”对话框中选择好保存路径，并在对话框中的“文件名”中输入文件名称，无需输入扩展名。（3）单击“保存”按钮即可完成保存。在创建了该文档后，再次选择“保存”命令，则保存对此文件的修改。第19页/共100页3.2 图形的绘制与编辑【本节内容】3.2.1 绘图工具简介3.2.4 按钮与动画3.2.3 层与蒙版 3.2.2 基本图形绘制与变形第20页/共100页3.2.1 绘图工具简介1、徒手工具 徒手工具用来移动操作界面。选择徒手工具后，按住鼠标左键，在图片窗口内拖动手形光标，

16、便可以移动操作界面的可视区域。2、放大镜（视图缩放）工具 放大镜工具用来缩放视图。选择放大镜工具后，在图片窗口内单击鼠标，便可以将图片放大。如果在使用放大镜工具时，按下了ALt键，那么便会将图片缩小。第21页/共100页3.2.1 绘图工具简介3、指针工具 指针工具用来选择路径。选择指针工具工具后，用鼠标单击对象，或拖拽划出一个包含对象全部或主要部分的区域，便可以选中一个或多个对象。4、选择后方对象工具 选择后方对象工具用来选择被其它对象隐藏或遮挡的对象 选择选择后方对象工具后，在堆叠的对象上反复单击鼠标左键，便会以层叠顺序自上而下通过对象，直到选择所需的对象。5、部分选定工具 如果多个对象被

17、组合在一起，部分选定工具可以用来对对象的组成部分进行选定。第22页/共100页3.2.1 绘图工具简介6、位图选取工具 用选取框工具、椭圆选取框工具、套索工具、多边形套索工具拖出一个选择区域，可以选取位图的编辑范围。用魔术棒工具在图像中点击可以选择图像中颜色区域。7、铅笔和钢笔工具 选择铅笔或钢笔工具后，通过拖拽与逐段单击鼠标可以绘制咯径。8、矩形等图形绘制工具 选择矩形等图形绘制工具后，拖拽鼠标可以绘制矩形等图形形状。9、文本工具 选择文本工具后，可以在文档中实施文本的输入。第23页/共100页3.2.1 绘图工具简介10、形体变换工具 利用缩放工具可以旋转或缩放变形，但对象的边角及形体内部

18、像素不变；利用倾斜工具可以以对象某边为轴进行倾斜变形；利用扭曲工具可以拉伸对象的边角进行扭曲变形11、修改路径工具使用重绘路径工具、自由变形工具、更改区域形状工具、路径洗刷工具、刀子工具可以修改进行修改第24页/共100页3.2.1 绘图工具简介12、位图修饰工具 利用刷子工具可以绘制不同效果的图画，利用橡皮擦工具可以擦除位图中的像素，利用橡皮图章工具可以复制局部图像，利用红眼消除工具和替换颜色工具可以改变位图的色彩等等13、颜色工具 吸管工具用来取色，油漆桶工具用来填充颜色。第25页/共100页3.2.2 基本图形绘制与变形1、基本的线形、矩形和椭圆的绘制绘制直线、矩形或椭圆的步骤如下：（1

19、）从工具箱中选择“直线”工具、“矩形”工具或“椭圆”工具。（2）如果需要，在“属性”检查器中设置笔触和填充属性。在画布上拖动以绘制形状。（3）释放鼠标按住 Shift 键并拖动“直线”工具可限制只能按 45的倾角增量来绘制直线；按住 Shift 键并拖动“矩形”或“椭圆”工具可将形状限制为正方形或圆形。将指针放在预期的点，并按 Alt 键并拖动直线、矩形或椭圆绘制工具。绘制出的对象便以该点为中心。若要既限制形状又要从中心点绘制，则只要将指针放在预期的中心点，按 Shift+Alt 键并拖动绘制工具。第26页/共100页3.2.2 基本图形绘制与变形2、多边形的绘制使用“多边形”工具既可以绘制多

20、边形，也可以绘制星形。具体操作步骤如下：（1）从工具箱中选择“多边形”工具（2）在“属性”检查器中进行形状及边等相应的属性设置。在画布上拖动以绘制形状。（3）释放鼠标。便可绘制出多边形或星形第27页/共100页3.2.2 基本图形绘制与变形3、扩展图形的绘制Fireworks CS4中提供了一组扩展矢量工具，利用它们可以绘制L形、圆角矩形、斜切矩形、斜面矩形、星形、智能多边形、箭头、螺旋形、连接线形、面圈形和饼形等几何图形，（1）从工具箱中选择扩展图形工具。（2）如果需要，在“属性”检查器中设置笔触和填充属性。在画布上拖动以绘制形状。（3）释放鼠标。便可绘制出扩展图形。使用鼠标拖动扩展图形（以

21、星形为例）上的锚点可以对所绘图形进行调整。选择“窗口自动形状属性”命令可以在打开的自动形状属性面板中调整扩展图形的各种属性。第28页/共100页3.2.2 基本图形绘制与变形3、扩展图形的绘制（4）改变单个控制节点的效果在制作好第一个星形的基础上，通过往内、往外移动“圆度1”节点，或者往外、往内移动“圆度2”节点，分别可以得到第一行的第2、3、4、5个图形。（5）综合改变多个控制节点的效果类似地，可以制作出其它扩展矢量图形来，如图3-10所示。图中适当调节了图形的控制节点。第29页/共100页3.2.2 基本图形绘制与变形4、不规则图形的绘制不规则形状的轮廓被称为路径。钢笔工具既可用来绘制直线

22、路径和曲线路径。因此，绘制不规则图形可采用“钢笔”工具。（1）绘制直线路径应用钢笔工具生成直线路径时，首先选择钢笔工具，然后在绘图区内单击，再依次在确定的下一个位置单击，一直到在终点处双击完成。如果要绘制出封闭路径，只要使终点与第一个点重合，且将结束时的双击改为单击即可。第30页/共100页3.2.2 基本图形绘制与变形4、不规则图形的绘制（2）绘制曲线路径绘制曲线路径段时，首先单击以放置第一个角点（路径形状发生激剧变化的点），然后将将鼠标移到下一个位置，单击并拖动以产生一个曲线点；若要继续绘制，则只要重复上述操作即可。如果双击并产生一个新点，即可产生一个曲线点，如果只是单击，则产生一个角点。

23、终点的绘制方法与直线路径段终点的绘制方法相同。第31页/共100页3.2.2 基本图形绘制与变形4、不规则图形的绘制（3）修改路径可通过拖动点手柄来进一步修改曲线路径段，通过转换各个点来将直线路径段转化成曲线路径段。选择钢笔工具后，在路径上单击曲线点可以将曲线点转换成角点；在角点上拖拽鼠标可以将角点转换成曲线点。在曲线路径段上没有曲线点和角点的地方单击可增加曲线点；在直线路径段上没有曲线点和角点的地方单击可增加角点。双击曲线点可将该曲线点删除；单击角点可将该角点删除。第32页/共100页3.2.2 基本图形绘制与变形5、自动形状绘制 选择“窗口/自动形状”命令可以打开形状面板，在面板中选择需要

24、的形状并用鼠标拖拽到画面中，即可向画面添加形状；拖到画面的形状有多个节点，通过调节节点可以得到不同的显示效果。第33页/共100页3.2.2 基本图形绘制与变形6、图形的变形要对对象进行变形操作，首先选取对象，再选择工具箱上的变形工具，通过用鼠标拖拽对象四周的手柄和中心点，可以将对象实施缩放、旋转、倾斜、扭曲、翻转等变形。除了通过拖拽实施图形变形外，还可以通过以下三种方法来使对象变形：（1）在属性检查器的宽和高中输入对象的宽度和高度值。（2）在信息面板的宽和高中输入对象的宽度和高度值。（3）对选定对象执行“修改/变形/数值变形”命令，在“数值变形”对话框设置变形参数。第34页/共100页3.2

25、.2 基本图形绘制与变形7、创建位图对象创建位图主要有以下四种方法：方法一：创建新的位图对象（1）从工具箱的“位图”部分中选择“刷子”或“铅笔”工具。（2）用“刷子”或“铅笔”工具在画布上绘画或绘图以创建位图对象。方法二：创建空位图对象请执行下列操作之一：l单击层面板中的“新建位图图像”按钮。l选择“编辑/插入/空位图”。l绘制选区选取框，从画布的空白区域开始并填充它。第35页/共100页3.2.2 基本图形绘制与变形7、创建位图对象方法三：剪切或复制像素并将它们作为一个新位图对象粘贴 先用“选取框”工具、“套索”工具或“魔术棒”工具选择像素。然后执行下列操作之一：l选择“编辑/剪切”，然后选

26、择“编辑/粘贴”。l选择“编辑/复制”，然后选择“编辑/粘贴”。l选择“编辑/插入/通过复制创建位图”，将当前所选复制到一个新位图中。l选择“编辑/插入/通过剪切创建位图”，将当前所选内容剪切到一个新位图中。第36页/共100页3.2.2 基本图形绘制与变形7、创建位图对象方法四：将所选矢量对象转换成位图图像 请执行下列操作之一：l选择“修改/平面化所选”。l从层面板的“选项”菜单中选择“平面化所选”。矢量到位图的转换是不可逆转的，只有使用矢量到位图的转换是不可逆转的，只有使用“编辑编辑/撤消撤消”或撤消或撤消“历史记录历史记录”面板中的动作可以取消该操作。面板中的动作可以取消该操作。位图图像

27、不能转换成矢量对象。位图图像不能转换成矢量对象。第37页/共100页3.2.2 基本图形绘制与变形、应用颜色、笔触和填充 在“样本”面板、混色器、工具箱、属性检查器中都可以设置颜色。笔触和填充是对象最基本的两个属性。笔触附着在路径上，而填充则处于对象的内部。笔触属性主要包括笔触颜色、笔尖大小、描边种类、边缘柔和度和纹理填充等。填充属性主要包括填充颜色、填充类别、填充的边缘和填充纹理和透明等。填充类别包括实心、网页抖动、渐变和图案等四类 第38页/共100页3.2.2 基本图形绘制与变形9、创建文字对象 Fireworks 文件中的文本都显示在一个带有手柄的矩形（称为文本块）内，使用“文本”工具

28、可以输入、格式化、编辑图形中的文本。1）输入文本和编辑文本 输入文本和编辑文本可按以下步骤进行:（1）选择“文本”工具。（2）设置字体、字号、颜色等文本属性。（3）创建文本块。在文档中单击会创建一个自动调整大小的文本块；若拖动鼠标便会绘制出一个固定宽度的文本块。（4）键入文本。（5）如果需要，高亮显示文本块中的文本后为其重新设置格式。（6）结束文本输入。在文本块外部单击，或选择工具箱中的另一个工具，或按 Esc 键。第39页/共100页3.2.2 基本图形绘制与变形9、创建文字对象 2）移动文本块 可用以下两种方法移动文本块；方法一：像对待任何其它对象那样选择文本块并将其移动到文档中的任何位置

29、。方法二：在创建文本块时移动该文本块。其做法是,在按住鼠标按钮拖动鼠标创建文本块的过程中，按住空格键，将文本块拖动到画布上的另一个位置，释放空格键，继续绘制文本块。第40页/共100页3.2.2 基本图形绘制与变形9、创建文字对象 3）使用自动调整大小文本块和固定宽度文本块 当文本块中的文本指针处于活动状态时，文本块的右上角会显示一个空心圆或空心正方形。圆形表示自动调整大小文本块，正方形表示固定宽度文本块。自动调整大小文本块和固定宽度文本块的转换方法 双击文本块右上角或双击文本块内部均可实现两种文本块的相互切换。拖动调整文本块大小的手柄也能将文本块从自动调整大小类型更改为固定宽度类型。第41页

30、/共100页3.2.2 基本图形绘制与变形9、创建文字对象 4）文本附加到路径 文本附加到路径的操作步骤：（1）选中路径，按住 Shift 键不放，选中文本块。（2）执行“文本/附加到路径”命令，文字便沿路径排列。第42页/共100页3.2.2 基本图形绘制与变形9、创建文字对象5）将文本转换为路径 如果要将所选的文本转换为路径，只要执行“文本/转换为路径”命令即可。已转换的文本路径可以作为一组进行编辑，也可以对其中的字符路径单独编辑。若对其中的字符路径单独编辑，可以用“部分选定”工具选中字符路径。也可以对选中已转换的文本执行“修改/取消组合”命令后。再对字符路径进行编辑。第43页/共100页

31、3.2.3 层与蒙版 层将文档分成不连续的平面，蒙版是一种特殊的层，掩盖掉其它图片一部分。最近创建的层放在最上面，活动层的名称在层面板中高亮显示。层面板如图3-5所示图3-5 层面板第44页/共100页3.2.3 层与蒙版1、层的使用 1）层的新建、删除和复制 添加层：在未选择任何层的情况下单击“新建/重制层”按钮；或者选择“编辑/插入/层”命令，或者从层面板右上角的功能菜单中选择“新建层”，再在弹出的对话框中输入层名称后单击“确定”按钮。删除层：从层面板将层拖到删除层图标上；或者在层面板中选择层并单击删除层图标；或者选择层并从层面板的右上角功能菜单中选择“删除层”。复制层：从层面板将层拖到“

32、新建/重制层”按钮上；或者选择层并从层面板的右上角功能菜单中选择“重制层”。如果要将层上的所有所选对象复制到另一个位置，只要按住 Alt 键并将层的蓝色选择指示器拖到另一层即可 。第45页/共100页3.2.3 层与蒙版1、层的使用 2）层的查看 若要展开或折叠层上的对象，只需在层面板上单击层名称左侧的加号(+)或减号(-)按钮；如果要展开或折叠所有层，可以在按住 Alt 键的同时在层面板中单击层名称左侧的加号(+)或减号(-)按钮。显示或隐藏层：单击层或对象名称左侧的中间列中的方形使“眼睛”图标可见。显示或隐藏多个层：沿层面板中的“眼睛”列拖动指针。显示或隐藏所有层和对象：在层面板的右上角的

33、功能菜单中选择“显示全部”或“隐藏全部”。第46页/共100页3.2.3 层与蒙版1、层的使用 3）在层面板中合并对象 如果要合并对象，首先在层面板上选择要与位图对象合并的对象，然后执行下列操作之一：所选对象随即与位图对象合并。最终获得的是单个位图对象。要合并的最底端的所选对象必须直接位于位图对象之上 l从层面板的功能菜单中选择“向下合并”。l选择“修改/向下合并”。l右击画布上的所选对象，在弹出的快捷菜单中，选择“向下合并”。l按快捷键Ctrl+E第47页/共100页3.2.3 层与蒙版1、层的使用 4）层的移动、重命名和锁定 移动层：只要将层拖到所需的位置。重命名层：在层面板中双击层之后，

34、在弹出“层名称”文本框中输入层名称，再按回车键或在文本框外的位置单击，便完成层的重命名。锁定层：单击紧邻层名称左侧的列中的方形。锁定多个层：沿层面板中的“锁定”列拖动指针。锁定或解锁所有层：在层面板的右上角的功能菜单中选择“锁定全部”或“解除全部锁定”。第48页/共100页3.2.3 层与蒙版2、蒙版的使用 1）矢量蒙版和位图蒙版的概念 矢量蒙版：矢量蒙版有时被称为剪贴路径或粘贴于内部。它是将其下方的对象裁剪或剪贴为其路径的形状，从而产生切饼模刀的效果图形对象。第49页/共100页3.2.3 层与蒙版2、蒙版的使用 1）矢量蒙版和位图蒙版的概念位图蒙版：位图蒙版是使用其灰度外观或自身透明度的像

35、素影响下层对象的可见性的位图对象。第50页/共100页3.2.3 层与蒙版2、蒙版的使用 2）用现有对象创建蒙版 （1）使用“粘贴为蒙版”命令遮罩对象 步骤一：选择要用作蒙版的对象 步骤二：定位选区，使它与要遮罩的对象或对象组重叠 步骤三：选择“编辑/剪切”命令或Ctrl+X快捷键，剪切要用作蒙 版的对象 步骤四：选择要遮罩的对象或对象组 步骤五：执行“编辑/粘贴为蒙版”或“修改/蒙版/粘贴为蒙版”命令。第51页/共100页3.2.3 层与蒙版2、蒙版的使用 2）用现有对象创建蒙版 （1）使用“粘贴于内部”命令遮罩对象 步骤一：选择要用作贴入内部的内容的对象。步骤二：放好这些对象，使它们与要在

36、其中粘贴内 容的对象重叠。步骤三：执行“编辑/剪切”，将对象移到剪贴板。步骤四：选择要将内容粘贴到其中的对象。步骤五：执行“编辑/粘贴于内部”第52页/共100页3.2.3 层与蒙版2、蒙版的使用 3）组合蒙板对已编辑好多个对象，可以使用组合蒙板的方法制作蒙板效果。具体步骤如下：导入一幅图作为被遮挡物。利用工具绘制一个图形，譬如选择星形工具，绘制一个星形作为遮挡物。选中两个对象，选择“修改/蒙板/组合为蒙板”命令。产生的蒙板效果。第53页/共100页3.2.4 按钮与动画 1、元件 元件是在库中存放的对象，它可以被多次使用到文档中而只调用同一个对象。Fireworks 提供图形、动画和按钮三种

37、类型的元件。1）创建元件 （1）对象转换为元件 选择对象，然后选择“修改/元件/转换为元件”（2）新建元件 执行下列操作之一：选择“编辑/插入/新建元件”。从“库”面板的功能菜单中选择“新建元件”。在“库”面板上单击“新建元件”按钮。第54页/共100页3.2.4 按钮与动画 1、元件 2）编辑元件 （1）编辑元件及其所有实例 通过双击某个实例或者对某个实例执行“修改/元件/编辑元件”命令，打开元件编辑器。对该元件进行更改，然后关闭窗口。（2）重命名元件 在“库”面板中，单击“元件属性”按钮或双击元件名称。在“元件属性”对话框中更改该名称，然后单击“确定”。（3）重制元件 在“库”面板中选择元

38、件。从“库”面板的功能菜单中选择“重制”。第55页/共100页3.2.4 按钮与动画 1、元件 2）编辑元件 （4）更改元件的类型 在“库”中双击元件名称。选择一个不同的“元件类型”选项。（5）在“库”面板中选择所有未使用的元件 从“库”面板的功能菜单中选择“选择未用项目”。（6）删除元件 在“库”面板中选择元件。从“库”面板的功能菜单中选择“删除”。单击“删除”。第56页/共100页3.2.4 按钮与动画 1、元件 3）图形元件的创建与应用第57页/共100页3.2.4 按钮与动画 2、按钮 按钮具有以下的四种状态 “释放”状态是按钮的默认外观或静止时的外观。“滑过”状态是当指针滑过按钮时该

39、按钮的外观。此状态提醒用户单击鼠标时很可能会引发一个动作。“按下”状态表示单击后的按钮。按钮的凹下图像通常用于表示按钮已按下。此按钮状态通常在多按钮导航栏上表示当前网页。“按下时滑过”状态是在用户将指针滑过处于“按下”状态时按钮的外观。此按钮状态通常表明指针正位于多按钮导航栏中当前网页的按钮上方。第58页/共100页3.2.4 按钮与动画 3、动画 使用Fireworks创建动画比较简单。首先制作动画元件，然后随时间改变动画元件的属性。文档中创建及导入的对象都可视为动画元件，一个动画里还可以使用其它动画元件，动画元件之间相互独立、互不干扰。制作好的动画可导出为GIF文件，使用Fireworks

40、的优化面板可以很方便地优化并导出动画。动画元件的每一个动作都放在“状态”中（Fireworks CS4之前称为“帧”），当按照一定顺序播放这些“状态”时，即能产生动画效果。第59页/共100页3.2.4 按钮与动画 3、动画 1.插帧动画的制作插帧动画就是逐帧动画，需要逐帧（状态）地制作画面。步骤如下：（1）执行“编辑/插入/新建元件”，弹出“新建元件”对话框。在对话框内选择元件属性为“动画”、并“确定”。（2）打开“状态”面板，在状态面板内单击“新建/重制状态”按钮，新建几个状态。如图3-43所示。（3）在状态面板中选择一种状态（例如状态1），然后在元件编辑窗口中制作动画元件在第1帧的图形，

41、如图3-44第1个星形。（4）再在状态面板中选择状态2，制作第2帧的图形，类似地在状态3和状态4分别制作动画元件第3帧、第4帧的图形。第60页/共100页3.2.4 按钮与动画 3、动画 2连续图像插帧动画的制作（1）准备制作动画的资源。首先准备一组生成动画的图片序列，如图3-45所示。它们分别以b1.pngb8.png的文件名保存。（2）打开多个文件生成动画。选择“文件/打开”命令，在弹出的“打开”对话框中按住Shift(Ctrl)键选取连续（相间）的多个文件，并在对话框中选择“以动画打开”的复选框，并单击“打开”按钮 第61页/共100页3.2.4 按钮与动画 3、动画 3.补间动画的制作

42、（1）执行“编辑/插入/新建元件”命令，新建一个名为“元件1”的图形元件。（2）制作元件1对象。（3）创建首、末帧对象（4）制作补间帧选择首帧和末帧实例对象，执行菜单命令“修改/元件/补间实例”，在弹出的对话框中，输入步骤数为“2”，并选中“分散到状态”，单击“确定”。（5）制作反向补间帧第62页/共100页3.3 图像处理【本节内容】3.3.1 图像选择修饰3.3.2 滤镜效果应用3.3.3 特效与样式使用3.3.4 图像合成第63页/共100页3.3.1 图像选择修饰1、选择像素 矩形和椭圆形选区、自由形状选区、色域选区（魔术棒）2、调整选区 1）添加选区：按住 Shift 键并绘制新的选

43、区可以将新旧选区合并为选区。2）减去选区：按住 Alt 键并绘制新的选区可以从旧选区中去除新的选区也包含的区域新为作为选区。3）交叉选区：按住 Alt+Shift 键并绘制新的选区可以将新旧选区的公共部分作为选区。4）反选选区：执行“选择/反选”命令，可以将位图中执行命令前未被选中的部分作为选区。第64页/共100页3.3.1 图像选择修饰2、调整选区 5）扩展选区：执行“选择/扩展选取框”命令，在“扩展选取框”对话框中输入扩展像素值，并击“确定”按钮，原选区会被扩展。6）收缩选区：执行“选择/收缩选取框”命令，在“收缩选取框”对话框中输入收缩像素值，并击“确定”按钮，原选区会被收缩。7）羽化

44、选区：执行“选择/羽化”命令，在“羽化”对话框中输入羽化量，并击“确定”按钮，原选区会被羽化。8）取消选区：按 Esc 键或者按Ctrl+D组合键或者执行“选择/取消选择”命令。第65页/共100页3.3.1 图像选择修饰3、修饰位图 1）克隆像素 “橡皮图章”工具可以克隆位图图像的部分区域，以便可以将其压印到图像中的其它区域。使用“橡皮图章”工具克隆位图图像的部分区域的步骤如下：（1）在工具箱中选择“橡皮图章”工具。（2）将鼠标移到文档中，鼠标指针会变成一个取样标志，单击某一区域将其指定为源（即要克隆的区域）。（3）在需要绘制的地方按下鼠标左键拖动，开始绘制，第66页/共100页3.3.1

45、图像选择修饰3、修饰位图 2）替换颜色 Fireworks 提供了两种不同的方式用一种颜色替换另一种颜色。可以在颜色样本中替换已经指定的颜色，或通过使用“替换颜色”工具直接在图像上替换颜色。使用“替换颜色”工具可以将图像中原有颜色用另外一种颜色替换的具体步骤如下：（1）在工具箱中选择“替换颜色”工具。（2）在“属性”检查器的“源色”框中，单击“样本”，并在“源色”样本面板选择颜色，或者在图像中选取颜色。（3）单击“属性”检查器中的“替换色”样本面板选择颜色作为要要替换的颜色。（4）在要替换颜色的图像上按下鼠标左键拖动，完成替换。图3-58 替换颜色前后图第67页/共100页3.3.1 图像选择

46、修饰3、修饰位图 3）消除红眼 使用“红眼消除”工具矫正此红眼效应。“红眼消除”工具仅对照片的红色区域进行快速绘画处理，并用灰色和黑色替换红色。具体操作步骤如下：（1）在工具箱中选择“红眼消除”工具。（2）在“属性”检查器中，设置容差和强度 （3）在要消除红眼的图像部分按下鼠标左键拖动产生一个红色覆盖区域，完成红眼消除。图3-59 消除红眼前后图第68页/共100页3.3.1 图像选择修饰3、修饰位图 4）模糊、锐化、减淡、加深、涂抹像素 “模糊”工具和“锐化”工具影响像素的焦点。“模糊”工具的作用是使鼠标绘制处的图案效果变模糊，“锐化”工具的作用是使鼠标绘制处的图案效果变清晰，“减淡”或“烙

47、印”工具可以分别减淡或加深图像的局部。而“涂抹”工具可以使创建图像倒影时那样将逐渐颜色混合起来。其作用是使鼠标按下处的颜色涂抹到其它位置。它们的使用方法是：先选择工具，再在“属性”检查器中设置相关属性，然后在要作用的像素上拖动鼠标。第69页/共100页3.3.1 图像选择修饰3、修饰位图 5）裁剪所选位图 从 Fireworks 文档中裁剪出一个矩形部分位图图像的操作步骤如下：（1）选择位图对象，方法是单击画布上的对象或单击它在“层”面板上的缩略图，或使用位图选择工具绘制一个选取框。（2）选择“编辑/裁剪所选位图”的命令。裁剪手柄出现在整个所选位图的周围，如果在第一步中绘制了选取框，则裁剪手柄

48、出现在选取框的周围。（3）调整裁剪手柄，直到定界框围在位图图像中要保留的区域周围。（4）在定界框内部双击或按 Enter 键裁剪选区。第70页/共100页3.3.2 滤镜效果应用 1、滤镜效果 “滤镜”菜单下包括“调整颜色”、“模糊”、“锐化”、“杂点”和“其它”等子命令项。“调整颜色”提供了自动色阶、色阶、曲线、亮度和对比度、色相和饱和度等子命令以优化图像的色彩。“模糊”提供了模糊、进一步模糊、高斯模糊、运动模糊、放射状模糊和缩放模糊等子命令以柔化位图图像的外观。“锐化”提供了锐化、进一步锐化、钝化蒙版等子命令以校正模糊的图像。“杂点”以制作出模仿旧照片或电视屏幕的静电干扰类似的图像；“其它

49、”下的“转换为 Alpha”使得基于图像的透明度将对象或文本转换成透明 第71页/共100页3.3.2 滤镜效果应用 2、滤镜效果的应用 滤镜效果可以用“滤镜”菜单下的“调整颜色”、“模糊”、“锐化”、“杂点”和“其它”子命令去实现。操作方法类似，步骤如下：（1）选择要处理的图像；（2）执行“滤镜”下的相应命令，或者单击“属性”检查器的“添加动态滤镜”按钮并从弹出的菜单中选择相应命令。（3）设置有关参数。（4）单击“确定”按钮。第72页/共100页3.3.2 滤镜效果应用 2、滤镜效果的应用 滤镜命令有 （1）自动色阶调整；（2）色阶调整；（3）使用曲线；（4）亮度/对比度调整。（5）色相、饱

50、和度调整。第73页/共100页3.3.3 特效与样式使用 1、使用特效 1）斜角与浮雕 斜角特效主要产生一种边缘斜面突出效果，它包括内斜角和外斜角两种。内斜角是以原对象的边缘向内产生斜面特效，而外斜角是以原对象的边缘向外产生斜面特效。浮雕特效主要产生一种凹凸效果，它包括凹入浮雕和凸起浮雕两种。第74页/共100页3.3.3 特效与样式使用 1、使用特效 2）阴影和光晕 阴影和光晕可以将纯色阴影、投影、内侧阴影和光晕应用于对象，并指定阴影的角度以模拟照射在对象上的光线角度。以上特效只要在“属性”检查器中单击“添加动态滤镜和选择预设”按钮，在弹出的菜单中选择相应的选项的子项即可应用。此外还可以使用