1、1 第第 1 章章第 1 章 认识电子商务网页图像制作第 1 节 数字图像的基本概念第 2 节 颜色的基本常识第 3 节 平面构图的基本常识2 第第 1 章章第 1 节 数字图像的基本概念 电子商务网页图像是一种数字图像。对于数字图像，需要了解其主要类型、像素、分辨率的含义和作用，以及常见的数字图像文件格式。这样在制作电子商务网页图像，进行图像文件创建、编辑制作、保存和选择时，就能更加合理和有效。3 第第 1 章章一、数字图像的主要类型 数字图像是由模拟图像数字化得到的，用计算机或数字电路存储和处理的图像。计算机一般采用点阵图和矢量图两种方式存储或处理图像。4 第第 1 章章1.点阵图（Bit
2、map）点阵图即位图存储模式，是通过许多像素点表示一幅图像，每个像素具有颜色属性和位置属性。2.矢量图（Vector）矢量图即矢量存储模式，是根据几何特性用直线和曲线来描述图形，即图像由线条和填充颜色的块面构成，而不是图像数据的每一点。点阵图样例矢量图样例5 第第 1 章章 如果将点阵图与矢量图进行比较，就会发现：（1）点阵图由一个一个的像素点组成，即在一定面积的图像上包含有固定数量的像素。因此，如果在屏幕上以较大的倍数放大显示图像或以过低的分辨率打印时，位图图像会出现锯齿边缘。而矢量图是根据几何特性来绘制图形，用线段和曲线描述图像，与单位面积上的图像点数无关，可以将它缩放到任意大小显示和打印
3、，都不会影响其清晰度。点阵图与矢量图放大效果对比6 第第 1 章章 （2）点阵图表现的色彩比较丰富，可逼真地表现自然界的各类实物；而矢量图色彩不够丰富，无法表现逼真的实物。（3）由于点阵图表现的色彩比较丰富，因此占用的空间会很大。由于矢量图表现的图像颜色比较单一，因此所占用的空间相对较小。（4）通过软件，可以将矢量图轻松地转化为点阵图，而将点阵图转化为矢量图就需要经过复杂而庞大的数据处理，且生成的矢量图质量绝对不能和原来的图形比拟。点阵图与矢量图色彩效果对比7 第第 1 章章二、数字图像的像素和分辨率1.图像像素（Pixel）位图图像最基本的单位是像素，它是一个小的方形颜色块，一个图像通常由许
4、多像素组成，这些像素被排列成横行和纵列。当把图像放大足够的倍数时，就会发现图像画面其实是由许多色彩相近的小方点所组成，这些小方点就是构成图像的最小单位“像素”（Pixel）。8 第第 1 章章2.图像分辨率 图像分辨率是指图像单位长度内像素的个数，常用单位为像素/英寸（Pixels Per Inch，缩写为 ppi），就是指每 1 英寸（1 英寸=2.54 厘米）的单位长度里一共有多少个像素点，它是衡量图像细节表现力的一个重要技术参数。在图片创建期间，必须根据图像最终的用途决定正确的分辨率。一般情况下，电子商务网页的图像主要用于屏幕显示，方便网络传输，其图像分辨率一般设置为 72dpi（每英寸
5、的像素）；而用于出版印刷的图像制作时，其图像分辨率一般设置为 300dpi。9 第第 1 章章图像分辨率为 10 像素/英寸，占 3.15KB 10 第第 1 章章图像分辨率为 72 像素/英寸，占 101KB11 第第 1 章章图像分辨率为 300 像素/英寸，占 499KB12 第第 1 章章三、数字图像的文件格式1.BMP 格式 BMP（位图格式）是最普遍的点阵图格式之一，也是 Window 系统下的标准格式，是将 Window 下显示的点阵图以无损形式保存的文件，其优点是不会降低图片的质量，但文件占用的存储空间比较大。13 第第 1 章章2.GIF 格式 GIF（图像交换格式）是一种压
6、缩格式，适合用于线条图的剪贴画以及使用大块纯色的图片。该格式使用无损压缩来减少图片的大小，当用户要保存图片为 GIF 格式时，可以自行决定是否保存透明区域或者转换为纯色。同时，通过多幅图片的转换，GIF 格式还可以保存为动画文件。但要注意的是，GIF 图像最多只能支持 256 色。14 第第 1 章章3.JPEG 格式 JPEG（联合图片专家组图像格式）是压缩率较高的格式，大多数彩色和灰度图像都使用 JPEG 格式。JPEG 格式图像压缩比很大，而且支持多种压缩级别，当对图像的精度要求不高而存储空间又有限时，JPEG 是一种理想的压缩方式。在 HTML 文档中，JPEG 广泛用于显示图片和其他
7、连续色调的图像文档。15 第第 1 章章4.PNG 格式 PNG 是一种较新的网络图像格式。PNG 汲取了 GIF 和 JPEG 二者的优点，其第一个特点是采用无损压缩方式来减少文件的大小，保证图像不失真，这一点与牺牲图像品质以换取高压缩率的 JPEG 有所不同；它的第二个特点是显示速度很快，只需下载 1/64 的图像信息就可以显示出低分辨率的预览图像；其第三个特点是同样支持透明图像的制作，透明图像在制作网页图像时很有用，把图像背景设为透明，可让图像与网页背景很和谐地融合在一起。16 第第 1 章章5.PSD 格式 PSD 是图像处理软件 AdobePhotoshop 的专用格式。PSD 其实
8、是 Photoshop 进行平面设计的一张“草稿图”，它里面包含有各种图层、通道、遮罩等多种设计的样稿，以便于下次打开文件时可以修改上一次的设计。在 Photoshop 所支持的各种图像格式中，PSD 的存取速度比其他格式快很多，功能也很强大。17 第第 1 章章6.TIFF 格式 TIFF（标记图像文件格式）用于在应用程序之间和计算机平台之间交换文件。TIFF是一种灵活的图像格式，被所有绘画、图像编辑和页面排版应用程序支持，几乎所有的桌面扫描仪都可以生成 TIFF 图像，而且 TIFF 格式还可加入作者、版权、备注以及自定义信息，存放多幅图像。18 第第 1 章章7.WMF 格式 WMF 是
9、 Windows 中常见的一种图元文件格式，属于矢量文件格式。它具有文件短小、图案造型化的特点，整个图形常由各个独立的组成部分拼接而成，其图形相对简单。19 第第 1 章章8.CDR 格式 CDR 格式是绘图软件 CorelDraw 的专用图形文件格式，而 CorelDraw 是一款平面排版矢量绘图软件，它可用于企业 VI 设计、宣传画册设计、书籍装帧设计等。20 第第 1 章章9.AI 格式 AI 格式是 Adobe 公司发布的，其优点是占用硬盘空间小，打开速度快，方便格式转换，是矢量软件 Illustrator 的专用图形文件格式。21 第第 1 章章10.EPS 格式 EPS 格式是跨平
10、台的标准格式，扩展名在 PC 平台上是.eps，在苹果机 Macintosh 平台上是.epsf，主要用于矢量图像和光栅图像的存储。EPS 格式采用 PostScript 语言进行描述，并且可以保存其他一些类型信息，如多色调曲线、Alpha 通道、分色、剪辑路径、挂网信息等，因此 EPS 格式常用于印刷或打印输出。Photoshop 中的多个 EPS 格式选项可以实现印刷、打印的综合控制，在某些情况下甚至优于 TIFF 格式。22 第第 1 章章第 2 节 颜色的基本常识 对于图像制作来说，认识色彩是创建完美图像的重要基础。电子商务网页图像作为计算机处理的数字图像，其使用的颜色本身没有什么不同
11、，但它还是有一些特定的记录和处理色彩的技术。因此，需要理解颜色的基本理论，熟悉数字图像处理技术中有关颜色、色彩的术语，并对颜色及其特性有进一步了解。23 第第 1 章章一、颜色及其三要素 颜色具有三要素：明度（Brightness）、色相（Hue）、饱和度（Saturation）。1.明度 B（Brightness）在无色彩中，颜色明度最高的色为白色，明度最低的色为黑色，中间存在一个从亮到暗的灰色系列。明度在三要素中具有较强的独立性，它可以不带任何色相的特征而通过黑白灰的关系单独呈现出来。由于明度表示颜色的相对明暗程度，在 Photoshop 等计算机绘图软件中，通常用从 0（黑）100%（白
12、）的百分比来度量明度。24 第第 1 章章2.色相 H（Hue）色相是指色彩的相貌。如果说明度是色彩的骨骼，色相就很像色彩外表的华美肌肤。色相体现着色彩外向的性格，是色彩的灵魂。在 Photoshop 等计算机绘图软件中，使用 0360 的标准色轮对色相按位置进行度量。通常色相是由颜色名称标识的，如红、绿或橙色。色轮将可见光范围内颜色以圆环方式表示25 第第 1 章章3.饱和度 S（Saturation）饱和度（也叫纯度）指的是颜色的强度或纯度，即彩色成分所占的比例。在Photoshop 等计算机绘图软件中，常用从 0（灰色）100%（完全饱和）的百分比来度量饱和度。如果使用色轮的方式来表示，
13、在标准色轮上饱和度是从中心逐渐向边缘递增的。标准色轮不同色相及其饱和度变化26 第第 1 章章 基于颜色的色相（Hue）、饱和度（Saturation）、明度（Brightness）三要素，在Photoshop等计算机绘图软件中，常用 HSB 模式来描述颜色。使用 HSB 模式描述颜色27 第第 1 章章二、数字图像的色彩模式 除了 HSB 颜色表示模式，计算机图像处理软件通常还使用 RGB、CMYK 及 Lab 等色彩模式，以便在不同应用领域更好地表示颜色。其中 RGB 模式是一种发光屏幕的加色模式；CMYK 模式是一种颜色反光的印刷减色模式；Lab 模式是为了弥补 RGB 和 CMYK 两
14、种色彩模式的不足，由 CIE 组织（国际照明委员会）确定的一个理论上包括了人眼可以看见的所有色彩的色彩模式。28 第第 1 章章1.RGB 模式 绝大部分的可见光可以用红、绿和蓝（RGB）三原色光按不同比例和强度的混合来表示。因为 RGB 三种颜色合到一起产生白色，所以 RGB 模型为加色模式，用于光照、视频和显示器。在 Photoshop 等图像处理软件的 RGB 模式中，可以给彩色图像中每个像素的 RGB 分量分配一个从 0（黑色）到 255（白色）范围的强度值。29 第第 1 章章 RGB 图像使用红、绿、蓝三种颜色，在屏幕上可以重现多达 1670 万种颜色。RGB 图像为三通道图像，每
15、个像素包含 24 位（83）。新建 Photoshop 图像的默认模式为 RGB，计算机显示器总是使用 RGB 模型显示颜色。RGB颜色模式30 第第 1 章章2.CMYK 模式 CMYK 颜色模式以打印在纸张上油墨的光线吸收特性为基础，当白光照射到半透明的油墨上时，部分光线被吸收，部分被反射回眼睛。理论上，纯青色（C）、品红（M）和黄色（Y）色素能够合成吸收所有颜色并产生黑色，因此，CMYK 模型也叫作减色模型。由于所有打印油墨都会包含一些杂质，这三种油墨实际上产生的是一种土灰色，因此必须与黑色（K）油墨混合才能产生真正的黑色。31 第第 1 章章 CMYK 图像为四通道图像，在 Photo
16、shop 等图像处理软件的 CMYK 模式中，每个像素的每种印刷油墨会被分配一个 0%100%的百分比值。最亮（高光）颜色分配较低的百分比值，较暗（暗调）颜色分配较高的百分比值。当所有四种分量的值都是 0%时，就会产生纯白色。CMYK 颜色模式32 第第 1 章章3.Lab 模式 Lab 颜色模式由心理明度分量（L）和两个色度分量组成，这两个色度分量即 a 分量（从绿到红）和 b 分量（从蓝到黄）。Lab 颜色模式与设备无关，不管使用什么设备（如显示器、打印机或扫描仪）创建或输出图像，这种颜色模型产生的颜色都保持一致。在 Photoshop 等图像处理软件中，Lab颜色模式主要用于不同颜色模式
17、之间的转换。33 第第 1 章章三、色彩的心理感觉 色彩心理是客观世界的主观反映，不同的颜色会给浏览者不同的心理感受。不同波长的光作用于人的视觉器官而产生色感时，必然导致人产生某种带有情感的心理活动，而且每种色彩在饱和度、明度上的略微变化也会产生不同的感觉。色彩的心理感觉具有差异性和共同性的特点，差异性体现在色彩感觉与人的年龄、职业、心理相关；共同性体现在色彩的冷暖、轻重、动静等感觉，其决定因素是色彩自身的三要素。色彩的心理感觉34 第第 1 章章1.色彩感觉与年龄 由于年龄变化，导致生理变化和心理变化。据研究统计：婴儿喜爱红色和黄色；49岁的儿童最喜爱红色；9 岁的儿童又喜爱绿色；715 岁
18、的小学生和初中生中，男生的色彩喜好次序是绿、红、青、黄、白、黑，女生的色彩喜好次序是绿、红、白、青、黄、黑。随着年龄的增长，人们的色彩喜好逐渐向复色过渡，向黑色靠近。也就是说，人们越成熟，所喜爱的色彩越倾向成熟。35 第第 1 章章2.色彩感觉与职业 一般来说，体力劳动者喜爱鲜艳的色彩；脑力劳动者喜爱调和的色彩；农牧人员喜爱鲜艳的、成补色关系的色彩；高级知识分子则喜爱复色、淡雅色、黑色等成熟色彩。36 第第 1 章章3.色彩感觉与心理 不同的社会制度、意识形态、生活方式，会产生不同的社会审美意识和审美感受。由不同地区、不同民族、不同文化传统、不同审美而在某个较长的时期内保持着相对稳定的颜色，就
19、形成了社会的常用色。而当一些色彩被赋予时代精神的象征意义，又符合人们的认识、理想、兴趣、爱好、欲望时，就会形成社会流行色。相对常用色而言的，流行色是一种与时俱变的颜色，其特点是流行最快、周期最短。常用色有时会上升为流行色，流行色经人们使用后也会成为常用色。流行色也具有一般规律：长期流行红蓝色调后，人们会向往绿橙色调；长期流行淡雅色调后，人们会向往中深色调；长期流行鲜明色调后，人们会向往沉着色调；长期流行暖色调后，人们会向往冷色调。37 第第 1 章章4.色彩的冷暖感觉 色彩的冷暖感觉是人们在长期生活实践中由于联想而形成的。红、橙、黄等色常使人联想起东方的旭日和燃烧的火焰，因此有温暖的感觉，所以
20、称为“暖色”；蓝色常使人联想起大海、蓝天、阴影处的冰雪，因此有寒冷的感觉，所以称为“冷色”；绿、紫等色给人的感觉是不冷不暖，故称为“中性色”。暖色让人感觉热烈、扩展、前进、亲和、积极，冷色让人感觉冷静、收缩、后退、冷漠、消极。暖色调和冷色调38 第第 1 章章5.色彩的轻重感觉 色彩在心理上的重量感受主要取决于色彩的明度，明度高色彩感觉轻，明度低色彩感觉重。明度相同时，饱和度高色彩感觉轻，饱和度低色彩感觉重。色彩的轻重感觉39 第第 1 章章6.色彩的动静感觉 色彩的动静感也来源于人们的联想，它与画面色调气氛和意境有着密切的关系。总体而言，暖色的运动感强，冷色的静止感强；明度高的运动感强，明度
21、低的静止感强；饱和度高的运动感强，饱和度低的静止感强；颜色对比强的运动感强，颜色对比弱的静止感强。色彩的动静感觉40 第第 1 章章第 3 节 平面构图的基本常识 优秀的图像构图和版面设计，可以更好地传达信息，或者加强信息传达的效果，增强可读性，使要传达的内容更加醒目、美观。因此，对平面构图和版面设计的良好把控，将有助于提高图像设计和制作的水准。41 第第 1 章章一、平面构成的含义 平面构成是视觉元素在二次元的平面上，按照美的视觉效果、力学的原理，进行编排和组合，以理性和逻辑推理来创造形象，研究形象与形象之间的排列方法，是理性与感性相结合的产物。形象在构成设计中是表达一定含义的形态构成的视觉
22、元素，在平面构成中，点、线、面是造型元素中最基本的形象和要素。42 第第 1 章章1.点 一个标记点在几何学中是不具有大小只具有位置的，但在平面构成中是有大小、形状、位置和面积的。点一般被认为是最小的并且是圆形的，但实际上点的形式可以是多种多样的，有圆形、方形、三角形、梯形、不规则形等。自然界中的任何形态缩小到一定程度都能产生不同形态的点。由此可以联想到一个物体在周围不同的环境条件下就会产生不同的感觉，越小的形体越能给人以点的感觉。43 第第 1 章章 单个的点在画面中的位置不同，产生的心理感受也不同。居中时会有平静、集中感；偏上时会有不稳定感，形成自上而下的视觉流程；位置偏下时会有安定的感觉
23、，但容易被人们忽略；位于画面三分之二偏上的位置时，最易吸引人们的观察力和注意力。点在画面不同位置产生不同的心理感觉44 第第 1 章章 当画面中有两个大小不同的点时，大的点首先引起人们的注意，但视线会逐渐从大的点移向小的点，最后集中到小的点上。点大到一定程度会具有面的性质，点越大越空乏，越小积聚力越强。两个点的位置45 第第 1 章章点的构成方法46 第第 1 章章2.线 线是点移动的轨迹。线游离于点和形之间，具有位置、长度、宽度、方向、形状和性格等属性。线有很强的心理暗示作用，不同的线还有不同的感情和性格。线可用于表现动与静，直线表现静，曲线表现动，曲折线则有不安定的感觉。47 第第 1 章
24、章 直线具有男性的特点，有力度、稳定；水平线平和、寂静，使人联想起风平浪静的水面、远方的地平线；垂直线则使人联想到树、电线杆、建筑物的柱子，有一种崇高的感受；斜线则有一种速度感。直线还有粗细之分，粗直线有一种厚重、粗笨的感觉，细直线有一种尖锐、精细的感觉。曲线富有女性化的特征，具有丰满、柔软、优雅、浑然之感。几何曲线是用圆规或其他工具绘制的，具有对称和秩序的美、规整的美；自由曲线是徒手画的一种自然的延伸，自由而富有弹性。48 第第 1 章章线的构成方法 线的构成方法包括等距的密集排列面化的线；按不同距离排列，具有透视空间视觉效果疏密变化的线；粗细变化的线具有虚实空间的视觉效果；将原来较为规范的
25、线条排列做一些切换变化，成错觉化的线；立体化的线；不规则的线等。49 第第 1 章章面的构成方法3.面 面是线移动的轨迹。在平面构成中，面是具有长度、宽度和形状的实体，点的密集或者扩大，线的聚集和闭合都会形成面。面是构成各种可视形态的基础。面的形态是多种多样的，不同形态的面在视觉上有不同的作用和特征。直线形的面具有直线所表现的心理特征，如安定、秩序感、直板、僵硬的特征；曲线形的面具有柔软、轻松、饱满的特征；偶然形的面（如水和油墨混合泼洒产生的偶然形等）比较自然生动，有人情味。50 第第 1 章章面的应用 面的可塑性较强，善于表现不同的情感。通常，由什么类型的线组成的面，就具有该种线的特征。面在标志设计、摄影、广告招贴设计、服装设计、环境艺术设计和包装设计中应用广泛。51 第第 1 章章二、版面设计基本知识1.版面设计的基本原则 （1）思想性与艺术性结合 （2）整体协调与主体突出结合52 第第 1 章章2.版面设计的一般形式法则 （1）重复与交错 （2）节奏与韵律 （3）对称与均衡 （4）对比与调和 （5）比例与适度 （6）变异与秩序 （7）虚实与留白 （8）变化与统一节奏与韵律对比与调和53 第第 1 章章变异与秩序虚实与留白变化与统一54 第第 1 章章谢谢观赏！电子商务网页图像制作（Adobe Photoshop CS6）（第二版）
