《模块三网页图形图像处理.ppt》由会员分享，可在线阅读，更多相关《模块三网页图形图像处理.ppt（31页珍藏版）》请在三一文库上搜索。
1、模块三 网页图形图像处理,Fireworks简介,图形图像处理常用工具：Photoshop和Fireworks 图片格式：bmp、jpg、gif等。 Bmp：Windows 位图，占用的空间大。 Jpg：最常用的图像文件格式，文件体积较小，适合网络传播；有损耗压缩，图片质量下降。照片常见格式。 GIF：色彩不丰富、质量较差；可制作简单动画、透明背景图。不适合做大图。,网页中的图像单张不要超过30KB，整页不要超过60KB，若不得不使用大的图片，可将其切割再使用。 正确选择图片格式，网上常用的图片格式是GIF、JPEG或PNG，分辨率一般是72像素/英寸。 不要使用不常用的字体，若需要可考虑制作
2、为图片。,Fireworks功能,创建和编辑网页图形及图象（包括矢量图与位图） 制作GIF动画 制作网页效果（如按钮、导航条和弹出菜单） 修剪和优化图形以减小其文件大小 导出用于网页的图片 直接导出网页（包含 HTML 表格、图片以及 JavaScript 代码）该网页可直接使用，也可在网页编辑器中编辑后使用,可以创建编辑图像：在矢量图模式或位图模式下绘制图像； 打开或导入图像进行编辑处理。 可以创建网页对象：制作按钮；制作切片网页对象，切片工具可以把一幅完整的图像切割成不同的切片对象，并可在这些切片对象上添加动作或URL链接，热区工具在一幅图像的整体或部分定义URL链接响应区域，添加交互功能
3、。,可以优化图像：对图像进行优化处理，以减小文件大小，改变图像品质。 输出文件：按照一定格式（一般为gif与jpg格式）输出图像，这些输出的图像可以直接被应用于网页。 直接导出网页，即html文件与图像，网页可使用DW编辑修改也可直接使用。,任务一 绘制基本图形,利用工具箱上绘图工具绘制一些基本图形。,矢量图形：矢量图形为矢量的线条和曲线（包括颜色和位置信息）描述图像。编辑矢量图形时，修改的是描述其形状的线条和曲线的属性。矢量图形与分辨率无关，因此在对图形进行移动、调整大小、更改形状或更改颜色等操作时，不会改变其外观品质。,位图图形：由称为象素的点组成。图像由每个象素的位置和颜色值决定。编辑位
4、图图形时，修改的是象素，位图图形与分辨率有关，放大位图图形会使图像的边缘呈锯齿状。,矢量路径的绘制主要包括：直线、曲线、自由路径。 绘制直线 用钢笔工具创建路径 绘制自由变形矢量路径,绘制矢量形状：使用形状工具可以绘制矩形、椭圆、多边形、星形以及其它特定的几何形状。,任务二 常见文字效果,文字描边 文字阴影 文字倒影 文字路径,文字描边,在网页美工和网店图片处理中，文字描边是常见的文字效果。 选中文字，在属性面板/滤镜选项中，进行如图所示操作。,文字阴影,选中文字，在属性面板/滤镜选项中，进行如图所示操作。,文字倒影制作,步骤：选中文字/复制/粘贴/选中粘贴产生的文字下移到适当位置/修改菜单，
5、变形，垂直翻转，如图1所示/命令菜单，创意，图像渐隐，选择由上到下的渐隐效果，如图2所示/在属性面板中，调整不透明度，如图所示。,文字路径,创建不规则路径并将文字附着到路径，形成文字路径。 文字附着到路径：例，绘制一个椭圆，使用切刀工具将其分成两半，删除下半部分；将文字与半圆选中后，选择文字附加到路径。,任务三 LOGO设计,任务四 GIF动画,文字内部光影： 输入文本 选择文本，文本/转换为路径 复制，粘贴文本 层面板/新建层/新建2，并勾选共享交叠帧 层2拖到层1下面，并且把最上面的文本拖到层2中,工具箱面板/矩形工具/生成白底，有羽化效果的矩形块 窗口菜单/打开帧面板/重制帧/设置：数量
6、1，在当前帧之后 选择帧2/选择矩形块/移动到文本开头/剪切矩形块/选中层1/编辑菜单/粘贴于内部 取消层1生成的锁定小图标 反复重复第7、8步骤，每次将矩形块向文本右边不断移动位置 优化面板/GIF动画/导出作品,使用切片可将大型图片分割成多个较小的部分并将每部分导出为单独的文件。导出时，将创建一个包含表格代码的 HTML 文件，以便在浏览器中重新装配图形。采用此方法可以将图片文档直接输出为html网页。,设计网页图片 创建切片：选择切片工具，在图片上拖拽一块块区域，形成多个切片。,设置导出后的图像切片格式：对于颜色数少的图形导出为Gif格式；对于颜色数多的照片、渐变色图像等导出为jpeg格式。 导出包含切片的 Fireworks 文档为html网页。 在DW中编辑并调整切片生成的网页。,