《网页设计与制作实用教程》-第10章

《《网页设计与制作实用教程》-第10章》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第十章网页图像处理本章学习目标理解网页图像的基本格式掌握PhotoshopCS的基本用法掌握完整页面的制作及切割的方法掌握FireworksMX2004的基本用法掌握用FireworksMX2004制作按钮和下拉菜单的方法1.网页图象基础1．网页图像格式GIF格式JPEG格式PNG格式SVG格式2．网页图像使用要点1．GIF格式一般用于大块纯色的图片或网页中的标题文字、按钮、小图标、小动画、logo图片等图像内容的存储，不适合表现真彩色和渐变色的图像。用JPEG处理照片比较合适，因为它们的阴影与色彩中包含有许多缓和的变化。2．GIF和PNG都

2、支持背景透明，当图像的颜色数较多时，可以考虑PNG格式。3．目前各类浏览器均支持JPEG这种图像格式，部分浏览器不支持PNG格式。制作时应该在兼容性和效果上综合考虑3．图像处理软件常用的图像处理软件有Photoshop和Fireworks2．Photoshop设计网页PhotoshopCS的界面如图所示。菜单栏：包含了软件几乎所有的功能。工具箱：工具箱中包括了选取工具、套索工具、绘　　　图工具、修图工具等等。工具选项：显示工具栏中所选工具的选项。不同的工具出现的选项也不相同。文档窗口：以窗口的形式显示制作中的图像。状态栏：位于Photosho

3、p编辑窗口的底部。显示图像的缩放比例、内存的占用、处理的进度、目前所选工具的使用方法等信息。控制面板：放置各种常用的调板。也可以称为浮动面板或面板。调板井：组织和管理调板。调板在其中只显示名称，点击后才出现整个调板。其中的文件浏览器可以实现缩略图浏览、分类、排序、旋转等功能。2．Photoshop基本操作Photoshop工作流程在Photoshop中处理图像通常遵循以下流程：（1）新建或打开文档（2）编辑图像（3）优化图像（4）导出图像返回该节2.Photoshop基本工具的使用PhotoshopCS工具箱如图所示。返回该节返回该节部分工具

4、说明如下：（1）选区工具选取工具套索工具魔棒工具钢笔工具（2）绘图工具画笔工具铅笔工具橡皮擦工具油漆桶工具渐变工具3.图层选择“【窗口】→【图层】”菜单命令或者单击键盘上的F7键，可以将图层面板显示出来。如图所示为图层面板结构。返回该节（1）图层的基本操作新建图层复制图层删除图层调整图层的顺序链接图层合并图层返回该节（2）图层的混合模式色彩混合模式是将当前选定的图层与下面的图层进行混合，从而产生另外一种图像显示效果。当两个图层重叠时，默认状态为“正常”，同时Photoshop也提供了多种不同的色彩混合方式，不同的色彩混合模式可以产生不同的效果

5、。图层混合模式面板如图所示。返回该节（3）使用图层样式在Photoshop中，我们可以针对图层使用多种图层特效。选择“【图层】→【图层样式】”菜单命令，或单击图层面板底部的图层样式按钮　　，再从弹出的菜单中选择一种图层样式。“图层样式”菜单如图所示。返回该节4.蒙版在Photoshop中，我们可以利用“蒙版”隔绝出一个受保护的区域，只允许对未被遮挡的区域进行修改。蒙版效果图如图所示。返回该节蒙板效果：遮照物（即蒙版）作用于被遮照物（即图层），遮照物是以8位灰度通道形式存储，其中：黑色：完全不透明，被遮照物不可见。白色：完全透明，被遮照物可见。

6、灰度：半透明，被遮照物隐约可见。5.通道在Photoshop中，通道用来存储不同类型信息的灰度图像。其次，通道还可以用来存放选区和蒙版，让用户以更复杂的方法操作和控制图像的特定部分。打开一幅图像即会自动创建颜色信息通道。如果图像有多个图层，则每个图层都有自身的一套颜色通道。通道的数量取决于图像的模式，与图层的多少无关。6.路径路径是Photoshop提供的绘制矢量图形的工具，如图所示。路径是连接锚点与锚点的线段或曲线。利用路径工具我们可以绘制出各种形状的矢量图形和填充图形。同时，路径工具提供了一种有效的方式来精确的选取对象。路径可以存储在路径

7、面板中，我们可以将其转化为选区，然后对选区执行填色、描边或编辑操作。7.调整菜单/调整图层图像色彩和色调的调整是图像修饰中非常重要的一项内容,主要是对图像进行细微调整，改变图像的对比度和色彩等。Photoshop在“【图像】→【调整】”菜单命令中，提供了一系列命令来帮助调整图像色调和色彩平衡。色彩调整菜单如图所示：8.滤镜滤镜主要用来处理图像的各种效果。Photoshop的所有滤镜都按类别放置在“滤镜”菜单下，“抽出”滤镜“滤镜库”“液化”滤镜3．Photoshop设计网站封页1．实例创意本例制作网站的首页。这个网页是“网页设计与制作网络课程

8、”网站的前导页，单击该页面“Enter>>”按钮进入到站点主页面。该页面的最佳效果浏览分辨率是800×600，因此图片的大小为768×432。该实例的最终效果图如图