商业网页设计与制作 03 网页图像制作

第3章 网

页

图

像

制

作本章要介绍目前网页图像设计和处理中用得最多的两个应用软件：中文版Photoshop

CS中文版Fireworks

MX

2004。中文Photoshop

CS是集设计、图像处理和图像输出于一体的软件，被广泛应用于Web图像处理、艺术创作、插图制作、影像合成、数码照片处理及广告灯箱设计等Fireworks是Macromedia公司推出的“网页制作三剑客”之一，是专门针对网页图像设计和编辑的软件，目前在业界已经得到非常广泛地应用。第3章 网

页

图

像

制

作实训项目一

Photoshop

CS处理网页图像一、实训目的与要求学习的目的是将原图像（一个或几个图像）怎样使用Photoshop

CS处理、加工成我们所需要的图像的方法重点是掌握针对网页图像，而又便于在Photoshop

CS中处理的技术。本节中首先要掌握图像的一些基本知识；孰知中文版Photoshop

CS图像处理软件的界面；掌握常用操作和使用该工具对图像处理的方法。第3章网页图像制作二、实训预备知识1.

图像基础知识1）图像的种类①位图图像：也叫作栅格图像，是用小方形网格(栅格)即像素来代表图像，每个像素都被分配一个特定位置和颜色值。位图图像与分辨率有关②矢量图形：是由称谓矢量的数学对象所定义的直线和曲线组成的，矢量图形与分辨率无关，也就是说用户可以将它缩放到任意大小和以任意分辨率输出。第3章 网

页

图

像

制

作2）像素和颜色深度像素：是图像的基本组成单位。像素是一个有颜色的小方块，图像由许多小方块组成，似行列的方式排列颜色深度：是指图像中可用的颜色数量，也称作像素深度或位深度，它用来度量在图像中有多少颜色信息来显示或打印像素。较大的颜色深度意味着数字图像中有更多的颜色和更精确的颜色表示。第3章 网

页

图

像

制

作图像大小①像素尺寸：位图图像高度和宽度的像素数目。②屏幕显示大小：图像在屏幕中显示的大小取决于图像的像素尺寸、显示缩放比率、显示器尺寸以及显示器分辨率设置等因素。图像分辨率指图像中每单位打印长度显示的像素数目，通常用像素／英寸(ppi)表示。相同尺寸的图像分辨率越高，单位长度上的像素数越多，图像越清晰。第3章 网

页

图

像

制

作5）颜色模式颜色模式在Photoshop中可以确定图像中能显示的颜色，还可以影响图像的通道数和文件大小。①位图模式：使用两种颜色值即黑色和白色来表示图像中的像素，又称为黑白图像或一位图像。不能制作出色彩丰富的图像。②灰度模式：该模式的图像可以表现出丰富的色调。

图像中每个像素有一个0(黑)～255(白)之间的亮度值，可以使用最多256级灰度。第3章 网

页

图

像

制

作③RGB模式：是计算机存储的最常用的一种颜色模式。绝大部分的可见光谱可以用红(R)、绿(G)和蓝(B)三种色光按不同比例和强度的混合来表示，该模式的图像只使用RGB三种颜色，并为这三种颜色分配从0～255的强度值。④CMYK模式：是一种印刷模式，与RGB模式不同的是，

RGB是加色法，CMYK是减色法。第3章 网

页

图

像

制

作黑白位图图像灰度图像RGB图像CMYK模式图像第3章 网

页

图

像

制

作6）图像文件格式①BMP(Bit

Map

Picture)BMP图像文件是一种Windows标准的点阵式图形文件格式，支持RGB、索引颜色、灰度和位图颜色模式，但不支持Alpha通道。②TIFF(Tagged

Image

File

Format)TIFF(标记图像文件格式)用于在应用程序之间和计算机平台之间交换文件。TIFF是一种灵活的位图图像格式实际上被所有绘画、图像编辑和页面排版应用程序所支持。第3章 网

页

图

像

制

作③GIF(Graphics

Interchange

Format)GIF(图形交换格式)是CompuServer提供的一种图形

格式，是一种LZW压缩格式。GIF格式还支持灰度模式、动画格式、透明背景，但不支持Alpha通道。④JPEG格式(Joint

Photographic

Experts

Group)JPEG(联合图片专家组)是目前所有格式中压缩率最高的格式。目前绝大多数彩色和灰度图像都使用JPEG格式压缩图像，当对图像的精度要求不高而存储空间又有限时，JPEG是一种理想的压缩方式。第3章 网

页

图

像

制

作PSD格式(Photoshop格式)是Adobe公司开发的图像处理软件Photoshop中自建文件的标准格式。PSD格式存取速度比其他格式快很多，功能也很强大，可存放图层、通道、遮罩等多种设计草稿。⑥PNG格式（Fireworks格式）PNG（Portable

Network

Graphic）便携式网络图像是由W3C针对Web图像设计而开发的，能够以无损压缩方式较高地压缩图像，在32位色深时支持1～16位的Alpha通道。第3章 网

页

图

像

制

作7）文件压缩许多图像文件格式使用压缩技术以减少位图图像数据所需的存储空间。无损技术对图像数据进行压缩时不去掉图像细节。有损技术通过去掉图像细节来压缩图像。第3章 网

页

图

像

制

作RLE(行程长度受限编码)：是一种无损压缩技术。

LZW(Lemple-Zif-Wdlch)：是一种无损压缩技术，这种技术最适合用于压缩包含大面积单色彩的图像。

CCITT编码：是一种黑白图像无损压缩技术的系列，CCITT是“国际电话电报咨询委员会”的法语拼写的缩写。ZIP编码：是一种无损压缩技术，为PDF文件格式所支持。对于压缩包含大面积单色彩的图像是最有效的。PEG(联合图片专家组)：是一种有损压缩技术，JPEG压缩为连续色调的图像，为照片提供最好的效果。第3章网页图像制作8）图像捕捉常用软件(1)Super

CaptureSuper

Capture(超级屏捕)是一款非常优秀的Windows专业图像捕捉软件，可以将超出屏幕范围的超长网页存到一个文件中；特别值得一提的是，它还可以轻松抓取Windows

XP/Windows

2000下的所有特殊菜单(目前

还没有其他一款抓屏软件可以做到)第3章 网

页

图

像

制

作(2)Hyper

Snap该软件提供专业级影像效果，也可以轻松地抓取屏

幕画面。支持抓取使用DirectX技术的游戏画面及DVD，并且采用新的去背景功能，将抓取后的图形去除不必

要的背景；其预览功能可以正确地显示出该图打印出

来时会是什么模样。2.图像软件Photoshop

CS的界面

1）Photoshop的工作界面标题栏菜单栏工具属性栏调板状态栏工具箱图像编辑窗口工具箱第3章 网

页

图

像

制

作中文Photoshop

CS基本操作

1)创建新图像文件打开图像文件浏览图像文件保存图像文件关闭文件恢复图像文件屏幕的显示模式使用导航器控制图像显示第3章 网

页

图

像

制

作设置图像大小Photoshop

CS中可以根据实际需要调整图像的大小，但调整尺寸后，会影响图像的质量。设置画布的大小Photoshop

CS中可以根据需要来调整画布的大小。注意：一定要搞清楚设置图像大小和设置画布的大小的区别4．图像处理原图像炭笔素描效果图嘴角局部液化效果图双眼局部马赛克效果图第3章 网

页

图

像

制

作图像羽化羽化是指柔化选区的边界，使选区的边界的一个柔和的过渡效果，羽化值越大，过渡效果越明显，边界越模糊。Photoshop的图层图层的基本概念在中文PhotoshopCS中，将许多图层想象成一叠透明的纸，在一个层内没有图像的地方，可以透过该层看到底下的图层。图层可以使用户在不破坏其他元素的情况下，对其中的某一个元素进行处理。也可以通过改变图层的叠放次序或属性来改变一幅图像的合成模式，以达到理想的效果。第3章 网

页

图

像

制

作1）图层调板Photoshop打开或新建一个图像文件，得到如图所示图层调板图层菜单图层混合模式可见图层当前图层图层销定选择总体不透明度内部不透明度图层图层操作按钮透明标识第3章网页图像制作2）图层菜单

(1)新建背景图层图层组图层组来自链接的l通过拷贝的图层通过剪切的图层第3章 网

页

图

像

制

作复制图层该命令用来将当前层复制到当前图像或者其他图像中。删除图层该命令包含三个删除图层子命令：“图层”表示删除当前图层；“链接图层”表示删除具有链接关系的图层：“隐藏图层”表示删除所有隐藏的图层。第3章 网

页

图

像

制

作图层属性该命令用来设置当前图层的两个参数：图层名称与眼睛图标格和操作状态格的颜色。图层样式该命令用于设置图层的各种样式，每种样式都能使图像产生神奇的效果。图层样式包括混合模式和其他样式，图层样式的内容在下一节介绍。新填充图层在填充层中可以填充纯色、渐变和图案三种内容。第3章 网

页

图

像

制

作新调整图层调整图层主要用来控制色调和色彩的调整，它存放的是图像的色调和色彩，而不存放图像。更改图层内容用来更改调整层类型、设置图层内容选项和更改填充层内容等功能。允许直接将一种图层内容改成另一种图层内容。图层内容选项该命令用来设置图层参数。第3章 网

页

图

像

制

作文字用来编辑文字图层的文本，如果当前层不是文本图层，则该命令无效。栅格化用于文字、图形、填充等类型图层的栅格化，即将特殊的图层转化为普通图层。基于图层的切片以当前图层为基础建立一个切片。第3章 网

页

图

像

制

作(13)图层蒙版图层蒙版的运用在Photoshop中占有很重要的地位，它可以控制图层中的不同区域如何被隐藏或者显示，在多个图像的拼合处理中特别有用。图层蒙版采用灰度区域来表示透明度，例如白色区域为蒙版作用范围，而黑色区域则为透明区域。要新建图层蒙版，首先选择要创建蒙版的图层，然后选择菜单[添加图层蒙版]命令。第3章 网

页

图

像

制

作链接将相关的图层链接起来是常用的图层操作之一，这样可以将某些图层操作同时作用于具有链接关系的所有图层。合并图层主要有：向下合并、合并可见图层、拼合图层等。

(16)修边该命令用于修整在图像的复制、粘贴等操作过程中，产生的图像边缘杂色或杂点等。第3章 网

页

图

像

制

作3)图层样式图层样式使得利用图层处理图像更加方便，用户可以使用Photoshop提供的图层样式进行一些参数设置后，能在图像上制作出特殊效果。(1)图层样式设置（2）应用图层样式“金色池塘”文字应用“斜面和浮雕”图层样式后图像的效果图第3章 网

页

图

像

制

作网页图像制作第3章(3)修改图层样式

(4)复制图层样式

(5)删除图层样式第3章 网

页

图

像

制

作7．抠图技巧我们对图像的处理往往是局部的，这就要求我们能够精确地选取（抠）出这些部分，抠图在Photoshop中首先进行的是精确定位选择区域，这将直接影响到图像处理的优劣。Photoshop为此提供了很多图像选取工具，如：选框工具、套索工具、魔术棒工具、铅笔和钢笔工具等，还提供了一些与建立和编辑选区相关的命令。第3章 网

页

图

像

制

作使用选框工具建立选区使用套索工具建立选区

(1)套索工具(2)多边形套索工具

(3)磁性套索工具使用魔术棒工具建立选区使用色彩范围建立选区第3章 网

页

图

像

制

作5)选区修改先把选区转换成路径，再用“钢笔”工具来改变路径，直至符合要求后再将路径转换回选区。使用快速蒙版

6)选区操作(1)移动选区

(2)复制选区

(3)保存选区第3章网页图像制作三、实训步骤实训1

围棋图像“搏奕”标题制作1)棋盘制作新建一个文件名为围棋；图像宽度和高度均为

373像素图像色彩接近木质的深黄色制作木纹效果，分以下四步进行：①在木质黄色上创建纹理②将颗粒连贯纹理第3章 网

页

图

像

制

作③进一步调整颜色④使棋盘的木纹有扭曲效果

(4)画棋盘线，①为了便于画棋盘线，先预设网格参考线②复制一个图层，在该图层中画棋盘线

(5)设置棋盘线显示木刻效果2）设计黑白棋子黑白棋子不能简单画圆，填充黑色和白色，要制作有立体灯光效果。制作步骤如下：第3章 网

页

图

像

制

作(1)新建2个图层，分别取名为黑棋和白棋

(2)做黑子棋毛坯(3)为使棋子添加灯光效果

(4)做白子棋毛坯(5)提取黑色围棋子

(6)提取白色围棋子

(7)复制围棋子输入汉字整体添加灯光阴影效果第3章 网

页

图

像

制

作第3章 网

页

图

像

制

作实训2

按钮制作1)利用样式制作按钮（1）新建一个宽600像素，高400像素的图像文件

(2)新建图层图层上画出一个矩形选区点击“样式”调板选择“日落天空”按钮上输入文字“提交”按钮如右图所示第3章 网

页

图

像

制

作2)载入样式（1）单击“样式”调板右上方的按钮，弹出菜单，选择[载入样式]命令(2)在“载入样式”对话框中选择[按钮]载入（3）选择“样式”调板中的不同样式能制作不同效果的按钮不同效果按钮如右图所示第3章 网

页

图

像

制

作实训3

图像边框制作在网页中有许多图像，有些图像往往需要给它加上边框才能与背景或其它图像区别未作边框的图像作了红色边框的图像第3章 网

页

图

像

制

作实训4

抠图技巧一将下列图三幅图像利用抠图、渲染等方法制作合成图，其中使用了魔术棒工具和磁性套索工具的抠图技巧第3章 网

页

图

像

制

作第3章 网

页

图

像

制

作实训5

抠图技巧二在实训4中利用了磁性套索工具和魔术棒工具进行抠图，它们使用环境相似，即图像边缘的颜色或背景颜色单一，当图像边缘的颜色或背景颜色丰富多彩时，使用这两个工具就很难正确抠出图像，特别是一些细

节部分，如试用“抽出”的方法，抽出图像，再用“历史记录画笔工具”进行修改，能较准确地抠出图像。下页图像合成中的女孩就使用了这种抠图技巧第3章 网

页

图

像

制

作实训项目二

Firework

MX2004处理网页图像一、实训目的与要求本节中首先要掌握Fireworks

MX

2004图像处理软件的界面；掌握该软件的常用操作；图象处理；图像边框制作及下拉菜单的制作。二、实训预备知识1.图像软件Fireworks

MX

2004的界面第3章 网

页

图

像

制

作标题栏 菜单栏面板组工具箱开始页（图像编辑窗口）“属性”面板全屏模式带有菜单的全屏模式

标准屏幕模式（默认）工

具

箱第3章 网

页

图

像

制

作中文版Fireworks

MX

2004工作模式和首选参数工作模式矢量和位图图形

(2)矢量模式和位图模式

2)首先参数的设置设置“常规”参数的功能如下：

(2)设置“编辑”参数(3)设置“启动并编辑”选项卡

(4)设置“文件夹”参数第3章 网

页

图

像

制

作(5)设置“导入”参数3．中文版Fireworks

MX

2004基本操作

1)设置画布(1)更改画布尺寸

(2)更改画布颜色

(3)修剪画布

(4)调整画布

(5)旋转画布第3章网页图像制作2)设置图像大小3）文档的基本操作

(1)创建新文档

(2)打开文档(3)保存文档第3章 网

页

图

像

制

作三、实训步骤实训1图像线框的制作在Fireworks

MX

2004中打开要制作一象素虚线框图像。在工具箱选择“矩形”工具，在图像工作区下方

“矩形”工具属性面板作如图所示的属性设置：。第3章 网

页

图

像

制

作3)将设置好的“矩形”工具在图像边缘画出矩形，在菜单栏单击[修改]→[向下合并]命令合并“层”，得到如图所示，一像素虚线线框。第3章 网

页

图

像

制

作实训2图像中下拉菜单制作打开要制作下拉菜单的图片或页面。点击工具箱中的“矩形热点”工具画出下拉菜单热区第3章 网

页

图

像

制

作3)在菜单栏单击[修改]→[弹出菜单]→[添加弹出菜单]命令，弹出“弹出菜单编辑