设计网页图像精编.ppt

网页设计与制作教程 第1章 网页设计与制作基础 第4章 设计网页图像 第*页 本章概述 本章的学习目标 主要内容 本章概述 在绘制和处理网页图像前，应该首先了解网页图像的类型、网页色彩模式和文件基本操作方法等。本章主要介绍利用Photoshop软件创建图像文件、绘制编辑网页图像的方法，以及选区、图层、蒙版、路径的概念和使用方法等。 第*页 本章的学习目标 了解图像的文件格式和色彩模式 掌握Photoshop工具绘制图像 掌握选区的操作 了解图层的概念及蒙版的使用方法 掌握文字工具 了解路径编辑功能 第*页 主要内容 4.1　网页图像设计基础 4.2　网页图像的基本设计 4.3　网页图像的高级设计 4.4　本章小结 第*页 4.1 网页图像设计基础 网页图像类型 网页色彩模式 Photoshop图像文件操作 第*页 网页图像类型 图像类型 矢量图是一种基于图形的几何特性来描述的图像。矢量图中的每个图形都是独立的个体，都具有自己的大小、颜色和形状等属性。 位图图像是用像素点描述图像的。位图图像的品质与图像生成时与采用的分辨率有关，即在一定面积的图像上包含有固定数量的像素。 图像分辨率 分辨率确定了一幅图像的品质和能够打印或显示的细节含量。分辨率的单位为像素/英寸（dpi），表示图像上每一线性英寸的像素数。 图像文件格式 在计算机绘图中，有较多的图形和图像处理软件，不同的软件所保存的图像格式是不尽相同的。 Photoshop软件所支持的位图文件格式有PSD、PSB、TIF、BMP、JPG、GIF和PNG等20余种格式的文件。不同的文件存储格式其应用范围和呈现出来的视觉效果也不同。 图像设计的分类 标志设计、文字设计、网页设计、卡片设计、平面广告设计、产品包装设计等。 第*页 网页色彩模式 HSB色彩模式 在HSB色彩模式中，任何一种色彩均具备三个要素：色相（H）、纯度（S）和明度（B）。非彩色只有明度属性。 RGB模式 RGB颜色模式是屏幕显示的最佳颜色模式，其将红(Red、绿(Green)、蓝(Blue) 三原色光通过它们相互之间的叠加来得到各种颜色。 CMYK色彩模式 CMYK色彩模式是指青(Cyan)、洋红(Megenta)、黄(Yellow)、黑(Black)，CMYK色彩模式针对印刷媒介，即基于油墨的光吸收/反射特性，眼睛看到的颜色实际上是物体吸收白光中特定频率的光而反射其余光的颜色。该模式只能用于印刷。 第*页 Photoshop图像文件操作 图像文件基本操作 打开文件 新建文件 保存文件 存储为Web所用格式 第*页 Photoshop图像文件操作 转换图像色彩模式 第*页 Photoshop图像文件操作 Photoshop辅助工具 标尺用于度量对象的大小比例，这样可以更精确地绘制对象。 网格可以精确地对齐与放置对象，网格在默认情况下显示为水平和垂直交叉排列的线条，也可以显示为点，网格起到辅助参考的作用，不会影响到图像最终的输出和打印。 参考线在对齐和放置对象时比网格更加灵活，通过在水平标尺上向下或者垂直标尺上向右拖拉，即可创建水平或者垂直参考线。也可以通过?“视图”|?“新建参考线”命令精确创建确定位置处的参考线。 第*页 主要内容 4.1　网页图像设计基础 4.2　网页图像的基本设计 4.3　网页图像的高级设计 4.5　本章小结 第*页 4.2 网页图像的基本设计 Photoshop具有强大的图像编辑和修饰功能，用户可以简单地通过鼠标的单击，来对图像进行描绘和着色，也可以轻松地通过丰富的修饰工具对瑕疵图像进行修饰。下面主要介绍如何用Photoshop中的绘图工具进行图形图像的绘制，利用图像修饰工具进行图像的编辑操作。 第*页 选区的概念 选区是Photoshop的核心技术，实际上是用选取工具绘制的一个封闭区域，可以是任意形状，建立选区后大部操作就只针对选区范围有效，因此它对于网页元素的编辑、修改至关重要。 选区的创建 Photoshop用于创建选区的工具主要分为三类工具组：选框工具组、套索工具组和魔棒工具与快速选择工具组。另外，还可以使用色彩范围命令创建选区。 选区的移动 选区的修改 选区的全选与取消 第*页 网页图像的绘制 Photoshop软件为用户提供了丰富的绘图工具，用户可以轻松地通过画笔、铅笔和橡皮擦绘制任意形状，通过拾色器和颜色面板、油漆桶和渐变工具为图像上色。 对于有瑕疵的图像，Photoshop提供了一组专门用于修饰图像的工具。主要包括修复工具组、图章工具组、模糊/锐化工具组、加深/减淡工具组。使用时，根据要修饰的内容、修饰的最终效果、图像自身状况，有针对性地选择合适的工具进行修饰。下面分别介绍这些常用工具的特点及使用方法。 第*页 网页图像的绘制 绘制图像 Photshop绘画的步骤很简