网页图像处理.pptx

《网页图像处理.pptx》由会员分享，可在线阅读，更多相关《网页图像处理.pptx（18页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、5.1 位图图像处理5.1.1 选取图像区域1、选择规则选区“选取框”工具和“椭圆选取框”工具可以用于选择规则选区。2、选择不规则选区“套索”工具、“多边形套索”工具或“魔术棒”工具。用于选择不规则选区。3、调整选区增加选区的方法是：按下Shift键继续选择其他的选区。减少选区的方法是：按下Alt键选择需要删除的选区。另外，在“选择”菜单中，可以对选区进行调整。第1页/共18页5.1.2 修饰位图使用铅笔或刷子工具使用油漆桶或渐变工具使用模糊、锐化与涂抹工具使用减淡和烙印工具使用橡皮图章、替换颜色与红眼消除工具使用橡皮擦工具第2页/共18页5.1.3 使用滤镜1、杂点 2、模糊 3、调整颜色

2、4、锐化 5、查找边缘和转换为Alpha 第3页/共18页5.1.4 使用效果1、斜角和浮雕 2、阴影和光晕 3、其他效果第4页/共18页5.2 动画的制作5.2.1 打开多个图像文件制作动画具体步骤见书。5.2.2 手工制作动画具体步骤见书。5.2.3 分散到帧生成动画具体步骤见书。第5页/共18页5.2.4 利用元件和实例制作动画元件是存放在库中可以重复使用的对象。实例是元件在文档中的具体引用。Fireworks MX 2004中包含三种元件类型：图形、动画和按钮。新建元件的方法使用实例创建动画具体步骤见书。第6页/共18页5.2.5 导出动画设置动画循环在“帧”面板中的循环设置决定动画重

3、复的次数。选择【窗口】|【帧】显示帧面板，单击面板底部的“Gif动画循环”按钮，可以设置循环的次数。输出动画在优化面板中设置导出为“动画GIF接近网页128”，可以将动画导出为“GIF动画”格式。然后选择【文件】|【导出预览】，单击“导出”按钮即可。第7页/共18页5.3 图像的切割5.3.1 切片的创建和使用“切片”是建立交互响应的基础。切片的功能是把Fireworks的编辑文件分割成小的图片，并且将其单独发布为一个文件。在输出过程中，Fireworks会自动创建一个包含标签的HTML文件，以便在浏览器中重新拼接成完整的图像。切片的具体创建方法见书。第8页/共18页5.3.2 导出切片切片创

4、建完成后，还需要经过导出才可以在网页中使用。选择【文件】|【导出】后，会弹出“导出”对话框。在设置导出文件类型时，保存类型要设置为HTML和图像，并将其保存为网页。在HTML下拉列表中，选择“导出HTML文件”可以直接导出HTML文件。在“切片”下拉列表中选择“导出切片”即可根据绘制的切片对象生成多个切片文件。设置完毕后，单击“保存”按钮，即可将切片导出。第9页/共18页5.3.3 热点的设置热点是包含超级链接的网页图像区域，也就是单击后可以连接到其他位置的区域。图像映射是指在一幅图中有多个对象分别指向不同的链接，这个设置了多个热点的图像就叫“映射图”。在Fireworks MX 2004中，

5、共有三种热点：矩形热点、圆形热点和多边形热点。具体创建方法见书。第10页/共18页5.4 按钮、导航栏和弹出菜单制作5.4.1 创建按钮按钮通常包括以下4种不同的状态：“释放”：按钮无任何交互时所显示的外观，是一种默认状态。“滑过”：当鼠标移动到按钮之上时所显示出来的外观。“按下”：按钮被单击后的状态，通常出现在目标网页中。“按下时滑过”：鼠标滑过处于“按下”状态下的按钮，按钮所显示的状态，通常极少使用。具体制作方法见书。第11页/共18页5.4.2 创建导航栏导航栏是一组指向不同链接地址的按钮，用于在一系列具有相同级别的网页间进行跳转。使用一个按钮元件的多个实例排列在一起，再对各个实例进行修

6、改，为它们指定不同的链接地址，一个导航栏就绘制完成了。将刚才制作的按钮元件从库面板中拖到画布，排列成一行或一列，改变每个按钮上的文字及链接后，导航栏就创建完成了。第12页/共18页5.4.3 创建弹出菜单弹出菜单是在网页中由鼠标来触发的一种菜单导航效果。当鼠标移动到导航菜单上时，或者当鼠标点击导航菜单时，就会显示弹出菜单。当鼠标从导航菜单上面移开时，弹出菜单就会自动消失。具体制作方法见书。第13页/共18页5.5 图像的优化导出5.5.1 图像的优化图像的优化是指在保持图像品质的前提下压缩图像，从而使其在网络上能够快速地下载。1、文件导出格式的选择（1）JPEG图像JPEG用于24位色图像的优

7、化，采用有损压缩法，压缩比很高，压缩效果显著。（2）GIF图像GIF最高支持256种颜色，采用无损压缩法，色彩比较简单，但文件容量比较小，是互联网上常用的图像格式。（3）PNG图像PNG图像采用无损压缩算法，能真实重现原始图像的信息，同时，它又支持真彩色，而且图像的大小和JPEG没有太大差别。第14页/共18页5.5.1 图像的优化2、优化GIF格式（1）选择调色板（2）选择色彩深度（3）设置失真（4）设置抖动（5）设置交错（6）设置透明3、优化JPEG格式（1）设置图像品质（2）JPEG的选择性压缩（3）柔化边缘（4）锐化色彩边缘和细节（5）渐进JPEG第15页/共18页5.5.2 图像的导出1、导出文件选择菜单命令【文件】|【导出】，在导出对话框中选择导出文件的位置，在“文件名”文本框中命名该文件，在“保存类型”下拉列表中选择导出文件的类型。2、使用导出向导使用导出向导可以轻松导出图形，而无需了解优化和导出的细节。具体步骤见书。第16页/共18页5.6 综合制作实例根据本章所学知识，制作一个简单页面，具体步骤见书。第17页/共18页感谢您的观看！第18页/共18页