劳动出版社精品课件 《电子商务网页图像制作（AdobePhotoshop）（第二版）》 A243116第1章认识电子商务网页图像制作

1、第 1 章 认识电子商务网页图像制作 第 1 节 数字图像的基本概念 第 2 节 颜色的基本常识 第 3 节 平面构图的基本常识,第 1 节 数字图像的基本概念 电子商务网页图像是一种数字图像。对于数字图像，需要了解其主要类型、像素、分辨率的含义和作用，以及常见的数字图像文件格式。这样在制作电子商务网页图像，进行图像文件创建、编辑制作、保存和选择时，就能更加合理和有效。,一、数字图像的主要类型 数字图像是由模拟图像数字化得到的，用计算机或数字电路存储和处理的图像。计算机一般采用点阵图和矢量图两种方式存储或处理图像。,1. 点阵图（Bitmap） 点阵图即位图存储模式，是通过许多像素点表示一幅图像，每个像素具有颜色属性和位置属性。 2. 矢量图（Vector） 矢量图即矢量存储模式，是根据几何特性用直线和曲线来描述图形，即图像由线条和填充颜色的块面构成，而不是图像数据的每一点。,点阵图样例,矢量图样例,如果将点阵图与矢量图进行比较，就会发现： （1）点阵图由一个一个的像素点组成，即在一定面积的图像上包含有固定数量的像素。因此，如果在屏幕上以较大的倍数放大显示图像或以过低的分辨率打印时，位

2、图图像会出现锯齿边缘。而矢量图是根据几何特性来绘制图形，用线段和曲线描述图像，与单位面积上的图像点数无关，可以将它缩放到任意大小显示和打印，都不会影响其清晰度。,点阵图与矢量图放大效果对比,（2）点阵图表现的色彩比较丰富，可逼真地表现自然界的各类实物；而矢量图色彩不够丰富，无法表现逼真的实物。 （3）由于点阵图表现的色彩比较丰富，因此占用的空间会很大。由于矢量图表现的图像颜色比较单一，因此所占用的空间相对较小。 （4）通过软件，可以将矢量图轻松地转化为点阵图，而将点阵图转化为矢量图就需要经过复杂而庞大的数据处理，且生成的矢量图质量绝对不能和原来的图形比拟。,点阵图与矢量图色彩效果对比,二、数字图像的像素和分辨率 1. 图像像素（Pixel） 位图图像最基本的单位是像素，它是一个小的方形颜色块，一个图像通常由许多像素组成，这些像素被排列成横行和纵列。当把图像放大足够的倍数时，就会发现图像画面其实是由许多色彩相近的小方点所组成，这些小方点就是构成图像的最小单位“像素”（Pixel）。,2. 图像分辨率 图像分辨率是指图像单位长度内像素的个数，常用单位为像素 / 英寸（Pixels Per

3、Inch，缩写为 ppi），就是指每 1 英寸（1 英寸 =2.54 厘米）的单位长度里一共有多少个像素点，它是衡量图像细节表现力的一个重要技术参数。 在图片创建期间，必须根据图像最终的用途决定正确的分辨率。一般情况下，电子商务网页的图像主要用于屏幕显示，方便网络传输，其图像分辨率一般设置为 72dpi（每英寸的像素）；而用于出版印刷的图像制作时，其图像分辨率一般设置为 300dpi。,图像分辨率为 10 像素 / 英寸，占 3.15KB,图像分辨率为 72 像素 / 英寸，占 101 KB,图像分辨率为 300 像素 / 英寸，占 499 KB,三、数字图像的文件格式 1. BMP 格式 BMP（位图格式）是最普遍的点阵图格式之一，也是 Window 系统下的标准格式，是将 Window 下显示的点阵图以无损形式保存的文件，其优点是不会降低图片的质量，但文件占用的存储空间比较大。,2. GIF 格式 GIF（图像交换格式）是一种压缩格式，适合用于线条图的剪贴画以及使用大块纯色的图片。该格式使用无损压缩来减少图片的大小，当用户要保存图片为 GIF 格式时，可以自行决定是否保存透明区域或

4、者转换为纯色。同时，通过多幅图片的转换，GIF 格式还可以保存为动画文件。但要注意的是，GIF 图像最多只能支持 256 色。,3. JPEG 格式 JPEG（联合图片专家组图像格式）是压缩率较高的格式，大多数彩色和灰度图像都使用 JPEG 格式。JPEG 格式图像压缩比很大，而且支持多种压缩级别，当对图像的精度要求不高而存储空间又有限时，JPEG 是一种理想的压缩方式。在 HTML 文档中，JPEG 广泛用于显示图片和其他连续色调的图像文档。,4. PNG 格式 PNG 是一种较新的网络图像格式。PNG 汲取了 GIF 和 JPEG 二者的优点，其第一个特点是采用无损压缩方式来减少文件的大小，保证图像不失真，这一点与牺牲图像品质以换取高压缩率的 JPEG 有所不同；它的第二个特点是显示速度很快，只需下载 1/64 的图像信息就可以显示出低分辨率的预览图像；其第三个特点是同样支持透明图像的制作，透明图像在制作网页图像时很有用，把图像背景设为透明，可让图像与网页背景很和谐地融合在一起。,5. PSD 格式 PSD 是图像处理软件 Adobe Photoshop 的专用格式。PSD 其实是

5、 Photoshop 进行平面设计的一张“草稿图”，它里面包含有各种图层、通道、遮罩等多种设计的样稿，以便于下次打开文件时可以修改上一次的设计。在 Photoshop 所支持的各种图像格式中，PSD 的存取速度比其他格式快很多，功能也很强大。,6. TIFF 格式 TIFF（标记图像文件格式）用于在应用程序之间和计算机平台之间交换文件。TIFF是一种灵活的图像格式，被所有绘画、图像编辑和页面排版应用程序支持，几乎所有的桌面扫描仪都可以生成 TIFF 图像，而且 TIFF 格式还可加入作者、版权、备注以及自定义信息，存放多幅图像。,7. WMF 格式 WMF 是 Windows 中常见的一种图元文件格式，属于矢量文件格式。它具有文件短小、图案造型化的特点，整个图形常由各个独立的组成部分拼接而成，其图形相对简单。,8. CDR 格式 CDR 格式是绘图软件 Corel Draw 的专用图形文件格式，而 Corel Draw 是一款平面排版矢量绘图软件，它可用于企业 VI 设计、宣传画册设计、书籍装帧设计等。,9. AI 格式 AI 格式是 Adobe 公司发布的，其优点是占用硬盘空间小，打

6、开速度快，方便格式转换，是矢量软件 Illustrator 的专用图形文件格式。,10. EPS 格式 EPS 格式是跨平台的标准格式，扩展名在 PC 平台上是 .eps，在苹果机 Macintosh 平台上是 .epsf，主要用于矢量图像和光栅图像的存储。EPS 格式采用 PostScript 语言进行描述，并且可以保存其他一些类型信息，如多色调曲线、Alpha 通道、分色、剪辑路径、挂网信息等，因此 EPS 格式常用于印刷或打印输出。Photoshop 中的多个 EPS 格式选项可以实现印刷、打印的综合控制，在某些情况下甚至优于 TIFF 格式。,第 2 节 颜色的基本常识 对于图像制作来说，认识色彩是创建完美图像的重要基础。电子商务网页图像作为计算机处理的数字图像，其使用的颜色本身没有什么不同，但它还是有一些特定的记录和处理色彩的技术。因此，需要理解颜色的基本理论，熟悉数字图像处理技术中有关颜色、色彩的术语，并对颜色及其特性有进一步了解。,一、颜色及其三要素 颜色具有三要素：明度（Brightness）、色相（Hue）、饱和度（Saturation）。 1. 明度 B（Brigh

7、tness） 在无色彩中，颜色明度最高的色为白色，明度最低的色为黑色，中间存在一个从亮到暗的灰色系列。明度在三要素中具有较强的独立性，它可以不带任何色相的特征而通过黑白灰的关系单独呈现出来。 由于明度表示颜色的相对明暗程度，在 Photoshop 等计算机绘图软件中，通常用从 0（黑）100%（白）的百分比来度量明度。,2. 色相 H（Hue） 色相是指色彩的相貌。如果说明度是色彩的骨骼，色相就很像色彩外表的华美肌肤。色相体现着色彩外向的性格，是色彩的灵魂。 在 Photoshop 等计算机绘图软件中，使用 0360 的标准色轮对色相按位置进行度量。通常色相是由颜色名称标识的，如红、绿或橙色。,色轮将可见光范围内颜色以圆环方式表示,3. 饱和度 S（Saturation） 饱和度（也叫纯度）指的是颜色的强度或纯度，即彩色成分所占的比例。在Photoshop 等计算机绘图软件中，常用从 0（灰色）100%（完全饱和）的百分比来度量饱和度。如果使用色轮的方式来表示，在标准色轮上饱和度是从中心逐渐向边缘递增的。,标准色轮不同色相及其饱和度变化,基于颜色的色相（Hue）、饱和度（Saturat

8、ion）、明度（Brightness）三要素，在Photoshop等计算机绘图软件中，常用 HSB 模式来描述颜色。,使用 HSB 模式描述颜色,二、数字图像的色彩模式 除了 HSB 颜色表示模式，计算机图像处理软件通常还使用 RGB、CMYK 及 Lab 等色彩模式，以便在不同应用领域更好地表示颜色。其中 RGB 模式是一种发光屏幕的加色模式；CMYK 模式是一种颜色反光的印刷减色模式；Lab 模式是为了弥补 RGB 和 CMYK 两种色彩模式的不足，由 CIE 组织（国际照明委员会）确定的一个理论上包括了人眼可以看见的所有色彩的色彩模式。,1. RGB 模式 绝大部分的可见光可以用红、绿和蓝（RGB）三原色光按不同比例和强度的混合来表示。因为 RGB 三种颜色合到一起产生白色，所以 RGB 模型为加色模式，用于光照、视频和显示器。 在 Photoshop 等图像处理软件的 RGB 模式中，可以给彩色图像中每个像素的 RGB 分量分配一个从 0（黑色）到 255（白色）范围的强度值。,RGB 图像使用红、绿、蓝三种颜色，在屏幕上可以重现多达 1670 万种颜色。RGB 图像为三通道图

9、像，每个像素包含 24 位（83）。新建 Photoshop 图像的默认模式为 RGB，计算机显示器总是使用 RGB 模型显示颜色。,RGB颜色模式,2. CMYK 模式 CMYK 颜色模式以打印在纸张上油墨的光线吸收特性为基础，当白光照射到半透明的油墨上时，部分光线被吸收，部分被反射回眼睛。理论上，纯青色（C）、品红（M）和黄色（Y）色素能够合成吸收所有颜色并产生黑色，因此，CMYK 模型也叫作减色模型。由于所有打印油墨都会包含一些杂质，这三种油墨实际上产生的是一种土灰色，因此必须与黑色（K）油墨混合才能产生真正的黑色。,CMYK 图像为四通道图像，在 Photoshop 等图像处理软件的 CMYK 模式中，每个像素的每种印刷油墨会被分配一个 0%100% 的百分比值。最亮（高光）颜色分配较低的百分比值，较暗（暗调）颜色分配较高的百分比值。当所有四种分量的值都是 0%时，就会产生纯白色。,CMYK 颜色模式,3. Lab 模式 Lab 颜色模式由心理明度分量（L）和两个色度分量组成，这两个色度分量即 a 分量（从绿到红）和 b 分量（从蓝到黄）。 Lab 颜色模式与设备无关，不管使用什么设备（如显示器、打印机或扫描仪）创建或输出图像，这种颜色模型产生的颜色都保持一致。在 Photoshop 等图像处理软件中，Lab颜色模式主要用于不同颜色模式之间的转换。,三、色彩的心理感觉 色彩心理是客观世界的主观反映，不同的颜色会给浏览者不同的心理感受。不同波长的光作用于人的视觉器官而产生色感时，必然导致人产生某种带有情感的心理活动，而且每种色彩在饱和度、明度上的略微变化也会产生不同的感觉。 色彩的心理感觉具有差异性和共同性的特点，差异性体现在色彩感觉与人的年龄、职业、心理相关；共同性体现在色彩的冷暖、轻重、动静等感觉，其决定因素是色彩自身的三要素。,色彩的心理感觉,1. 色彩感觉与年龄 由于年龄变化，导致生理变化和心理变化。据研究统计：婴儿喜爱红色和黄色；49岁的儿童最喜爱红色；9 岁的儿童又喜爱绿色；715 岁的小学生和初中生中，男生的色彩喜好次序是绿、红、青、黄、白、黑，女生的色彩喜好次序是绿、红、白、青、黄、黑。随着年龄的增长，人们的色彩喜好逐渐向复色过渡，向黑色靠近。也就是说，人们越成熟，所喜爱的色彩越倾向成熟。,2. 色彩感觉与职业 一

《劳动出版社精品课件 《电子商务网页图像制作（AdobePhotoshop）（第二版）》 A243116第1章认识电子商务网页图像制作》由会员E****分享，可在线阅读，更多相关《劳动出版社精品课件 《电子商务网页图像制作（AdobePhotoshop）（第二版）》 A243116第1章认识电子商务网页图像制作》请在金锄头文库上搜索。