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

第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的功能 二、Fireworks 8的工作界面 三、Fireworks 8的基本操作,二、Fireworks 8的工作界面,1.初始界面 2.新建文档对话框 画布大小:宽高 画面颜色 3.工作界面 标题栏 菜单栏 工具栏 工具面板 属性面板 文档窗口 面板组,初始界面,新建：单击右侧的“Fireworks文件” 编辑图像：单击左侧的“打开”,新建文档界面,工作界面,三、 Fireworks 8的基本操作,1.创建新文件 2.打开文件 3.保存和导出文件 4.关闭文件,1.创建新文件,1）打开“新建文档”对话框 方法1： 在“初始页面”中单击“新建”|“Fireworks文件” 方法2：单击“文件”|“新建” 方法3：Ctrl+N 2）设置画面的尺寸(像素、英寸、厘米）和颜色 分辨率的单位：像素/英寸、像素/厘米 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和banner 11.8.2 创建导航条 11.8.3 创建网页图像映射和热点,11.8.1创建网页的logo和banner,1.制作网页的logo 1)设计画布大小:一般为10060左右 2)制作logo图形 3)设计效果和特效 4)输入文本:通常为网站的名称和域名 5）预览保存 2.制作网页的banner 1)设计画布大小:一般为47060(宽度可视logo后的页面设定,高度与logo的高度一致) 2)制作或导入图片 3)设置属性，设计动画效果 4