模块三网页图形图像处理备课讲稿.doc

《模块三网页图形图像处理备课讲稿.doc》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、模块三网页图形图像处理备课讲稿　　模块三网页图形图像处理任务五GIF动画制作任务二文字效果制作任务三LOGO设计任务四新闻图片处理任务六网页图片与切片任务一绘制基本图形Fireworks简介?图形图像处理常用工具Photoshop和和Fireworks?图片格式bmp、jpg、gif等。　　?BmpWindows位图，占用的空间大。　　?Jpg最常用的图像文件格式，文件体积较小，适合网络传播；有损耗压缩，图片质量下降。　　照片常见格式。　　?GIF色彩不丰富、质量较差；可制作简单动画、透明背景图。　　不适合做大图。　　?网页中的图像单张不要

2、超过30KB，整页不要超过60KB，若不得不使用大的图片，可将其切割再使用。　　?正确选择图片格式，网上常用的图片格式是GIF、JPEG或PNG，分辨率一般是72像素/英寸。　　?不要使用不常用的字体，若需要可考虑制作为图片。　　Fireworks功能?创建和网页图形及图象（包括矢量图与位图）?制作GIF动画?制作网页效果（如按钮、导航条和弹出菜单）?修剪和优化图形以减小其文件大小?导出用于网页的图片?直接导出网页（包含HTML表格、图片以及JavaScript代码）该网页可直接使用，也可在网页器中后使用?可以优化图像对图像进行优化处理，以

3、减小文件大小，改变图像品质。　　?输出文件按照一定格式（一般为gif与jpg格式）输出图像，这些输出的图像可以直接被应用于网页。　　?直接导出网页，即html文件与图像，网页可使用DW修改也可直接使用。　　任务一绘制基本图形?利用工具箱上绘图工具绘制一些基本图形。　　?矢量图形矢量图形为矢量的线条和曲线（包括颜色和位置信息）描述图像。　　矢量图形时，修改的是描述其形状的线条和曲线的属性。　　矢量图形与分辨率无关，因此在对图形进行移动、调整大小、更改形状或更改颜色等操作时，不会改变其外观品质。　　?位图图形由称为象素的点组成。　　图像由每个象

4、素的位置和颜色值决定。　　位图图形时，修改的是象素，位图图形与分辨率有关，放大位图图形会使图像的边缘呈锯齿状。　　?矢量路径的绘制主要包括直线、曲线、自由路径。　　?绘制直线?用钢笔工具创建路径?绘制自由变形矢量路径?绘制矢量形状使用形状工具可以绘制矩形、椭圆、多边形、星形以及其它特定的几何形状。　　任务二常见文字效果?文字描边?文字阴影?文字倒影?文字路径文字描边?在网页美工和网店图片处理中，文字描边是常见的文字效果。　　?选中文字，在[属性]面板/[滤镜]选项中，进行如图所示操作。　　文字阴影?选中文字，在[属性]面板/[滤镜]选项中，

5、进行如图所示操作。　　文字倒影制作?步骤选中文字/复制/粘贴/选中粘贴产生的文字下移到适当位置/[修改]菜单，[变形]，[垂直翻转]，如图1所示/[命令]菜单，[创意]，[图像渐隐]，选择由上到下的渐隐效果，如图2所示/在[属性]面板中，调整[不透明度]，如图所示。　　文字路径?创建不规则路径并将文字附着到路径，形成文字路径。　　?文字附着到路径例，绘制一个椭圆，使用切刀工具将其分成两半，删除下半部分；将文字与半圆选中后，选择文字>附加到路径。　　任务三LOGO设计任务四GIF动画?文字内部光影?输入文本?选择文本，[文本]/[转换为路径]

6、?复制，粘贴文本?[层]面板/新建层/新建2，并勾选[共享交叠帧]?层2拖到层1下面，并且把最上面的文本拖到层2中?[工具箱]面板/[矩形工具]/生成白底，有羽化效果的矩形块?[窗口]菜单/打开[帧]面板/[重制帧]/设置数量1，在当前帧之后?选择帧2/选择矩形块/移动到文本开头/剪切矩形块/选中层1/[]菜单/[粘贴于内部]?取消层1生成的锁定小图标?反复重复第　　7、8步骤，每次将矩形块向文本右边不断移动位置?[优化]面板/GIF动画/导出作品任务六网页图片与切片?使用切片可将大型图片分割成多个较小的部分并将每部分导出为单独的文件。　　

7、导出时，将创建一个包含表格代码的HTML文件，以便在浏览器中重新装配图形。　　采用此方法可以将图片文档直接输出为html网页。　　?设计网页图片?创建切片选择切片工具，在图片上拖拽一块块区域，形成多个切片。　　?设置导出后的图像切片格式对于颜色数少的图形导出为Gif格式；对于颜色数多的照片、渐变色图像等导出为jpeg格式。　　?导出包含切片的Fireworks文档为html网页。　　?在DW中并调整切片生成的网页。　　　　内容仅供参考