网页设计第12章

整理文档很辛苦,赏杯茶钱您下走!

免费阅读已结束,点击下载阅读编辑剩下 ...

阅读已结束,您可以下载文档离线阅读编辑

资源描述

网页设计与制作应用教程机械工业出版社同名教材配套电子课件2009.4第十二章层、蒙版和混合使用页面层和层操作应用蒙版混合模式12.1使用页面12.1.1添加、编辑和删除页面AdobeFireworksCS3文档(PNG)文件可以包含一个或多个页面。可以在开始绘制之前创建所有页面,也可以根据需要添加页面。如果未创建任何新的页面,则文件的所有元素都将驻留在一个页面上。1.创建、复制、删除页面创建新页面时,将在页面列表的末尾插入一个空白页面。单击“页面”面板上的“新建/复制页”按钮,新页面成为活动页,且在该面板中高亮显示,如图1所示。每个页面都具有独立的层次结构,包括可在不同页面间共享的网页层和常规层。创建复制页面时会添加一个新页面,将页面拖到“新建/复制页”按钮上,即可复制一个页面,它包含与当前所选页面相同的对象和图层层次结构。复制的对象保留原对象的不透明度和混合模式。可以对复制的对象进行更改而不影响原对象。删除页面时,在“页面”面板中选择该页面并单击垃圾桶图标,在该页上面的页面成为活动页面。每个页面都是一个不同的画布文档。可以根据需要自定义每个页面的画布大小、颜色和图像分辨率。若要编辑页面的画布大小、颜色或图像分辨率,步骤如下:1.从“页面”面板或文档窗口底部的页面弹出菜单中选择一个页面。2.选择【修改】/【画布】/【图像大小】,【修改】/【画布】/【画布颜色】,或者【修改】/【画布】/【画布大小】命令,进行所需更改。还可以在选择页面的画布时,使用“属性”面板执行这些更改。3.若要将更改仅应用于所选页面,需要选中“仅限当前页”复选框。若要将更改应用于所有页面,则取消选中该复选框。2.编辑页面12.1使用页面12.1.2使用主页如果具有所有页面公用的一些元素,则可以使用主页。在“页面”面板上,选择一个已创建的页面,然后从“选项”菜单中选择“设置为主页”,即创建了一个主页面。将普通页转换为主页时,该页会移至“页面”面板中的列表顶部,而且会呈现灰色,如图所示。12.1使用页面创建主页时,会将主页图层添加到每个页面的图层层次结构的底部,如图所示。通过从“层”面板的“选项”菜单中选择“删除主页图层”,可以删除此图层。主页不能具有共享层,因此将一个页面设为主页时,将删除所有共享层并将其更改为普通(非共享)层。12.1使用页面12.2层及层的操作在创建图层之前,必须先来了解图层面板,图层的操作大都是在图层面板中完成的,打开图层面板的方法是选择主菜单中【窗口】/【层】命令即可,面板各部分功能如图所示。12.2.1创建层Fireworks中,当创建新文档后,有两个图层将自动被创建,一个是“网页层”,该图层主要用来处理图像热点和切片等与网页操作密切相关的对象;另一个是“层1”,是默认的常规图层,主要处理普通图像对象,如图所示。12.2层及层的操作12.2.2层的操作新建层1.单击层面板上的新建/重制层按钮2.单击“层”面板右上角的控制菜单按钮,在弹出下拉菜单中单击“新建层”命令,随后弹出一个“新建层”对话框,填入新图层名称即可,如图所示。12.2层及层的操作选取图层要选取某一个图层,直接在“层”面板上单击所要的图层名,该图层将被激活,以蓝色高亮条显示,并在该层名称前出现一个代表可编辑状态的标志,即表示该图层已被选中。复制图层1.选中要复制的图层。2.单击“层”面板右上角的控制菜单按钮,在弹出下拉菜单中点击重制图层命令,随后弹出一个对话框,如图:3.单击“确定”完成复制。12.2层及层的操作重命名图层在“层”面板中双击要重命名的图层,弹出“层名称”对话框,如图所示,输入图层新名称后,按Enter键即完成重命名操作。改变图层叠放顺序在图像编辑过程中,经常需要调换对象的背景和前景位置,可以通过改变图层的叠放顺序来实现,在“层”面板中,选中要改变位置的图层。按住鼠标左键,上下拖动该图层到所需的位置,释放鼠标左键,则该图层就已经移动到相应的位置了。删除图层删除图层有几种方法,快捷的方法便是:选中要删除的图层,单击“层”面板上的“删除所选”按钮。即可将选中图层删除。12.2层及层的操作12.2.3在图层中编辑对象1.单层与多层编辑模式在图像编辑中只想对某一个图层的对象进行编辑,可以进入单层编辑模式,单击“层”面板右上角的上的控制菜单按钮,在弹出下拉菜单中点击“单层编辑”命令。如果要退出单层编辑模式,同样点击该命令,取消“单层编辑”命令的选中状态。12.2层及层的操作2.在图层中复制或移动对象在文档窗口中选中要复制的对象,此时可以在图层面板的图层列表上,看到该对象的图层上出现一个蓝色边框,如图:用鼠标拖拽这个边框,移动到目标层上,即完成了对象的移动;若要复制对象,可以在拖拽鼠标的同时,按下“Alt”键,鼠标指针右下角会多出一个“+”符号,表示复制对象。12.2层及层的操作12.2.4设置图层属性1.图层的显示和隐藏当按钮是这个状态时,图层处于显示状态;当按钮是空白时图层已经隐藏,在文档中就看不到该图层的对象了。2.图层的锁定和解锁将图层锁定,保证该图层上的对象不被错误的编辑,并且在图层中仍然能看到该对象的效果。操作很简单,只要在图层面板上选定要锁定的图层,单击面板上锁定按钮,出现锁定表示该图层已被锁定。12.2层及层的操作12.2.5帧中共享图层这个功能主要是针对动画而设置的,对于动画中可以保持不变的对象,可以采用共享图层的方式简化操作,减小文件大小。设置共享图层,选中要共享的图层,单击“层”面板右上角的控制菜单,在打开的下拉菜单中点击“共享此层”命令,命令执行后,会在该层上出现一个标志表示该层已被共享。要取消共享,操作同上,取消“共享此层”命令的选中状态即可。12.2层及层的操作蒙版又称为遮罩,是一种由最上层对象为下层对象提供外形,而下层对象为最上层对象提供色彩的一种图像处理效果。因此,我们把最上层对象称为“蒙版对象”,而下层对象则称为“被蒙版对象”。矢量和位图对象都可以成为蒙版对象或被蒙版对象。12.3应用蒙版1.打开需要进行蒙版操作的图像文件。2.新建一画布,在画布上画一个将作为蒙版的任意形状的对象。移动到被蒙版对象的上方。3.按住Shift键,选中蒙版和被蒙对象。4.选择主菜单【修改】/【蒙版】/【组合为蒙版】命令,完成了蒙版的制作。12.3.1创建蒙版创建矢量蒙版创建位图蒙版使用过Photoshop的用户可能对层蒙版并不陌生。Fireworks位图蒙版与层蒙版的相似之处在于:蒙版对象的像素影响下层对象的可见度。然而,Fireworks位图蒙版的用途要广泛得多:不管是使用其灰度外观还是使用其自身的透明度,都可以轻松更改其应用方式。另外,Fireworks的“属性”面板使蒙版属性和位图工具选项更易于访问,从而极大地简化了蒙版的编辑过程。12.3应用蒙版创建如图所示的位图蒙版效果的操作步骤如下:1.在Fireworks窗口中导入位图。2.选择工具箱中的“椭圆选取框”工具,并在其“属性”面板中设置参数:边缘羽化值为30,如左图所示。3.在画布区域拖拽出一个椭圆形。4.在“层”面板中,单击面板底部的“添加蒙版”按钮,即可生成位图蒙版,此时“层”面板的内容如右图所示。12.3应用蒙版12.3.2编辑蒙版创建蒙版后,原图层将合并。要编辑蒙版,比如移动蒙版对象,可以用鼠标点击蒙版图层的固定连接符号,取消连接,在点击蒙版对象,出现一个黄色边框,如图所示。表明选中了蒙版对象,可以对它进行移动操作。两个对象被组合为蒙版后会淡化显示两对象的重叠部分。而淡化的程度是由蒙版对象和背景色之间的明暗关系来决定。色彩越明亮,淡化度就越小,蒙版对象也就越清晰。而在“层”面板中,两个对象被组合成蒙版后,就成了一个蒙版图形,被组合在同一个对象层里,如图所示。12.3应用蒙版用鼠标点击这一对象层的被蒙版对象时,该对象外围会有一个蓝色边框。当该被蒙版对象是位图时,则可以用各种位图工具对被蒙版对象进行编辑。而当被蒙版对象是矢量图时,则可用各种矢量工具对其进行编辑或修改。同样的,当该对象层中的蒙版对象是位图或矢量图时,也可以使用各种位图或矢量工具对其进行修改,如上右图所示。12.3应用蒙版12.4混合模式“混合”是指改变文档中对象的透明度,使下层的对象可以透过上层显示出来。混合操作主要是指控制透明度和修改混合模式的操作。12.4.1编辑透明度选中要编辑的对象,在“层”面板上的“透明度”选项中设置透明度值(0~100),0表示完全透明,100为完全遮挡。透明度值设为100和50的效果如图所示。12.4.2编辑混合模式通过编辑图层的混合模式,可以改变对象的透明重叠区域的颜色调和方式。在“层”面板中有一个“混合模式”下拉列表,如图所示。12.4混合模式列表中有数种混合模式,这些模式主要是通过前景颜色和背景颜色调和的不同方式来产生不同的颜色效果,下面是采用了“差异”模式所产生的效果,如图所示。12.4混合模式12.5边学边做本节通过实例介绍Fireworks中层、蒙版和混合操作的一些过程,目的是使初学者掌握Fireworks的图像处理操作基本方法,同时,对软件在这方面的操作方法有一个清晰的认识。以汽车为例简单编辑位图。思考与练习①混合操作中,透明度和混合模式有什么不同?②蒙版与剪切有什么不同?③利用层来处理图像时,如何同时处理多层图像内容?④蒙版由蒙版对象和被蒙版对象组成,如何创建矢量和位图的蒙版对象

1 / 25
下载文档,编辑使用

©2015-2020 m.777doc.com 三七文档.

备案号:鲁ICP备2024069028号-1 客服联系 QQ:2149211541

×
保存成功