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

《网页图像的制作与编辑基础.ppt》由会员分享，可在线阅读，更多相关《网页图像的制作与编辑基础.ppt（71页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、大纲第第11章章 网页图像的制作与编辑基础网页图像的制作与编辑基础能够制作简单的网页图像，处理网页图像能够制作简单的网页图像，处理网页图像大纲本章目录本章目录11.1 Fireworks 8简介简介11.2 矢量图形的绘制与编辑矢量图形的绘制与编辑11.3 文本对象文本对象11.4 位图对象位图对象11.5 对象的效果对象的效果11.6 图层和蒙版图层和蒙版11.7 GIF 动画动画11.8 网页图像的制作网页图像的制作11.9 网页图像的优化与导出网页图像的优化与导出11.10综合实例综合实例大纲11.1 Fireworks 8简介简介一、一、Fireworks 8的功能的功能二、二、Fir

2、eworks 8的工作界面的工作界面三、三、Fireworks 8的基本操作的基本操作大纲二、二、Fireworks 8的工作界面的工作界面1.初始界面初始界面2.新建文档对话框新建文档对话框画布大小画布大小:宽高宽高画面颜色画面颜色3.工作界面工作界面标题栏标题栏菜单栏菜单栏工具栏工具栏工具面板工具面板属性面板属性面板文档窗口文档窗口面板组面板组大纲初始界面初始界面新建：单击右侧的新建：单击右侧的“Fireworks文件文件”编辑图像：单击左侧的编辑图像：单击左侧的“打开打开”大纲新建文档界面新建文档界面大纲工作界面工作界面工具面板工具面板文档窗口文档窗口面板组面板组标题栏标题栏菜单栏菜单栏

3、工具栏工具栏属性面板属性面板大纲三、三、Fireworks 8的基本操作的基本操作1.创建新文件创建新文件2.打开文件打开文件3.保存和导出文件保存和导出文件4.关闭文件关闭文件大纲1.创建新文件创建新文件1）打开）打开“新建文档新建文档”对话框对话框方法方法1：在在“初始页面初始页面”中单击中单击“新建新建”|“Fireworks文件文件”方法方法2：单击：单击“文件文件”|“新建新建”方法方法3：Ctrl+N2）设置画面的尺寸）设置画面的尺寸(像素、英寸、厘米）和颜色像素、英寸、厘米）和颜色 分辨率的单位：像素分辨率的单位：像素/英寸、像素英寸、像素/厘米厘米3）单击）单击“确定确定”4）

4、在文档窗口绘制编辑图像）在文档窗口绘制编辑图像大纲2.打开文件打开文件方法方法1：“开始页面开始页面”|“打开打开”方法方法2：“文件文件”|“打开打开”方法方法3：Ctrl+O方法方法4：“文件文件”|“导入导入”大纲3.保存和导出文件保存和导出文件方法方法1：单击单击“文件文件”|“保存保存”/“另存为另存为”在对话框中输入文件名在对话框中输入文件名单击单击“保存保存”按钮按钮方法方法2：Ctrl+S/Ctrl+Shift+S方法方法3：执行执行“文件文件”|“图像预览图像预览”命令命令选择图像格式选择图像格式单击单击“导出导出”输入文件名输入文件名在导出列表框中选择在导出列表框中选择“仅

5、图像仅图像”单击单击“导出导出”注意：默认格式为注意：默认格式为PNG格式，若要得到非格式，若要得到非PNG格式，格式，必须执行必须执行“文件文件”|“图像预览图像预览”大纲4.关闭文件关闭文件方法方法1：执行：执行“文件文件”|“关闭关闭”方法方法2：按：按CTRL+W方法方法3：单击窗口右上角的关闭按钮：单击窗口右上角的关闭按钮大纲11.2 矢量图形的绘制与编辑矢量图形的绘制与编辑11.2.1 位图图像和矢量图形位图图像和矢量图形 矢量图形工具矢量图形工具 矢量图形的绘制与编辑矢量图形的绘制与编辑大纲11.2.1 位图图像和矢量图形位图图像和矢量图形1.位图图像位图图像定义：是由排列成网格

6、的称为像素的点组成的图像定义：是由排列成网格的称为像素的点组成的图像颜色和位置：由网格中每个像素的位置和颜色值决定颜色和位置：由网格中每个像素的位置和颜色值决定分辨率：位图图像与分辨率相关联，编辑后的图像将分辨率：位图图像与分辨率相关联，编辑后的图像将改变显示质量改变显示质量编辑位图图像修改是像素编辑位图图像修改是像素2.矢量图形矢量图形定义：是用直线或者曲线呈现的图形。定义：是用直线或者曲线呈现的图形。颜色：取决于轮廓曲线和轮廓封闭区域的颜色颜色：取决于轮廓曲线和轮廓封闭区域的颜色形状：由轮廓的直线或曲线决定形状：由轮廓的直线或曲线决定分辨率：具有独立的分辨率，以各种各样的分辨率显分辨率：具

7、有独立的分辨率，以各种各样的分辨率显示在输出设备上，而不改变图像的质量示在输出设备上，而不改变图像的质量编辑图形修改的是描述开关的线条和曲线的属性编辑图形修改的是描述开关的线条和曲线的属性大纲11.2.2 矢量图形工具矢量图形工具1.选择工具选择工具“指针工具指针工具”选择、移动对象或路径，方法是单击选择、移动对象或路径，方法是单击“指针工具指针工具”，在图像或路径上单击鼠标，在图像或路径上单击鼠标“选择后方对象选择后方对象”：选择组合对象中被遮盖的对象，：选择组合对象中被遮盖的对象，方法是在指针工具右侧的下拉菜单中单击该工具，在方法是在指针工具右侧的下拉菜单中单击该工具，在对象上单击对象上单

8、击“部分选择工具部分选择工具”：选择组合对象中的一部分对象，：选择组合对象中的一部分对象，方法是，选择该工具，在被选择对象上单击方法是，选择该工具，在被选择对象上单击 2.形状和路径工具形状和路径工具1）直线工具）直线工具 2）基本形状工具）基本形状工具 3）钢笔工具）钢笔工具 4）矢量路径工具）矢量路径工具5）重绘路径工具）重绘路径工具6）自由变形工具）自由变形工具7）更改区域形状工具）更改区域形状工具8）刀子工具）刀子工具3.颜色工具颜色工具4.图形变形工具图形变形工具大纲形状路径工具形状路径工具直线工具：绘制直线、水平垂直和直线工具：绘制直线、水平垂直和45度直线（度直线（shift+拖

9、动）拖动）基本形状工具：绘制基本形状工具：绘制14种基本图形种基本图形注意注意:通过对基本形状的操作可以变化出通过对基本形状的操作可以变化出N种图形种图形钢笔工具：绘制线段与曲线路径钢笔工具：绘制线段与曲线路径矢量路径工具：绘制自由形状的路径，在矢量路径工具：绘制自由形状的路径，在“钢笔钢笔”工工具右侧的下拉菜单中选择具右侧的下拉菜单中选择重绘路径工具：绘制或修改已有的路径，在重绘路径工具：绘制或修改已有的路径，在“钢笔钢笔”工具右侧的下拉菜单中选择工具右侧的下拉菜单中选择自由变形工具：弯曲和变形矢量对象自由变形工具：弯曲和变形矢量对象更改区域形状：推拉曲折尖锐的路径更改区域形状：推拉曲折尖锐

10、的路径刀子工具：切割矢量对象刀子工具：切割矢量对象大纲颜色、图形变形工具颜色、图形变形工具3.颜色工具颜色工具笔触颜色工具：设置图形周围线条的颜色笔触颜色工具：设置图形周围线条的颜色填充颜色工具：设置图形中间的颜色填充颜色工具：设置图形中间的颜色油漆桶工具：给封闭路径填充颜色油漆桶工具：给封闭路径填充颜色滴管工具：在采集对象上吸取样本颜色，在另一图形上滴管工具：在采集对象上吸取样本颜色，在另一图形上进行填充进行填充4.图形变形工具图形变形工具缩放工具：对象的放大与缩小缩放工具：对象的放大与缩小倾斜工具：对象的倾斜与旋转倾斜工具：对象的倾斜与旋转扭曲工具：变换图形的形状扭曲工具：变换图形的形状大

11、纲11.2.3 矢量图形的绘制与编辑矢量图形的绘制与编辑1.绘制直线、矩形、多边形绘制直线、矩形、多边形注意：与快捷键的配合注意：与快捷键的配合Shift:正方形正方形Alt：中心对称图形：中心对称图形Shift+Alt：从中心点绘制正方形、正圆：从中心点绘制正方形、正圆绘制时空格键绘制时空格键+拖动对象，调整基本形状的位置拖动对象，调整基本形状的位置2.绘制可以衍变的图形绘制可以衍变的图形3.图形效果设置图形效果设置4.图形的变形图形的变形5.绘制自由变形路径绘制自由变形路径6.绘制曲线路径绘制曲线路径7.用矢量工具编辑路径用矢量工具编辑路径8.用菜单命令编辑路径用菜单命令编辑路径图形制作练

12、习图形制作练习大纲2.绘制可以衍变的图形绘制可以衍变的图形选择基本形状工具选择基本形状工具绘制图形绘制图形拖动或单击图形上的黄色菱形按钮变形拖动或单击图形上的黄色菱形按钮变形设置图形填充、笔触设置图形填充、笔触设置图形的效果设置图形的效果大纲3.图形效果设置图形效果设置选中图形选中图形在在“属性属性”检查器中设置：检查器中设置：宽、高宽、高X、Y：图形在页面中的位置：图形在页面中的位置油漆桶：填充图形的颜色油漆桶：填充图形的颜色实心：图形的填充效果实心：图形的填充效果填充颜色：设置填充的颜色填充颜色：设置填充的颜色a.增加渐变颜色增加渐变颜色:在调色板按钮行单击，选择颜色在调色板按钮行单击，选

13、择颜色b.减少渐变颜色：在调色板按钮上按住鼠标，扔出减少渐变颜色：在调色板按钮上按住鼠标，扔出不透明度：设置图形的透明度，拖动鼠标不透明度：设置图形的透明度，拖动鼠标1000从完全不透明到完全透明从完全不透明到完全透明大纲4.图形的变形图形的变形选中图形选中图形选择变形工具选择变形工具缩放缩放倾斜倾斜扭曲扭曲拖曳、旋转鼠标拖曳、旋转鼠标大纲5.绘制自由变形路径绘制自由变形路径选择选择“矢量路径矢量路径”工具工具设置笔触和填充属性设置笔触和填充属性拖动鼠标绘制（拖动鼠标绘制（Shift+绘制，绘制水平或垂直线）绘制，绘制水平或垂直线）释放鼠标，结束（闭合路径返回到路径起始点，释放释放鼠标，结束（

14、闭合路径返回到路径起始点，释放鼠标）鼠标）大纲6.绘制曲线路径绘制曲线路径选择钢笔工具选择钢笔工具连续线段路径：在不同位置单击鼠标连续线段路径：在不同位置单击鼠标曲线路径：单击第一个节点，移到下一个节点拖动曲线路径：单击第一个节点，移到下一个节点拖动拐角节点：在一个节点处单击拐角节点：在一个节点处单击曲线节点：在一个节点处单击并拖动曲线节点：在一个节点处单击并拖动结束路径：双击最后一个结点结束路径：双击最后一个结点封闭路径：单击第一个结点封闭路径：单击第一个结点注意：节点类型的改变（以下操作用注意：节点类型的改变（以下操作用“部分选择部分选择”工具）工具）曲线节点转换为拐角节点：钢笔工具曲线节

15、点转换为拐角节点：钢笔工具+单击单击拐角节点转换为曲线节点：钢笔工具拐角节点转换为曲线节点：钢笔工具+单击拖动单击拖动改变节点一侧线段：改变节点一侧线段：alt+拖动拖动删除节点：选中删除节点：选中+Delete移动节点：选中移动节点：选中+拖动拖动增加节点：在路径上用钢笔工具单击增加节点：在路径上用钢笔工具单击大纲7.矢量工具变形路径矢量工具变形路径自由变形工具：钢笔自由变形工具：钢笔|自由变形工具自由变形工具1）拉伸路径）拉伸路径自由变形工具自由变形工具+拖动拉伸指针拖动拉伸指针2）推动所选路径）推动所选路径自由变形工具自由变形工具+拖动推动指针拖动推动指针3）扭曲所选路径）扭曲所选路径更

16、改区域形状工具更改区域形状工具+拖动扭曲指针拖动扭曲指针注意：指针的大小注意：指针的大小按住鼠标按钮时，按按住鼠标按钮时，按2或右箭头增加指针宽度或右箭头增加指针宽度按住鼠标按钮时，按按住鼠标按钮时，按1或左箭头减少指针宽度或左箭头减少指针宽度大纲8.使用菜单命令编辑路径使用菜单命令编辑路径路径混合：通过路径的并集、交集，制作各种图案路径混合：通过路径的并集、交集，制作各种图案选中多个路径选中多个路径执行菜单：执行菜单：“修改修改”|“组合路径组合路径”选择以下命令之一：选择以下命令之一：1）接合）接合:连接两个断开的路径连接两个断开的路径,创建复合路径创建复合路径2）拆分）拆分:分离复合路径

17、分离复合路径3）联合）联合:两个相交的封闭路径合并为一个整体的新两个相交的封闭路径合并为一个整体的新路径路径4）交集）交集:将两个路径相交部分创建为一个新路径将两个路径相交部分创建为一个新路径5）打孔）打孔:删除路径中的一部分删除路径中的一部分7）裁剪）裁剪:按照另一路径的形状取得新路径按照另一路径的形状取得新路径大纲练习练习1、绘制奔跑的小人、绘制奔跑的小人练习目的：练习目的：使用矢量工具绘制简单使用矢量工具绘制简单线条的矢量作品线条的矢量作品使用工具：圆形、矩形、使用工具：圆形、矩形、直线、折线、面圈、直线、折线、面圈、“自由变形工具自由变形工具”注意：注意：1.嘴：将一个圆，用刀子嘴：将

18、一个圆，用刀子工具切割工具切割2.用面圈绘制小人的腿，用面圈绘制小人的腿，指向最上边的控制点，指向最上边的控制点，进行分段进行分段大纲练习练习2、水滴的制作、水滴的制作练习目的：调整矢量线条练习目的：调整矢量线条使用工具：使用工具：椭圆工具、油漆桶、椭圆工具、油漆桶、用部分选择工具调整矢量线用部分选择工具调整矢量线条条注意：注意：1.水滴的上边尖角，绘水滴的上边尖角，绘制一椭圆，将最上边的曲线制一椭圆，将最上边的曲线节点转换为拐角节点（先用节点转换为拐角节点（先用部分选定工具选择图形部分选定工具选择图形,再转再转换）换）2.水滴中的反光部分（白色）水滴中的反光部分（白色）绘制一细长的椭圆，变形

19、绘制一细长的椭圆，变形3.为水滴设置投影效果，调整为水滴设置投影效果，调整柔化程度柔化程度10大纲练习练习3、网站图标的制作、网站图标的制作练习目的：练习目的：通过基本矢量图的创建、修改及渐变的填充，设计出通过基本矢量图的创建、修改及渐变的填充，设计出玻璃质感的效果玻璃质感的效果大纲练习练习5 可爱葱头小可爱葱头小P孩孩 分别用圆形工具绘制分别用圆形工具绘制脸、躯干等部分脸、躯干等部分圆形经过切割绘制嘴圆形经过切割绘制嘴和鼻子和鼻子头上的高光部分用变头上的高光部分用变形的圆形形的圆形用钢笔工具绘制头发用钢笔工具绘制头发和身上的装饰和身上的装饰大纲11.3 文本对象文本对象一、一、文本对象的创建

20、与编辑文本对象的创建与编辑二、二、文本对象的艺术化文本对象的艺术化大纲一、文本对象的创建与编辑一、文本对象的创建与编辑1.输入文本输入文本选中选中“矢量文本矢量文本”工具工具在文档窗口单击生成文本框在文档窗口单击生成文本框输入字符输入字符2.设置文本属性设置文本属性设置字体、字号、样式和颜色设置字体、字号、样式和颜色设置字距、行间距和字符宽度设置字距、行间距和字符宽度设置文本排列方式和对齐方式设置文本排列方式和对齐方式设置消除锯齿级别设置消除锯齿级别应用笔触和填充应用笔触和填充大纲练习练习1 水印字水印字将文字设置为将文字设置为“华文彩云华文彩云”，灰色，灰色#cccccc，旋转，旋转45度度

21、角，添加滤镜效果角，添加滤镜效果“阴影和光晕阴影和光晕|投影投影”，最后设置，最后设置文字的不透明度为文字的不透明度为25。大纲练习练习2 金属字金属字属性设置，如图所示属性设置，如图所示渐变：#cccccc,#000000,#cccccc添加滤镜效果大纲二、文本对象的艺术化二、文本对象的艺术化11.将文本附加到路径：文本按路径走势排列将文本附加到路径：文本按路径走势排列输入文本输入文本绘制路径绘制路径选中路径和文本选中路径和文本选择菜单：选择菜单：“文本文本”|“附加到路径附加到路径”设置对象属性设置对象属性“文本偏移文本偏移”：文本向左向右移动，在：文本向左向右移动，在“文本偏文本偏移移”

22、右侧的文本框内输入数字（右侧的文本框内输入数字（+数顺时针偏移，数顺时针偏移，-数逆针偏移）数逆针偏移）倒转方向：文本方向由外侧变为里侧倒转方向：文本方向由外侧变为里侧改变文本的方向：改变文本的方向：“文本文本”|“方向方向”，设置文本，设置文本垂直、倾斜的环绕效果垂直、倾斜的环绕效果解除文字的附加路径：解除文字的附加路径：“文本文本”|“从路径上剥离从路径上剥离”大纲二、文本对象的艺术化二、文本对象的艺术化22.变换文本：缩放、旋转、倾斜、翻转变换文本：缩放、旋转、倾斜、翻转可用工具箱上的变形对象工具可用工具箱上的变形对象工具3.文本转换为路径文本转换为路径文本转换为路径文本转换为路径选中文

23、本选中文本执行执行“文本文本”|“转换为路径转换为路径”打散文字打散文字“修改修改”|“取消组合取消组合”选中节点，拖动选中节点，拖动注意：将文本转换为路径并打散后，通过拖动、移动、注意：将文本转换为路径并打散后，通过拖动、移动、变形可以制作特形字变形可以制作特形字大纲练习练习1制作一个如下图所示的特效字制作一个如下图所示的特效字提示：输入文本，设置字体、字号提示：输入文本，设置字体、字号55，颜色、加粗，颜色、加粗，字间距字间距20，水平缩放，水平缩放150，转换为路径，取消组合，转换为路径，取消组合，选中选中“山山”，描边种类为，描边种类为“毛笔毛笔”|“羽毛笔羽毛笔”、笔、笔尖大小为尖大

24、小为6，笔触颜色为，笔触颜色为#999999,内斜角等效果内斜角等效果大纲练习练习2 制作打孔效果的特效字制作打孔效果的特效字先用文本工具输入文本先用文本工具输入文本设置文本属性设置文本属性用箭头工具绘制箭头用箭头工具绘制箭头变形箭头变形箭头使用路径修改命令：组合、打孔等使用路径修改命令：组合、打孔等具体参见资料具体参见资料大纲练习练习3倒转方向文字倒转方向文字提示：提示：输入文本，绘制椭圆路径，附加到路径，文本对齐到路输入文本，绘制椭圆路径，附加到路径，文本对齐到路径的中间部分，文本垂直，倒转方向等径的中间部分，文本垂直，倒转方向等 大纲练习练习4 漂亮手提袋的制作漂亮手提袋的制作使用钢笔工

25、具画出轮廓使用钢笔工具画出轮廓 (包括白色和绿色部分包括白色和绿色部分,分几次完成分几次完成)用钢笔工具画出手提袋的阴影部分的轮廓用钢笔工具画出手提袋的阴影部分的轮廓,设置透明设置透明度度20%和消除锯齿和消除锯齿用椭圆工具画出手提袋穿绳的圆孔用椭圆工具画出手提袋穿绳的圆孔钢笔工具画出拉绳钢笔工具画出拉绳写上文字写上文字大纲典型的网站总目标典型的网站总目标大纲11.4位图对象位图对象11.4.1 位图图像工具位图图像工具11.4.2 绘制位图图像绘制位图图像11.4.3 位图图像的编辑位图图像的编辑大纲11.5 对象的效果对象的效果11.5.1 立体效果立体效果立体效果就是网页中按钮、菜单、导

26、航条等的质感、装立体效果就是网页中按钮、菜单、导航条等的质感、装立体感、层次感的特效立体感、层次感的特效11.5.2 滤镜滤镜调整颜色滤镜组调整颜色滤镜组模糊滤镜组模糊滤镜组锐化滤镜组锐化滤镜组斜角和浮雕滤镜组斜角和浮雕滤镜组阴影和光晕滤镜组阴影和光晕滤镜组杂点滤镜组杂点滤镜组大纲11.6 图层和蒙版图层和蒙版11.6.1 图层概念及层面板图层概念及层面板11.6.2 图层的基本操作图层的基本操作11.6.3 蒙版的类型蒙版的类型11.6.4 蒙版的创建蒙版的创建11.6.5 蒙版的编辑蒙版的编辑大纲11.6.1 图层概念及层面板图层概念及层面板1.层层(图层图层)图层又称为层图层又称为层,就

27、是一张张的透就是一张张的透明的纸明的纸,每一个层是互相独立的每一个层是互相独立的,在每个层中均可以编辑处理图在每个层中均可以编辑处理图像像,最后将所有图层又叠加一起最后将所有图层又叠加一起,构成一幅图像构成一幅图像2.层面板层面板层的所有操作都可以在层面板中层的所有操作都可以在层面板中进行进行,见右图见右图默认层默认层:层层1和网页层和网页层网页层网页层:包含指定交互的对象包含指定交互的对象,切片、切片、热区等，不能被删除，为共享层热区等，不能被删除，为共享层出现在所有帧中出现在所有帧中层层1：若不添加新层的话，所有绘制：若不添加新层的话，所有绘制的对象均放在该层中的对象均放在该层中大纲11.

28、6.2.图层的基本操作图层的基本操作1）选中层和层中的对象）选中层和层中的对象在层面板中，单击层的名称，在层上选择对象在层面板中，单击层的名称，在层上选择对象2）层的添加与删除）层的添加与删除新建层新建层:新建新建/重制层重制层复制层复制层:拖动层到新建拖动层到新建/重制层按钮上重制层按钮上删除层删除层:选中选中,单击删除按钮单击删除按钮3）查看层）查看层4）组织和管理层）组织和管理层重命名层或对象重命名层或对象移动层或对象移动层或对象复制多个对象复制多个对象5）合并层）合并层6）调整层和对象的不透明度）调整层和对象的不透明度大纲蒙版的类型蒙版的类型蒙版就象是一块透明的膜蒙版就象是一块透明的膜

29、,实际上是一幅实际上是一幅256色的灰色的灰度图像度图像,它必须作用于某个与之链接的层它必须作用于某个与之链接的层.蒙版的作用是遮盖部分画面蒙版的作用是遮盖部分画面可以形象地理解为在可以形象地理解为在“蒙版蒙版”上抠了一个洞，透过这上抠了一个洞，透过这个洞可以看到位图，其他的部分都看不到了。个洞可以看到位图，其他的部分都看不到了。蒙版的类型：矢量蒙版、文字蒙版、位图蒙版蒙版的类型：矢量蒙版、文字蒙版、位图蒙版大纲11.6.4 蒙版的创建蒙版的创建1.矢量蒙版矢量蒙版2.文本蒙版文本蒙版 3.位图蒙版位图蒙版 大纲1.矢量蒙版矢量蒙版1）创建矢量蒙版）创建矢量蒙版绘制蒙版对象绘制蒙版对象选择蒙版

30、对象选择蒙版对象,剪切剪切选择被遮盖的对象选择被遮盖的对象粘贴为蒙版粘贴为蒙版2）修改矢量蒙版属性）修改矢量蒙版属性路径轮廓路径轮廓灰度外观灰度外观大纲2.文本蒙版文本蒙版导入图片导入图片输入文本：光标定位在图片上，输入输入文本：光标定位在图片上，输入创建蒙版创建蒙版:选择文本选择文本,剪切剪切,选中图片选中图片,粘贴为蒙版粘贴为蒙版效果：文字蒙版是为了文字颜色的改变（取图片对应效果：文字蒙版是为了文字颜色的改变（取图片对应位置的颜色），让被遮盖的图像按照文本的路径显示位置的颜色），让被遮盖的图像按照文本的路径显示图像，即文本路径上透出图像。图像，即文本路径上透出图像。大纲3.位图蒙版位图蒙版

31、1）创建位图蒙版（同矢量蒙版）创建位图蒙版（同矢量蒙版）注意：创建的图像保存时，保存为注意：创建的图像保存时，保存为gif的格式，在的格式，在“图图像预览像预览”对话框中，设置透明度（索引色透明或对话框中，设置透明度（索引色透明或Alpha透明）透明）2）修改位图蒙版属性）修改位图蒙版属性灰度灰度Alpha大纲位图蒙版练习位图蒙版练习用蒙版修饰下面的位图片，效果如图所示用蒙版修饰下面的位图片，效果如图所示提示：导入照片位图，导入蒙版位图，选中蒙版位提示：导入照片位图，导入蒙版位图，选中蒙版位图，剪切，粘贴为蒙版图，剪切，粘贴为蒙版大纲综合练习：制作相框综合练习：制作相框步骤：步骤：1.导入位图

32、导入位图2.绘制一个矢量圆角矩形，笔触设置为绘制一个矢量圆角矩形，笔触设置为“非自然中的非自然中的一种一种”。4.选择位图，执行剪切，然后选中作为蒙版的矩形，选择位图，执行剪切，然后选中作为蒙版的矩形，执行执行“编辑编辑|粘贴于内部粘贴于内部”。大纲11.6.5 蒙版的编辑蒙版的编辑1.选择蒙版选择蒙版2.选择被蒙版对象选择被蒙版对象3.移动蒙版和被蒙版的对象移动蒙版和被蒙版的对象4.修改蒙版的外观修改蒙版的外观5.蒙版的禁用启用蒙版的禁用启用禁用禁用禁用蒙版即禁止蒙版起作用禁用蒙版即禁止蒙版起作用“修改修改”|“蒙版蒙版”|“禁用蒙版禁用蒙版”启用：（修改启用：（修改|蒙版蒙版|启用蒙版）启

33、用蒙版）6.删除蒙版：删除蒙版：“修改修改”|“蒙版蒙版”|“删除蒙版删除蒙版”对象与蒙版的链接对象与蒙版的链接默认情况下对象与蒙版间都存在一种链接关系（标志为默认情况下对象与蒙版间都存在一种链接关系（标志为一链接符号），二者成为一个整体，单击链接符号删一链接符号），二者成为一个整体，单击链接符号删除链接除链接大纲11.7 创建创建GIF动画动画11.7.1 帧面板帧面板11.7.2 帧帧动画帧帧动画11.7.3 补间动画补间动画11.7.4 动画元件动画动画元件动画11.7.5 共享层共享层 将一个完成的运动过程，分解为多个步骤。动将一个完成的运动过程，分解为多个步骤。动画中运动的基本单元是

34、帧，每个步骤放在一个帧上，画中运动的基本单元是帧，每个步骤放在一个帧上，不同的帧在一个连续时间段内的不同时间中显示，视不同的帧在一个连续时间段内的不同时间中显示，视觉上成为运动效果，即动画。觉上成为运动效果，即动画。动画运动方式：直线运动、旋转、不透明度渐动画运动方式：直线运动、旋转、不透明度渐变、缩放变、缩放 动画的制作法：帧帧动画、补间动画、动画元动画的制作法：帧帧动画、补间动画、动画元件动画件动画大纲11.7.1 帧面板帧面板帧面板是创建和组织帧的地方，在帧面板中可以看到帧面板是创建和组织帧的地方，在帧面板中可以看到每个帧的内容，重命名、组织帧、设置动画单元的时每个帧的内容，重命名、组织

35、帧、设置动画单元的时间。间。1.打开帧面板打开帧面板选择选择“窗口窗口”|“帧帧”命令命令2.帧的基本操作帧的基本操作添加：单击添加：单击“新建新建”|“重制帧重制帧”按钮按钮复制：选中帧，将其拖到复制：选中帧，将其拖到“新建新建”|“重制帧重制帧”按钮上按钮上删除：选中帧，单击面板上的删除按钮删除：选中帧，单击面板上的删除按钮帧延时：双击帧延时：双击“帧延时帧延时”（帧面板上的数字），在文本（帧面板上的数字），在文本框内输入时间，默认为框内输入时间，默认为7/100秒秒1）使用）使用“洋葱皮洋葱皮”洋葱皮：来源于种传统的动画技术，即使用很薄的、洋葱皮：来源于种传统的动画技术，即使用很薄的、半

36、透明的描图纸来查看动画序列半透明的描图纸来查看动画序列使用洋葱皮的操作：使用洋葱皮的操作：显示下一帧显示下一帧之前和之后之前和之后显示所有帧自定义显示所有帧自定义多帧编辑多帧编辑2）循环次数）循环次数3）新建、删除）新建、删除4）分散到帧：）分散到帧：大纲17.2 帧帧动画帧帧动画1.帧帧-帧动画帧动画层与帧的关系层与帧的关系:,帧包含层帧包含层,即每个帧可以由若干个层即每个帧可以由若干个层组成组成.原理：一帧一帧地绘制图像原理：一帧一帧地绘制图像,连接起来成为一幅完整连接起来成为一幅完整的动画。的动画。方法：方法：每添加一帧绘制一幅图像。每添加一帧绘制一幅图像。预览：单击预览：单击“播放播放

37、”按钮按钮导出：图像预览，选择导出：图像预览，选择“GIF动画动画”，导出，导出特点：原理简单、工作量大特点：原理简单、工作量大练习练习1：水平滚动的文字：水平滚动的文字“海誓山盟海誓山盟”大纲11.7.3 补间动画补间动画1）补间动画的原理）补间动画的原理在两幅关键图中间通过插值的方法来获得两幅图间的过在两幅关键图中间通过插值的方法来获得两幅图间的过渡图渡图2）创建元件和实例创建元件和实例元件：指可以重复使用的图形、动画和按钮元件：指可以重复使用的图形、动画和按钮实例：是指将元件拖入到文档中、在文档中的具实例：是指将元件拖入到文档中、在文档中的具体表现。体表现。3）创建补间动画创建补间动画大

38、纲元件、实例的创建元件、实例的创建步骤步骤打开打开“元件属性元件属性”对话框：编辑对话框：编辑|插入插入|新建元件新建元件输入名称、选择类型为图形，单击输入名称、选择类型为图形，单击“确定确定”绘制图形，并编辑图形绘制图形，并编辑图形打开库面板：窗口打开库面板：窗口|库，查看元件库，查看元件编辑元件编辑元件实例的创建：从库中向文档窗口拖动生成实例实例的创建：从库中向文档窗口拖动生成实例元件与对象的转换元件与对象的转换元件转换为对象：修改元件转换为对象：修改|元件元件|分离分离对象转换为元件：修改对象转换为元件：修改|元件元件|转换为元件转换为元件元件与实例的关系元件与实例的关系元件是实例的模板

39、元件是实例的模板实例是元件的特例实例是元件的特例大纲创建补间动画创建补间动画制作一个元件制作一个元件生成两个实例生成两个实例插入补间实例：选择两个实例，插入插入补间实例：选择两个实例，插入修改修改|元件元件|补间实例补间实例设置中间帧的帧数，选择设置中间帧的帧数，选择“分散到帧分散到帧”注意：取消注意：取消“分散到帧分散到帧”，生成的是静态图像，生成的是静态图像,如果以如果以后想生成动画后想生成动画,可以选择所有实例单击面板中的可以选择所有实例单击面板中的”分分散到帧散到帧”按键按键,生成动画生成动画单击单击“确定确定”提示：用该方法创建的动画，可以作任意曲线的运动，提示：用该方法创建的动画，

40、可以作任意曲线的运动，即每一帧都是关键帧，可以修改每一帧中对象的位置即每一帧都是关键帧，可以修改每一帧中对象的位置大纲11.7.4 动画元件动画动画元件动画1）创建或打开并选中一个对象）创建或打开并选中一个对象2）创建动画）创建动画打开动画对话框打开动画对话框：修改修改|动画动画|选择动画选择动画设置动画参数：设置动画参数：帧、移动、方向、缩放到、不透帧、移动、方向、缩放到、不透明度、旋转、顺时针明度、旋转、顺时针单击单击“确定确定”提示：用该方法创建的动画只能作直线运动，即自动提示：用该方法创建的动画只能作直线运动，即自动生成的帧都不是关键帧生成的帧都不是关键帧3）修改动画元件属性）修改动画

41、元件属性拖动运动控制杆，进行调整拖动运动控制杆，进行调整通过属性面板进行调整通过属性面板进行调整大纲动画对话框动画对话框大纲共享层共享层1）共享层即是将某个层中的图像在每个帧中都可见）共享层即是将某个层中的图像在每个帧中都可见2）创建）创建双击指定的层（或者用层面板双击指定的层（或者用层面板“选项选项”菜单进行选择）菜单进行选择）选择选择“共享交叠帧共享交叠帧”在对话框以外的地方，单击在对话框以外的地方，单击3）禁用共享层）禁用共享层双击指定的层（或者用层面板双击指定的层（或者用层面板“选项选项”菜单进行选择）菜单进行选择）取消取消“共享交叠帧共享交叠帧”复选项复选项大纲实例实例1.制作制作“

42、海上升明月，天涯共此时海上升明月，天涯共此时”文字绕圆月旋转的文字绕圆月旋转的动画动画2.制作一个带有动画的站标制作一个带有动画的站标3.制作一个有下雨效果的动画制作一个有下雨效果的动画4.制作一个有动画效果的制作一个有动画效果的Banner大纲11.8 网页图像的制作网页图像的制作11.8.1 创建网页创建网页logo和和banner11.8.2 创建导航条创建导航条11.8.3 创建网页图像映射和热点创建网页图像映射和热点大纲创建网页的创建网页的logo和和banner1.制作网页的制作网页的logo1)设计画布大小设计画布大小:一般为一般为10060左右左右2)制作制作logo图形图形3

43、)设计效果和特效设计效果和特效4)输入文本输入文本:通常为网站的名称和域名通常为网站的名称和域名5）预览保存）预览保存2.制作网页的制作网页的banner1)设计画布大小设计画布大小:一般为一般为47060(宽度可视宽度可视logo后的页后的页面设定面设定,高度与高度与logo的高度一致的高度一致)2)制作或导入图片制作或导入图片3)设置属性，设计动画效果设置属性，设计动画效果4）预览保存）预览保存例：为一旅游为主例：为一旅游为主题的网站制作题的网站制作logo和和banner大纲11.8.2 创建导航条创建导航条在空白文档中在空白文档中,设置宽和高设置宽和高(根据实际导航的位置而定根据实际导

44、航的位置而定)执行执行“编辑编辑”|“插入插入”|“新建元件新建元件”命令命令在在“元件属性元件属性”对话框中设置：名称，类型选择对话框中设置：名称，类型选择“按按钮钮”单击单击“确定确定”在编辑窗口中，绘制按钮在编辑窗口中，绘制按钮设置按钮的特效设置按钮的特效输入按钮上文本，设置文本的属性输入按钮上文本，设置文本的属性复制复制“滑过滑过”、“按下按下”、“按下时滑过按下时滑过”状态的按状态的按钮：单击各标签，在窗口的右下角，单击钮：单击各标签，在窗口的右下角，单击“复制弹起复制弹起时的图形时的图形”按钮按钮例：为一旅游网站制作导航条例：为一旅游网站制作导航条大纲11.8.3 创建网站图像映射

45、和热点创建网站图像映射和热点1.创建热点创建热点热点是图像上带有超链接的一块区域热点是图像上带有超链接的一块区域创建：同创建：同Dreamweaver中热点的创建中热点的创建2.创建图像映射创建图像映射映射就是将一幅图片上的多个热点链接到不同的地址映射就是将一幅图片上的多个热点链接到不同的地址创建：同创建：同Dreamweaver中的超链接的创建中的超链接的创建大纲11.9 网页图像的优化与导出网页图像的优化与导出11.9.1 图像的优化图像的优化11.9.2 图像的导出图像的导出大纲11.9.1 图像的优化图像的优化1.使用优化面板使用优化面板图像的优化可以通过优化面板对图像进行优化图像的优

46、化可以通过优化面板对图像进行优化2.不同文件格式的优化不同文件格式的优化不同的文件格式，优化参数设置方式不同，分为两类：不同的文件格式，优化参数设置方式不同，分为两类：非非JPEG文件和文件和JPEG文件文件非非JPEG文件指文件指GIF、PNG、TIEF和和BMP文件，属于文件，属于8位图形文件格式位图形文件格式JPEG文件是通过设置文件是通过设置“品质品质”参数值、参数值、“选择性品选择性品质质”参数值和参数值和“平滑平滑”参数值实现优化的参数值实现优化的大纲11.9.2 图像的导出图像的导出1.导出单个图像导出单个图像选择格式、选择选择格式、选择“文件文件”|“导出导出”2.导出动画导出

47、动画选择选择“编辑编辑”|“取消选择取消选择”，在优化面板中选择，在优化面板中选择“GIF动画动画”，选择，选择“文件文件”|“导出导出”3.导出帧或层导出帧或层即将一个图形或动画文档中的每个层或帧导出为单独的即将一个图形或动画文档中的每个层或帧导出为单独的图形文件图形文件4.导出切片导出切片将图像中的指定切片导出一个文件将图像中的指定切片导出一个文件 5.导出导出HTML将图像保存为将图像保存为HTML（网页）文档（网页）文档大纲11.10 综合实例综合实例10.10.1 制作一个产品的外包装制作一个产品的外包装10.10.2 制作旅游网站的网页的制作旅游网站的网页的logo和和banner10.10.3 制作旅游网站的导航条制作旅游网站的导航条