十章网页图像处理说课材料

《十章网页图像处理说课材料》由会员分享，可在线阅读，更多相关《十章网页图像处理说课材料（62页珍藏版）》请在金锄头文库上搜索。

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

2、当图像的颜色数较多时，可以考虑PNG格式。 3目前各类浏览器均支持JPEG这种图像格式，部分浏览器不支持PNG格式。制作时应该在兼容性和效果上综合考虑 3 图像处理软件 常用的图像处理软件有Photoshop和Fireworks,工具选项：显示工具栏中所选工具的选项。不同的工具出现的选项也不相同。 文档窗口：以窗口的形式显示制作中的图像。 状态栏：位于Photoshop编辑窗口的底部。显示图像的缩放比例、内存的占用、处理的进度、目前所选工具的使用方法等信息 。 控制面板：放置各种常用的调板。也可以称为浮动面板或面板。 调板井：组织和管理调板。调板在其中只显示名称，点击后才出现整个调板。其中的文

3、件浏览器可以实现缩略图浏览、分类、排序、旋转等功能 。,2 Photoshop基本操作 Photoshop工作流程 在Photoshop中处理图像通常遵循以下流程： （1）新建或打开文档 （2）编辑图像 （3）优化图像 （4）导出图像,返回该节,2. Photoshop基本工具的使用 Photoshop CS工具箱如图所示。,返回该节,返回该节,部分工具说明如下： （1）选区工具 选取工具 套索工具 魔棒工具 钢笔工具 （2）绘图工具 画笔工具 铅笔工具 橡皮擦工具 油漆桶工具 渐变工具,3. 图层 选择“【窗口】【图层】”菜单命令或者单击键盘上的F7键，可以将图层面板显示出来。如图所示为图层

4、面板结构。,返回该节,（1）图层的基本操作 新建图层 复制图层 删除图层 调整图层的顺序 链接图层 合并图层,返回该节,（2）图层的混合模式 色彩混合模式是将当前选定的图层与下面的图层进行混合，从而产生另外一种图像显示效果。当两个图层重叠时，默认状态为“正常”，同时Photoshop也提供了多种不同的色彩混合方式，不同的色彩混合模式可以产生不同的效果。图层混合模式面板如图所示。,返回该节,（3）使用图层样式 在Photoshop中，我们可以针对图层使用多种图层特效。选择“【图层】【图层样式】”菜单命令，或单击图层面板底部的图层样式按钮，再从弹出的菜单中选择一种图层样式。“图层样式”菜单如图所示

5、。,返回该节,4. 蒙版 在Photoshop中，我们可以利用“蒙版”隔绝出一个受保护的区域，只允许对未被遮挡的区域进行修改。蒙版效果图如图所示。,返回该节,蒙板效果：遮照物（即蒙版）作用于被遮照物（即图层），遮照物是以8位灰度通道形式存储，其中： 黑色：完全不透明，被遮照物不可见。 白色：完全透明，被遮照物可见。 灰度：半透明，被遮照物隐约可见。,5. 通道 在Photoshop中，通道用来存储不同类型信息的灰度图像。其次，通道还可以用来存放选区和蒙版，让用户以更复杂的方法操作和控制图像的特定部分。 打开一幅图像即会自动创建颜色信息通道。如果图像有多个图层，则每个图层都有自身的一套颜色通道。

6、通道的数量取决于图像的模式，与图层的多少无关。,6. 路径 路径是Photoshop提供的绘制矢量图形的工具，如图所示。路径是连接锚点与锚点的线段或曲线。利用路径工具我们可以绘制出各种形状的矢量图形和填充图形。同时，路径工具提供了一种有效的方式来精确的选取对象。路径可以存储在路径面板中，我们可以将其转化为选区，然后对选区执行填色、描边或编辑操作。,7. 调整菜单/调整图层 图像色彩和色调的调整是图像修饰中非常重要的一项内容,主要是对图像进行细微调整，改变图像的对比度和色彩等。Photoshop在“【图像】【调整】”菜单命令中，提供了一系列命令来帮助调整图像色调和色彩平衡。色彩调整菜单如图所示：

7、,8. 滤镜 滤镜主要用来处理图像的各种效果。Photoshop的所有滤镜都按类别放置在“滤镜”菜单下， “抽出”滤镜 “滤镜库” “液化”滤镜,3 Photoshop设计网站封页 1实例创意 本例制作网站的首页。这个网页是“网页设计与制作网络课程”网站的前导页，单击该页面“Enter”按钮进入到站点主页面。该页面的最佳效果浏览分辨率是800600，因此图片的大小为768432。该实例的最终效果图如图所示。,2制作步骤 （1）运行Photoshop CS，新建一大小为768432像素大小，背景色为白色的空白图像。保存该图像，命名为“startpage.psd”。 （2）单键单击工具箱中的前景色

8、，在弹出的拾色器中为前景色指定“006BD4”的浅蓝色。因为蓝色给人一种专业、深邃、宁静的感觉。 （3）在工具箱中选择 工具，然后在文件窗口中单击鼠标左键，则该图像的背景色将更改为浅蓝色。 （4）在工具箱中选择 工具，然后在工具选项中选择绘制路径选项。在文件窗口中绘制路径，绘制路径的最终效果。,（5）在工具箱中选择路径选择工具，按照“注意”中所述的方法，把多条路径组合在一起。 （6）在图层面板中点击按钮，新建一图层。在新建的图层名称上双击鼠标左键，将该层命名为“飘带” 。 （7）保持“飘带”图层为当前层，图层面板中选择“路径”标签。点击面板下方的按钮，把该路径作为选区载入。设置前景色为白色，按

9、快捷键“ALTBackspace(或Delete)”或选择“【编辑】【填充】”菜单命令，为该选区填充白色。 （8）在图层面板中设置“飘带”图层的不透明度为30。,（9）打开光盘附带的“source/10/10-2-3”文件夹下的素材文件“face.psd”。把该文件的内容直接拖到startpage.psd文件中并调整好位置。命名图层为“face”。通过此图层增加页面的欢迎气氛。 （10）设置前景色为白色，在工具箱中选中工具，在文件窗口中点击左键，输入文字“网页设计与制作”。设置文字的属性为“华文行楷，60号，犀利”。按照同样的方法插入文字“网络课程”，设置文字的属性为“隶书，60号，犀利”。在

10、页面的右下角插入文字“Enter”，设置文字的属性为“方正舒体，30，犀利，加粗”。,（11）选中背景图层，双击鼠标左键，把该图层变为一普通图层。打开样式面板，为该图层应用“褪色相片”样式。 （12）选中“Enter”图层，在图层面板下方点击图层样式按钮，在弹出的菜单中选择“斜面和浮雕.”，调出图层样式对话框。设置样式为“浮雕效果”，方向为“向下”，其他选项保持默认。选中“颜色叠加”前面的复选框，并单击“颜色叠加”，进入颜色叠加项的设置。设置混合模式为“溶解”，叠加颜色为“白色”。,（13）按照同样的方法为“网页设计与制作”和“网络课程”图层添加图层样式。只是把（12）步中的“浮雕效果”的方向

11、设置为“向上”，其他设置相。 （14）选择最上面一个图层，点击图层面板中的按钮，在弹出的菜单中选择“合并图层”，把所有图层合并成一个图层。 （15）在工具箱中选择切片工具 ，在文件窗口中单击鼠标左键，则该切片工具的工具选项如图所示。,（16）在工具选项中点击“划分切片”按钮，弹出如图所示的“划分切片”对话框。水平划分4个，垂直划分5个，通过设置可以在该图片上均匀划分切片。也可以在图片上拖拽区域，自主划分切片。,（17）选择“【文件】【存储为Web所用格式】”菜单命令，将弹出“图像导出优化设置”对话框。在该对话框中可以单独设置每个切片导出所保存的文件格式和相应的优化设置。这里保持默认配置，点击“

12、存储”按钮，选择保存的位置，则所有切片将被导出到HTML网页中。,3 Fireworks设计网页,Fireworks概述 Fireworks MX 2004基本操作 实例：Fireworks MX 2004制作按钮 实例：Fireworks MX 2004制作下拉菜单,3.1 Fireworks 概述,菜单栏和工具栏：工具栏分为主要工具栏和修改工具栏。主要工具栏主要是文档操作命令，修改工具栏主要是组合、拆分、旋转和选区叠加操作等。 工具箱：包括选择、位图、矢量、网页、颜色和视图等6个类别的工具。 文档窗口：也称为画布。该区域是用户进行图像绘制、修改或编辑的场所。 状态栏：显示图像的缩放比例、画

13、布的大小、当前编辑的帧数、当前编辑的模式等信息。 属性检查器：也称为属性面板。最初显示文档的属性，随着选择不同的对象，显示不同对象的所有属性。在该检查器中可以调整不同对象的属性。 面板组：用来组织和管理各种浮动面板。,2 Fireworks MX 2004基本操作,Fireworks MX 2004工作流程 在Fireworks MX 2004中处理图片一般遵循以下流程： （1）创建图形 （2）创建Web对象 （3）优化图像 （4）导出图像,2Fireworks MX 2004基本工具的使用 Fireworks MX 2004的基本工具如图所示。,（1）选择工具 选择工具 部分选择工具 缩放工

14、具 裁剪工具 橡皮图章工具,（3）矢量图形工具 直线工具 矩形工具 钢笔工具 刀子工具 自由变形工具 文本工具,（5）颜色工具 填充色工具 笔触工具,（2）位图工具 滴管工具 油漆桶工具 涂抹工具 橡皮擦工具 选取框工具 套索工具 魔棒工具 刷子工具 铅笔工具,（4）Web对象工具 矩形热点工具 切片工具 隐藏切片和热点工具 显示切片和热点工具,（6）视图工具 手形工具 缩放工具,3Fireworks MX 2004的修改工具栏 该工具栏主要分成3部分：路径修改工具，对象排列工具和对象变形工具。路径修改工具仅对矢量路径有效，可以组合、合并、拆分路径。对象排列工具可以设置矢量或位图图像的叠放方式

15、和对齐方式。对象变形工具可以翻转或旋转对象，对矢量和位图图像均有效。,4Fireworks MX 2004的常用面板 （1）优化面板 在Fireworks MX 2004中，为了减少图像的容量，可以通过优化面板来对图像进行优化。 选择文件格式：选择适合图像内容的图像格式。 设置格式特定项：不同格式的优化参数，例如GIF格式的颜色数量和JPEG格式的压缩质量。 （2）层面板 Fireworks MX 2004的层类似于Photoshop中的图层组。一个图层可以包括多个对象。层也是“透明的绘图纸”，每张透明纸放置着不同的矢量图形或位图图像。上层对象遮挡下层对象，可以调整对象之间的排列方式来改变叠放

16、效果,（3）样式、URL、库面板 “样式”面板：笔画、填充、特效和字体设置等属性的集合。“样式”面板中包含一组可供选择的预定义Fireworks样式。如果创建了笔触、填充等属性并想重复利用或应用于其他对象，保存该样式在“样式”面板中即可。 “URL”面板：URL是因特网上特定页面或文件的地址。欲多次使用同一个URL，可将它添加到“URL“面板，并且可以对URL进行分组管理。 “库”面板：Fireworks MX 2004提供了3种类型的元件：图形、动画和按钮，其功能和Flash中元件功能类似。除了可以复制、导入、编辑元件外，可以创建自定义元件。,（4）帧面板 帧好比电影胶片中的单幅画面，通过帧可以制作动画。在“帧”面板中，可以创建帧、命名帧，组织帧，设置帧的属性和延时，隐藏帧，设置动画的运行时间以及在多个帧之间共享内容。 洋葱皮 ：查看所选帧和之前、之后帧的内容。可以查看多帧的内容和设置多帧内容的对齐，而不用在多帧之间来回跳转。 Gif动画循环 ：设置导出后Gif动画的循环播放次数。 分散到帧 ：将复制的对象分配到帧中,（5）历史记录面板 在“历史记录”面