网页图像的制作与编辑基础.pptVIP

第11章网页图像的制作与编辑基础,能够制作简单的网页图像，处理网页图像,本章目录,11.1Fireworks8简介11.2矢量图形的绘制与编辑11.3文本对象11.4位图对象11.5对象的效果11.6图层和蒙版11.7GIF动画11.8网页图像的制作11.9网页图像的优化与导出11.10综合实例,11.1Fireworks8简介,一、Fireworks8的功能二、Fireworks8的工作界面三、Fireworks8的基本操作,二、Fireworks8的工作界面,1.初始界面2.新建文档对话框画布大小:宽高画面颜色3.工作界面标题栏菜单栏工具栏工具面板属性面板文档窗口面板组,初始界面,新建：单击右侧的“Fireworks文件”编辑图像：单击左侧的“打开”,新建文档界面,工作界面,三、Fireworks8的基本操作,1.创建新文件2.打开文件3.保存和导出文件4.关闭文件,1.创建新文件,1）打开“新建文档”对话框方法1：在“初始页面”中单击“新建”|“Fireworks文件”方法2：单击“文件”|“新建”方法3：Ctrl+N2）设置画面的尺寸(像素、英寸、厘米）和颜色分辨率的单位：像素/英寸、像素/厘米3）单击“确定”4）在文档窗口绘制编辑图像,2.打开文件,方法1：“开始页面”|“打开”方法2：“文件”|“打开”方法3：Ctrl+O方法4：“文件”|“导入”,3.保存和导出文件,方法1：单击“文件”|“保存”/“另存为”在对话框中输入文件名单击“保存”按钮方法2：Ctrl+S/Ctrl+Shift+S方法3：执行“文件”|“图像预览”命令选择图像格式单击“导出”输入文件名在导出列表框中选择“仅图像”单击“导出”注意：默认格式为PNG格式，若要得到非PNG格式，必须执行“文件”|“图像预览”,4.关闭文件,方法1：执行“文件”|“关闭”方法2：按CTRL+W方法3：单击窗口右上角的关闭按钮,11.2矢量图形的绘制与编辑,11.2.1位图图像和矢量图形11.2.2矢量图形工具11.2.3矢量图形的绘制与编辑,11.2.1位图图像和矢量图形,1.位图图像定义：是由排列成网格的称为像素的点组成的图像颜色和位置：由网格中每个像素的位置和颜色值决定分辨率：位图图像与分辨率相关联，编辑后的图像将改变显示质量编辑位图图像修改是像素2.矢量图形定义：是用直线或者曲线呈现的图形。颜色：取决于轮廓曲线和轮廓封闭区域的颜色形状：由轮廓的直线或曲线决定分辨率：具有独立的分辨率，以各种各样的分辨率显示在输出设备上，而不改变图像的质量编辑图形修改的是描述开关的线条和曲线的属性,11.2.2矢量图形工具,1.选择工具“指针工具”选择、移动对象或路径，方法是单击“指针工具”，在图像或路径上单击鼠标“选择后方对象”：选择组合对象中被遮盖的对象，方法是在指针工具右侧的下拉菜单中单击该工具，在对象上单击“部分选择工具”：选择组合对象中的一部分对象，方法是，选择该工具，在被选择对象上单击2.形状和路径工具1）直线工具2）基本形状工具3）钢笔工具4）矢量路径工具,5）重绘路径工具6）自由变形工具7）更改区域形状工具8）刀子工具3.颜色工具4.图形变形工具,形状路径工具,直线工具：绘制直线、水平垂直和45度直线（shift+拖动）基本形状工具：绘制14种基本图形注意:通过对基本形状的操作可以变化出N种图形钢笔工具：绘制线段与曲线路径矢量路径工具：绘制自由形状的路径，在“钢笔”工具右侧的下拉菜单中选择重绘路径工具：绘制或修改已有的路径，在“钢笔”工具右侧的下拉菜单中选择自由变形工具：弯曲和变形矢量对象更改区域形状：推拉曲折尖锐的路径刀子工具：切割矢量对象,颜色、图形变形工具,3.颜色工具笔触颜色工具：设置图形周围线条的颜色填充颜色工具：设置图形中间的颜色油漆桶工具：给封闭路径填充颜色滴管工具：在采集对象上吸取样本颜色，在另一图形上进行填充4.图形变形工具缩放工具：对象的放大与缩小倾斜工具：对象的倾斜与旋转扭曲工具：变换图形的形状,11.2.3矢量图形的绘制与编辑,绘制直线、矩形、多边形注意：与快捷键的配合Shift:正方形Alt：中心对称图形Shift+Alt：从中心点绘制正方形、正圆绘制时空格键+拖动对象，调整基本形状的位置2.绘制可以衍变的图形3.图形效果设置4.图形的变形5.绘制自由变形路径6.绘制曲线路径7.用矢量工具编辑路径8.用菜单命令编辑路径图形制作练习,2.绘制可以衍变的图形,选择基本形状工具绘制图形拖动或单击图形上的黄色菱形按钮变形设置图形填充、笔触设置图形的效果,3.图形效果设置,选中图形在“属性”检查器中设置：宽、高X、Y：图形在页面中的位置油漆桶：填充图形的颜色实心：图形的填充效果填充颜色：设置填充的颜色a.增加渐变颜色:在调色板按钮行单击，选择颜色b.减少渐变颜色：在调色板按钮上按住鼠标，扔出不透明度：设置图形的透明度，拖动鼠标1000从完全不透明到完全透明,4.图形的变形,选中图形选择变形工具缩放倾斜扭曲拖曳、旋转鼠标,5.绘制自由变形路径,选择“矢量路径”工具设置笔触和填充属性拖动鼠标绘制（Shift+绘制，绘制水平或垂直线）释放鼠标，结束（闭合路径返回到路径起始点，释放鼠标）,6.绘制曲线路径,选择钢笔工具连续线段路径：在不同位置单击鼠标曲线路径：单击第一个节点，移到下一个节点拖动拐角节点：在一个节点处单击曲线节点：在一个节点处单击并拖动结束路径：双击最后一个结点封闭路径：单击第一个结点注意：节点类型的改变（以下操作用“部分选择”工具）曲线节点转换为拐角节点：钢笔工具+单击拐角节点转换为曲线节点：钢笔工具+单击拖动改变节点一侧线段：alt+拖动删除节点：选中+Delete移动节点：选中+拖动增加节点：在路径上用钢笔工具单击,7.矢量工具变形路径,自由变形工具：钢笔|自由变形工具1）拉伸路径自由变形工具+拖动拉伸指针2）推动所选路径自由变形工具+拖动推动指针3）扭曲所选路径更改区域形状工具+拖动扭曲指针注意：指针的大小按住鼠标按钮时，按2或右箭头增加指针宽度按住鼠标按钮时，按1或左箭头减少指针宽度,8.使用菜单命令编辑路径,路径混合：通过路径的并集、交集，制作各种图案选中多个路径执行菜单：“修改”|“组合路径”选择以下命令之一：1）接合:连接两个断开的路径,创建复合路径2）拆分:分离复合路径3）联合:两个相交的封闭路径合并为一个整体的新路径4）交集:将两个路径相交部分创建为一个新路径5）打孔:删除路径中的一部分7）裁剪:按照另一路径的形状取得新路径,练习1、绘制奔跑的小人,练习目的：使用矢量工具绘制简单线条的矢量作品使用工具：圆形、矩形、直线、折线、面圈、“自由变形工具”注意：1.嘴：将一个圆，用刀子工具切割2.用面圈绘制小人的腿，指向最上边的控制点，进行分段,练习2、水滴的制作,练习目的：调整矢量线条使用工具：椭圆工具、油漆桶、用部分选择工具调整矢量线条注意：1.水滴的上边尖角，绘制一椭圆，将最上边的曲线节点转换为拐角节点（先用部分选定工具选择图形,再转换）2.水滴中的反光部分（白色）绘制一细长的椭圆，变形3.为水滴设置投影效果，调整柔化程度10,练习3、网站图标的制作,练习目的：通过基本矢量图的创建、修改及渐变的填充，设计出玻璃质感的效果,练习5可爱葱头小P孩,分别用圆形工具绘制脸、躯干等部分圆形经过切割绘制嘴和鼻子头上的高光部分用变形的圆形用钢笔工具绘制头发和身上的装饰,11.3文本对象,一、文本对象的创建与编辑二、文本对象的艺术化,一、文本对象的创建与编辑,1.输入文本选中“矢量文本”工具在文档窗口单击生成文本框输入字符2.设置文本属性设置字体、字号、样式和颜色设置字距、行间距和字符宽度设置文本排列方式和对齐方式设置消除锯齿级别应用笔触和填充,练习1水印字,将文字设置为“华文彩云”，灰色#cccccc，旋转45度角，添加滤镜效果“阴影和光晕|投影”，最后设置文字的不透明度为25。,练习2金属字,属性设置，如图所示,渐变：#cccccc,#000000,#cccccc,添加滤镜效果,二、文本对象的艺术化1,1.将文本附加到路径：文本按路径走势排列输入文本绘制路径选中路径和文本选择菜单：“文本”|“附加到路径”设置对象属性“文本偏移”：文本向左向右移动，在“文本偏移”右侧的文本框内输入数字（+数顺时针偏移，-数逆针偏移）倒转方向：文本方向由外侧变为里侧改变文本的方向：“文本”|“方向”，设置文本垂直、倾斜的环绕效果解除文字的附加路径：“文本”|“从路径上剥离”,二、文本对象的艺术化2,2.变换文本：缩放、旋转、倾斜、翻转可用工具箱上的变形对象工具3.文本转换为路径文本转换为路径选中文本执行“文本”|“转换为路径”打散文字“修改”|“取消组合”选中节点，拖动注意：将文本转换为路径并打散后，通过拖动、移动、变形可以制作特形字,练习1,制作一个如下图所示的特效字提示：输入文本，设置字体、字号55，颜色、加粗，字间距20，水平缩放150，转换为路径，取消组合，选中“山”，描边种类为“毛笔”|“羽毛笔”、笔尖大小为6，笔触颜色为#999999,内斜角等效果,练习2制作打孔效果的特效字,先用文本工具输入文本设置文本属性用箭头工具绘制箭头变形箭头使用路径修改命令：组合、打孔等具体参见资料,练习3,倒转方向文字提示：输入文本，绘制椭圆路径，附加到路径，文本对齐到路径的中间部分，文本垂直，倒转方向等,练习4漂亮手提袋的制作,使用钢笔工具画出轮廓(包括白色和绿色部分,分几次完成)用钢笔工具画出手提袋的阴影部分的轮廓,设置透明度20%和消除锯齿用椭圆工具画出手提袋穿绳的圆孔钢笔工具画出拉绳写上文字,典型的网站总目标,11.4位图对象,11.4.1位图图像工具11.4.2绘制位图图像11.4.3位图图像的编辑,11.5对象的效果,11.5.1立体效果立体效果就是网页中按钮、菜单、导航条等的质感、装立体感、层次感的特效11.5.2滤镜调整颜色滤镜组模糊滤镜组锐化滤镜组斜角和浮雕滤镜组阴影和光晕滤镜组杂点滤镜组,11.6图层和蒙版,11.6.1图层概念及层面板11.6.2图层的基本操作11.6.3蒙版的类型11.6.4蒙版的创建11.6.5蒙版的编辑,11.6.1图层概念及层面板,1.层(图层)图层又称为层,就是一张张的透明的纸,每一个层是互相独立的,在每个层中均可以编辑处理图像,最后将所有图层又叠加一起,构成一幅图像2.层面板层的所有操作都可以在层面板中进行,见右图默认层:层1和网页层网页层:包含指定交互的对象,切片、热区等，不能被删除，为共享层出现在所有帧中层1：若不添加新层的话，所有绘制的对象均放在该层中,11.6.2.图层的基本操作,1）选中层和层中的对象在层面板中，单击层的名称，在层上选择对象2）层的添加与删除新建层:新建/重制层复制层:拖动层到新建/重制层按钮上删除层:选中,单击删除按钮3）查看层4）组织和管理层重命名层或对象移动层或对象复制多个对象5）合并层6）调整层和对象的不透明度,11.6.3蒙版的类型,蒙版就象是一块透明的膜,实际上是一幅256色的灰度图像,它必须作用于某个与之链接的层.蒙版的作用是遮盖部分画面可以形象地理解为在“蒙版”上抠了一个洞，透过这个洞可以看到位图，其他的部分都看不到了。蒙版的类型：矢量蒙版、文字蒙版、位图蒙版,11.6.4蒙版的创建,1.矢量蒙版2.文本蒙版3.位图蒙版,1.矢量蒙版,1）创建矢量蒙版绘制蒙版对象选择蒙版对象,剪切选择被遮盖的对象粘贴为蒙版2）修改矢量蒙版属性路径轮廓灰度外观,2.文本蒙版,导入图片输入文本：光标定位在图片上，输入创建蒙版:选择文本,剪切,选中图片,粘贴为蒙版效果：文字蒙版是为了文字颜色的改变（取图片对应位置的颜色），让被遮盖的图像按照文本的路径显示图像，即文本路径上透出图像。,3.位图蒙版,1）创建位图蒙版（同矢量蒙版）注意：创建的图像保存时，保存为gif的格式，在“图像预览”对话框中，设置透明度（索引色透明或Alpha透明）2）修改位图蒙版属性灰度Alpha,位图蒙版练习,用蒙版修饰下面的位图片，效果如图所示提示：导入照片位图，导入蒙版位图，选中蒙版位图，剪切，粘贴为蒙版,综合练习：制作相框,步骤：1.导入位图2.绘制一个矢量圆角矩形，笔触设置为“非自然中的一种”。4.选择位图，执行剪切，然后选中作为蒙版的矩形，执行“编辑|粘贴于内部”。,11.6.5蒙版的编辑,1.选择蒙版2.选择被蒙版对象3.移动蒙版和被蒙版的对象4.修改蒙版的外观5.蒙版的禁用启用禁用禁用蒙版即禁止蒙版起作用“修改”|“蒙版”|“禁用蒙版”启用：（修改|蒙版|启用蒙版）6.删除蒙版：“修改”|“蒙版”|“删除蒙版”对象与蒙版的链接默认情况下对象与蒙版间都存在一种链接关系（标志为一链接符号），二者成为一个整体，单击链接符号删除链接,11.7创建GIF动画,11.7.1帧面板11.7.2帧帧动画11.7.3补间动画11.7.4动画元件动画11.7.5共享层将一个完成的运动过程，分解为多个步骤。动画中运动的基本单元是帧，每个步骤放在一个帧上，不同的帧在一个连续时间段内的不同时间中显示，视觉上成为运动效果，即动画。动画运动方式：直线运动、旋转、不透明度渐变、缩放动画的制作法：帧帧动画、补间动画、动画元件动画,11.7.1帧面板,帧面板是创建和组织帧的地方，在帧面板中可以看到每个帧的内容，重命名、组织帧、设置动画单元的时间。1.打开帧面板选择“窗口”|“帧”命令2.帧的基本操作添加：单击“新建”|“重制帧”按钮复制：选中帧，将其拖到“新建”|“重制帧”按钮上删除：选中帧，单击面板上的删除按钮帧延时：双击“帧延时”（帧面板上的数字），在文本框内输入时间，默认为7/100秒,1）使用“洋葱皮”洋葱皮：来源于种传统的动画技术，即使用很薄的、半透明的描图纸来查看动画序列使用洋葱皮的操作：显示下一帧之前和之后显示所有帧自定义多帧编辑2）循环次数3）新建、删除4）分散到帧：,17.2帧帧动画,1.帧-帧动画层与帧的关系:,帧包含层,即每个帧可以由若干个层组成.原理：一帧一帧地绘制图像,连接起来成为一幅完整的动画。方法：每添加一帧绘制一幅图像。预览：单击“播放”按钮导出：图像预览，选择“GIF动画”，导出特点：原理简单、工作量大练习1：水平滚动的文字“海誓山盟”,11.7.3补间动画,1）补间动画的原理在两幅关键图中间通过插值的方法来获得两幅图间的过渡图2）创建元件和实例元件：指可以重复使用的图形、动画和按钮实例：是指将元件拖入到文档中、在文档中的具体表现。3）创建补间动画,元件、实例的创建,步骤打开“元件属性”对话框：编辑|插入|新建元件输入名称、选择类型为图形，单击“确定”绘制图形，并编辑图形打开库面板：窗口|库，查看元件编辑元件实例的创建：从库中向文档窗口拖动生成实例元件与对象的转换元件转换为对象：修改|元件|分离对象转换为元件：修改|元件|转换为元件元件与实例的关系元件是实例的模板实例是元件的特例,创建补间动画,制作一个元件生成两个实例插入补间实例：选择两个实例，插入修改|元件|补间实例设置中间帧的帧数，选择“分散到帧”注意：取消“分散到帧”，生成的是静态图像,如果以后想生成动画,可以选择所有实例单击面板中的”分散到帧”按键,生成动画单击“确定”提示：用该方法创建的动画，可以作任意曲线的运动，即每一帧都是关键帧，可以修改每一帧中对象的位置,11.7.4动画元件动画,1）创建或打开并选中一个对象2）创建动画打开动画对话框：修改|动画|选择动画设置动画参数：帧、移动、方向、缩放到、不透明度、旋转、顺时针单击“确定”提示：用该方法创建的动画只能作直线运动，即自动生成的帧都不是关键帧3）修改动画元件属性拖动运动控制杆，进行调整通过属性面板进行调整,动画对话框,共享层,1）共享层即是将某个层中的图像在每个帧中都可见2）创建双击指定的层（或者用层面板“选项”菜单进行选择）选择“共享交叠帧”在对话框以外的地方，单击3）禁用共享层双击指定的层（或者用层面板“选项”菜单进行选择）取消“共享交叠帧”复选项,实例,1.制作“海上升明月，天涯共此时”文字绕圆月旋转的动画2.制作一个带有动画的站标3.制作一个有下雨效果的动画4.制作一个有动画效果的Banner,11.8网页图像的制作,11.8.1创建网页logo和banner11.8.2创建导航条11.8.3创建网页图像映射和热点,11.8.1创建网页的logo和banner,1.制作网页的logo1)设计画布大小:一般为10060左右2)制作logo图形3)设计效果和特效4)输入文本:通常为网站的名称和域名5）预览保存2.制作网页的banner1)设计画布大小:一般为47060(宽度可视logo后的页面设定,高度与logo的高度一致)2)制作或导入图片3)设置属性，设计动画效果4）预览保