《设计网页图像全解课件.ppt》由会员分享，可在线阅读，更多相关《设计网页图像全解课件.ppt（29页珍藏版）》请在三一办公上搜索。
1、第4章 设计网页图像,第1页,本章概述 本章的学习目标主要内容,本章概述,在绘制和处理网页图像前，应该首先了解网页图像的类型、网页色彩模式和文件基本操作方法等。本章主要介绍利用Photoshop软件创建图像文件、绘制编辑网页图像的方法，以及选区、图层、蒙版、路径的概念和使用方法等。,第2页,本章的学习目标,了解图像的文件格式和色彩模式掌握Photoshop工具绘制图像掌握选区的操作了解图层的概念及蒙版的使用方法掌握文字工具了解路径编辑功能,第3页,主要内容,4.1网页图像设计基础4.2网页图像的基本设计4.3网页图像的高级设计4.4本章小结,第4页,4.1 网页图像设计基础,网页图像类型网页色
2、彩模式Photoshop图像文件操作,第5页,网页图像类型,图像类型矢量图是一种基于图形的几何特性来描述的图像。矢量图中的每个图形都是独立的个体，都具有自己的大小、颜色和形状等属性。位图图像是用像素点描述图像的。位图图像的品质与图像生成时与采用的分辨率有关，即在一定面积的图像上包含有固定数量的像素。图像分辨率分辨率确定了一幅图像的品质和能够打印或显示的细节含量。分辨率的单位为像素/英寸（dpi），表示图像上每一线性英寸的像素数。图像文件格式在计算机绘图中，有较多的图形和图像处理软件，不同的软件所保存的图像格式是不尽相同的。Photoshop软件所支持的位图文件格式有PSD、PSB、TIF、BM
3、P、JPG、GIF和PNG等20余种格式的文件。不同的文件存储格式其应用范围和呈现出来的视觉效果也不同。图像设计的分类标志设计、文字设计、网页设计、卡片设计、平面广告设计、产品包装设计等。,第6页,网页色彩模式,HSB色彩模式在HSB色彩模式中，任何一种色彩均具备三个要素：色相（H）、纯度（S）和明度（B）。非彩色只有明度属性。RGB模式RGB颜色模式是屏幕显示的最佳颜色模式，其将红(Red、绿(Green)、蓝(Blue) 三原色光通过它们相互之间的叠加来得到各种颜色。CMYK色彩模式CMYK色彩模式是指青(Cyan)、洋红(Megenta)、黄(Yellow)、黑(Black)，CMYK色
4、彩模式针对印刷媒介，即基于油墨的光吸收/反射特性，眼睛看到的颜色实际上是物体吸收白光中特定频率的光而反射其余光的颜色。该模式只能用于印刷。,第7页,Photoshop图像文件操作,图像文件基本操作打开文件新建文件保存文件存储为Web所用格式,第8页,Photoshop图像文件操作,转换图像色彩模式,第9页,Photoshop图像文件操作,Photoshop辅助工具标尺用于度量对象的大小比例，这样可以更精确地绘制对象。网格可以精确地对齐与放置对象，网格在默认情况下显示为水平和垂直交叉排列的线条，也可以显示为点，网格起到辅助参考的作用，不会影响到图像最终的输出和打印。参考线在对齐和放置对象时比网格
5、更加灵活，通过在水平标尺上向下或者垂直标尺上向右拖拉，即可创建水平或者垂直参考线。也可以通过“视图”|“新建参考线”命令精确创建确定位置处的参考线。,第10页,主要内容,4.1网页图像设计基础4.2网页图像的基本设计4.3网页图像的高级设计4.5本章小结,第11页,4.2 网页图像的基本设计,Photoshop具有强大的图像编辑和修饰功能，用户可以简单地通过鼠标的单击，来对图像进行描绘和着色，也可以轻松地通过丰富的修饰工具对瑕疵图像进行修饰。下面主要介绍如何用Photoshop中的绘图工具进行图形图像的绘制，利用图像修饰工具进行图像的编辑操作。,第12页,选区的概念,选区是Photoshop的
6、核心技术，实际上是用选取工具绘制的一个封闭区域，可以是任意形状，建立选区后大部操作就只针对选区范围有效，因此它对于网页元素的编辑、修改至关重要。选区的创建Photoshop用于创建选区的工具主要分为三类工具组：选框工具组、套索工具组和魔棒工具与快速选择工具组。另外，还可以使用色彩范围命令创建选区。选区的移动选区的修改选区的全选与取消,第13页,网页图像的绘制,Photoshop软件为用户提供了丰富的绘图工具，用户可以轻松地通过画笔、铅笔和橡皮擦绘制任意形状，通过拾色器和颜色面板、油漆桶和渐变工具为图像上色。对于有瑕疵的图像，Photoshop提供了一组专门用于修饰图像的工具。主要包括修复工具组
7、、图章工具组、模糊/锐化工具组、加深/减淡工具组。使用时，根据要修饰的内容、修饰的最终效果、图像自身状况，有针对性地选择合适的工具进行修饰。下面分别介绍这些常用工具的特点及使用方法。,第14页,网页图像的绘制,绘制图像Photshop绘画的步骤很简单，只需要选择绘画工具、颜色、适当的笔触样式，然后拖动鼠标，在图像上绘制即可。使用画笔擦除图像设置颜色拾色器和颜色面板油漆桶工具渐变工具,第15页,网页图像的绘制,例4-1 绘制国旗。例4-2 绘制透明按钮。,第16页,调整网页图像,图像和视图基本属性调整调整画布和图像的大小裁剪图像视图调整修饰网页图像修复图像仿制图像修饰图像,第17页,调整网页图像
8、,例4-3 用修补工具消除图像文字。,第18页,调整网页图像,调整网页图像色彩Photoshop具有强大的色彩调整功能，对于一些偏色、曝光不足或曝光过度的彩色图片，利用色阶、曲线、色彩平衡和色相/饱和度等功能对这些图片进行校正，使其色彩尽量恢复正常。色阶命令曲线命令亮度/对比度色彩平衡色相/饱和度,第19页,主要内容,4.1网页图像设计基础4.2网页图像的基本设计4.3网页图像的高级设计4.4本章小结,第20页,4.3 网页图像的高级设计,图层与蒙板设计网页文字形状和路径滤镜与通道,第21页,图层与蒙板,图层基本操作图层在Photoshop中有着非常强大的功能，其能为图像的编辑提供极大便利。图
9、层可以形象地看成是一张张透明的纸，如果上面的图层没有图像，可以看到下层中的内容。最底层的图层为背景层。不同的图像在各自的图层中独立操作而互不影响。图层通常分为背景层、普通层、文字层、蒙版层、形状层、填充/调整层等。图层的基本操作主要在图层面板中进行。图层面板图层样式图层混合模式,第22页,图层与蒙板,例4-4 利用图层的混合模式为人物替换服装颜色,第23页,图层与蒙板,图层蒙版蒙版就像喷绘时用的挡板，用来限制颜料的作用范围。为图层添加蒙版，能够在不改变原有图像的基础上实现图像的特殊显示效果。例4-5 利用图层蒙版为手机换墙纸。,第24页,设计网页文字,例4-6 制作图案文字。,第25页,形状和
10、路径,网页设计中经常要绘制各种几何形状，它们是网页构图的基础。在Photoshop中，如果需要绘制线段、曲线、特殊形状，就需要使用功能强大的钢笔工具组、路径工具组和形状工具组。钢笔工具组路径工具组形状工具组,第26页,滤镜与通道,运用滤镜增强网页图像的效果滤镜是Photoshop中效果独特的工具之一，经过滤镜处理过的图像会出现奇幻的艺术效果。Photoshop提供的滤镜包括像素化、扭曲、杂色、模糊、渲染、画笔描边、素描、纹理、艺术效果、锐化、风格化等，也可以使用第三方提供的滤镜。滤镜的使用是通过滤镜菜单实现的。通道及其应用通道是用于存储图像颜色信息和选区信息等不同内容信息的灰度图像。在Phot
11、oshop中可以利用通道创建选区或制作特殊图像效果。通道是存储不同类型信息的灰度图像，在Photoshop中包括3种类型的通道：颜色信息通道、专色通道和Alpha通道。,第27页,主要内容,4.1网页图像设计基础4.3网页图像的高级设计4.2网页图像的基本设计4.4本章小结,第28页,4.4 本章小结,本章全面讲述了利用Photoshop软件创建图像文件、绘制编辑网页图像的方法。首先，介绍了网页图像类型，网页色彩模式和图像文件操作等网页图像设计基础知识。接下来，对网页图像的基本设计进行了介绍。分别讲述了选区的概念、使用Photoshop的绘图和修饰工具，绘制和调整网页图像及色彩。最后，对网页图像的高级设计进行了详细讲述，包括图层与蒙板的使用方法、网页文字设计的方法、形状和路径、滤镜与通道的概念等内容。,第29页,
