网页设计与制作使用教程第10章
第十章 网页图像处理 本章学习目标 理解网页图像的基本格式 掌握Photoshop CS的基本用法 掌握完整页面的制作及切割的方法 掌握Fireworks MX 的基本用法 掌握用Fireworks MX 制作按钮和 下拉菜单的方法 1.网页图象基础 1 ．网页图像格式 GIF格式 JPEG格式 PNG格式 SVG格式 2．网页图像使用要点 1．GIF格式一般用于大块纯色的图片或网页中的标题文字、按钮、小图标、小动画、logo图片等图像内容的存储，不适合表现真彩色和渐变色的图像。用JPEG处理照片比较合适，因为它们的阴影与色彩中包含有许多缓和的变化。 2．GIF和PNG都支持背景透明，当图像的颜色数较多时，可以考虑PNG格式。 3．目前各类浏览器均支持JPEG这种图像格式，部分浏览器不支持PNG格式。制作时应该在兼容性和效果上综合考虑 3 ．图像处理软件 常用的图像处理软件有Photoshop和Fireworks 2． Photoshop设计网页 工具选项：显示工具栏中所选工具的选项。不同的工具出现的选项也不相同。 文档窗口：以窗口的形式显示制作中的图像。 状态栏：位于Photoshop编辑窗口的底部。显示图像的缩放比例、内存的占用、处理的进度、目前所选工具的使用方法等信息 。 控制面板：放置各种常用的调板。也可以称为浮动面板或面板。 调板井：组织和管理调板。调板在其中只显示名称，点击后才出现整个调板。其中的文件浏览器可以实现缩略图浏览、分类、排序、旋转等功能 。 2 ．Photoshop基本操作 Photoshop工作流程 在Photoshop中处理图像通常遵循以下流程： (1)新建或打开文档 (2)编辑图像 (3)优化图像 (4)导出图像 2. Photoshop基本工具的使用 Photoshop CS工具箱如图所示。 3. 图层 选择“【窗口】→【图层】”菜单命令或者单击键盘上的F7键，可以将图层面板显示出来。如图所示为图层面板结构。 (1)图层的基本操作 新建图层 复制图层 删除图层 调整图层的顺序 链接图层 合并图层 (2)图层的混合模式 色彩混合模式是将当前选定的图层与下面的图层进行混合，从而产生另外一种图像显示效果。当两个图层重叠时，默认状态为“正常”，同时Photoshop也提供了多种不同的色彩混合方式，不同的色彩混合模式可以产生不同的效果。图层混合模式面板如图所示。 (3)使用图层样式 在Photoshop中，我们可以针对图层使用多种图层特效。选择“【图层】→【图层样式】”菜单命令，或单击图层面板底部的图层样式按钮，再从弹出的菜单中选择一种图层样式。“图层样式”菜单如图所示。 4. 蒙版 在Photoshop中，我们可以利用“蒙版”隔绝出一个受保护的区域，只允许对未被遮挡的区域进行修改。蒙版效果图如图所示。 7. 调整菜单/调整图层 图像色彩和色调的调整是图像修饰中非常重要的一项内容,主要是对图像进行细微调整，改变图像的对比度和色彩等。Photoshop在“【图像】→【调整】”菜单命令中，提供了一系列命令来帮助调整图像色调和色彩平衡。色彩调整菜单如图所示： 8. 滤镜 滤镜主要用来处理图像的各种效果。Photoshop的所有滤镜都按类别放置在“滤镜”菜单下， “抽出”滤镜 “滤镜库” “液化”滤镜 3 ．Photoshop设计网站封页 1．实例创意 本例制作网站的首页。这个网页是“网页设计与制作网络课程”网站的前导页，单击该页面“Enter>>”按钮进入到站点主页面。该页面的最佳效果浏览分辨率是800×600，因此图片的大小为768×432。该实例的最终效果图如图所示。 (5)在工具箱中选择路径选择工具，按照“注意”中所述的方法，把多条路径组合在一起。 (6)在图层面板中点击按钮，新建一图层。在新建的图层名称上双击鼠标左键，将该层命名为“飘带” 。 (7)保持“飘带”图层为当前层，图层面板中选择“路径”标签。点击面板下方的按钮，把该路径作为选区载入。设置前景色为白色，按快捷键“ALT＋Backspace(或Delete)”或选择“【编辑】→【填充】”菜单命令，为该选区填充白色。 (8)在图层面板中设置“飘带”图层的不透明度为30％。 (9)打开光盘附带的“source/10/10-2-3”文件夹下的素材文件“face.psd”。把该文件的内容直接拖到startpage.psd文件中并调整好位置。命名图层为“face”。通过此图层增加页面的欢迎气氛。 (10)设置前景色为白色，在工具箱中选中工具，在文件窗口中点击左键，输入文字“网页设计与制作”。设置文字的属性为“华文行楷，60号，犀利”
