1.2 美工掌握基本知识

1.2.1 分辨率、像素和尺寸

1. 分辨率

分辨率有两种：屏幕分辨率和图像分辨率。

屏幕分辨率：指显示器所能显示的像素有多少。显示的像素越多，画面就越精细，信息也越多。例如，将计算机显示器的分辨率设置成1280像素×1024像素，说明计算机屏幕在水平方向上有1280个像素点，在垂直方向上有1024个像素点，如图1-3所示。

图像分辨率：指图像中存储的信息量，是每英寸图像内有多少个像素点。分辨率的单位为PPI（Pixels Per Inch），即叫作像素每英寸。

在设计的过程中，图像分辨率一般设置为72PPI就可以了，色彩模式为RGB。如果做的海报需要输出印刷，那么分辨率就要设置为300PPI，色彩模式为CMYK。

2. 像素

图像由一个个点组成，这个点称为像素。像素是图像中最小的单位。每个像素是一个小点，不同颜色的点（像素）聚集起来就变成一幅动人的画面。

在Photoshop软件中打开一张图片，将图片放大300倍，就可以发现，它是由很多小方格色块排列组成的，这就是一个像素，如图1-4所示。

两张图片尺寸相等的情况下，像素越高，说明其精细度越高，反之则越低。

3. 尺寸

图像尺寸的长度和宽度经常以毫米或厘米为单位，也可以像素为单位。

在做印刷设计的时候，在Photoshop软件中新建文件时，可以选择以毫米或厘米为尺寸单位。在美工设计中，长度和宽度尺寸经常以像素为单位，如图1-5所示。

在美工设计中，宝贝主图尺寸大小是800像素×800像素，详情页宽度是750像素，全屏海报宽度是1920像素不等。

1.2.2 位图和矢量图

1. 位图图像

位图又称点阵图或像素图，是由屏幕上的发光点（即像素）构成的，点或像素是最小单位，这些多个像素的色彩组合就形成了一张图像，称为位图。位图图像和分辨率像素有关，在图像放大时，可以很清楚地看到每个像素的组成内容，如图1-6所示。

位图图像的主要优点是表现力强、细腻、层次多、细节多，可以很容易模拟出像照片一样的真实效果。它的缺点是在传播的过程中会造成失真、图像模糊等。

2. 矢量图

矢量图是使用直线和曲线工具描述的图形，这些图形的元素是一些点、线、矩形、多边形、圆和弧线等。矢量图的特点是放大后图像不会失真，与分辨率无关，适用于图形设计、文字设计和一些标志设计、版式设计等，如图1-7所示。

可用Illustrator、CorelDRAW等常用软件绘制矢量图。

位图由像素组成，而矢量图由矢量线组成。位图可以表现的色彩比较多，而矢量图可以表现的色彩则相对较少。矢量图可以无限放大，而不会失真。

1.2.3 常用图片文件格式

图片格式是计算机存储图片的格式，常见的存储格式有JPG、PNG、GIF、PSD、AI等。

每一款工具软件都会支持输出不同的图片格式选项，以满足用户的工作需求。在Photoshop软件中，执行“文件>存储为”菜单命令，弹出选项面板，能保存为二十多种图片格式，如图1-8所示。

经常在网上使用QQ软件聊天，也会发现，使用截图功能，选择保存，保存类型选项也提供了3种图片格式供用户选择。那么，为什么会有这么多图片格式呢？它们之间有什么区别？在做美工设计的时候，选择哪一种合适的图片格式才是正确的呢？

1. JPEG格式

JPEG/JPG格式是最常见的一种图像格式，它是由联合照片专家组（Joint Photographic Experts Group）命名的，其文件扩展名为“.jpg”或“.jpeg”，它是一种有损压缩格式。

但是JPEG压缩技术十分先进，它用有损压缩方式去除冗余的图像数据，在获得极高的压缩率的同时能展现十分丰富生动的图像。换句话说，就是可以用最少的存储空间得到最好的图像品质，如图1-9所示。

JPEG格式是目前网络上最流行的图像格式，互联网上80%的图片都是用的此格式，它的特点是文件尺寸较小，下载速度快。在Photoshop软件中以JPEG格式存储时，提供13级压缩级别，用0~12级表示。0级别表示压缩最高，如图1-10所示。

整体来说，JPEG格式的优点是可以将图像或素材进行高倍数压缩，利用可变的压缩比自由控制文件大小，满足在网络上的传播。缺点自然和优点是对立的，有压缩就会对图像进行取舍，会使原始图片质量下降。

2. PNG-8/PNG-24格式

PNG（Portable Network Graphics，便携式网络图形）是网上接受的最新图像文件格式。其设计目的是试图替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。PNG格式也汲取了GIF和JPG格式二者的优点，而且PNG是一种无损压缩的图像格式，在保证图像质量的情况下，文件体积也是可以接受的。存储灰度图像时，灰度图像的深度可多达16位；存储彩色图像时，彩色图像的深度可多达48位，并且还可存储Alpha通道，在存储选项中，可以对压缩和交错进行更换模式，如图1-11所示。

PNG格式的图像在浏览器上采用流式浏览，图像会在完全下载之前提供给浏览者一个基本的图像内容，然后再逐渐清晰起来。

PNG格式不但可以获得较高的压缩比，而且不损失数据。更重要的是，PNG格式还支持透明格式。在设计中，经常会存储一些图形来丰富自己的素材库，很多小的图标和标示都会直接存储为PNG的透明格式，以备今后重复使用，可以极大地提高工作效率，非常方便。

3. GIF格式

GIF（Graphics Interchange Format）是图形交换格式，GIF文件的数据是一种基于LZW算法的连续色调的无损压缩格式，其压缩率一般在50%左右，几乎所有相关软件都支持它，公共领域有大量的软件在使用GIF图像文件。它的最大特点是在一个GIF文件中可以存储多幅彩色图像，多幅图像数据逐幅读出并显示到屏幕上，就可构成一种最简单的动画。网络上的“动图”“闪图”“GIF动画图”都是指的此格式。

GIF格式还支持透明背景图像，透明背景图像也是网络上常见的图片格式，体积小，在做宝贝详情描述页时，所输出的图片大多数会选择GIF格式。在Photoshop软件中，执行“文件>存储为Web所用格式”菜单命令，选项面板会提供相应的优化参考和效果预览等，如图1-12所示。

4. PSD格式

PSD格式是Photoshop软件的专用文件格式，是一种非压缩的原始文件保存格式，也是经常所说的设计“源文件”格式。

PSD格式存储了设计操作过程中所有的信息内容，如图层、文字、形状、通道、蒙板及滤镜特效信息等，如图1-13所示。PSD文件有时容量会很大，图层过多，动辄数百兆字节。由于PSD格式可以保留所有原始信息，在设计过程中，对于尚未制作完成的图像，应选用 PSD格式进行保存。

值得注意的是，Photoshop软件在存储PSD源文件格式时，不论用Photoshop哪个版本的软件程序都可以打开进行编辑，高版本和低版本兼容性效果好。

5. AI格式

AI是Adobe公司Illustrator软件存储的源文件格式，它是专用的矢量图形文件格式。它的优点是占用空间小、打开速度快、方便格式转换等。

AI格式与PSD格式相同，AI也是一种分层文件，每个对象都是独立的，它们具有各自的属性，如大小、形状、轮廓、颜色、位置等，存储了设计过程中所有的对象内容。

在设计的过程中，如产品的包装、产品Logo标示等信息，大多数都是用Illustrator软件制作的。美工设计用到的Illustrator的功能没有平面设计用到的多，但是，最好还是要掌握Illustrator基本的操作，对日后工作也是很有帮助。

在Photoshop软件中，可以直接打开AI格式的文件，将其作为一个图层导入进来。

1.2.4 色彩的基本知识

大千世界，五彩缤纷，春夏秋冬的更替，每个人都能感受到春的花花绿绿，夏的绚丽多姿，秋的琳琅满目，冬的异彩纷呈。当想到天空时，脑海里呈现出的是深邃的蓝色和漂浮的白云；当想到大海时，脑海里呈现出的是水天相接的一望无际蔚蓝色的大海；当想到沙漠时，脑海里呈现出的是浩瀚无垠的黄色。大自然赋予我们的一切，都是通过色彩进行传播的。

对于一个设计人员来说，要设计出好的作品，必须掌握这些色彩的知识，同时也要学会借鉴大自然的色彩，如图1-14所示。

1. 三原色

从小老师就会告诉我们，世界那么大，人眼所能看到的颜色都是由3种颜色混合组成的，它们是三原色，分别是红、绿、蓝。那么具体什么是三原色呢？它们又为何如此神奇呢？

色彩中不能再分解的基本色称为原色，原色可以合成其他的颜色，而其他颜色却不能还原出本来的色彩。通常说的三原色，即红（R）、绿（G）、蓝（B）。原色的纯度高，最干净，最明快，三原色可以混合出其他所有的颜色，如图1-15所示。

2. 色彩的分类

丰富多样的颜色可以分为有彩色系和无彩色系两大类，如图1-16所示。

有彩色：指红、橙、黄、绿、青、蓝、紫等颜色。不同明度和纯度的红、橙、黄、绿、青、蓝、紫色调都属于有彩色系。有彩色系的颜色具有3个基本特性：色相、纯度（也称彩度、饱和度）、明度。在色彩学上也称为色彩的三大要素或色彩的三属性。

无彩色系：指白色、黑色和由白色、黑色调和形成的各种深浅不同的灰色。

3. 色彩三要素

（1）色相

色相即各类色彩的相貌称谓，如大红、普蓝、柠檬黄等。色相是色彩的首要特征，是区别于各种不同色彩的最准确的标准。最初的基本色相为红、橙、黄、绿、蓝、紫。在各色中间加插一两个中间色，其头尾色相，按光谱顺序为红、红橙、橙、黄橙、黄、黄绿、绿、蓝绿、蓝、蓝紫、紫、红紫，可制出十二色相环，如图1-17所示。

（2）饱和度（纯度、彩度）

饱和度是指色彩的鲜艳程度，也称色彩的纯度。饱和度取决于该色中含色成分和消色成分（灰色）的比例。含色成分越大，饱和度越高；消色成分越大，饱和度越低，如图1-18所示。纯的颜色都是高度饱和的，如鲜红、鲜绿等。混杂上白色、灰色或其他色调的颜色时，就是不饱和的颜色，如绛紫、粉红、黄褐等。完全不饱和的颜色根本没有色调，如黑白之间的各种灰色。

（3）明度

明度是眼睛对光源和物体表面的明暗程度的感觉，主要是由光线强弱决定的一种视觉体验。颜色有深浅、明暗的变化。明度不仅取决于物体照明程度，而且取决于物体表面的反射系数。如果我们看到的光线来源于光源，那么明度取决于光源的强度，如图1-19所示。如果我们看到的是来源于物体表面反射的光线，那么明度取决于照明的光源的强度和物体表面的反射系数。

深黄、中黄、淡黄、柠檬黄等黄色在明度上就不一样，紫红、深红、玫瑰红、大红、朱红、橘红等红色在亮度上也不尽相同。这些颜色在明暗、深浅上的不同变化，就是色彩的又一重要特征——明度变化。

4. 色彩模式

色彩模式是数字世界中表示颜色的一种算法。在数字世界中，为了表示各种颜色，通常将颜色划分为若干分量。由于成色原理的不同，决定了计算机显示器、手机屏幕、投影机等是由色光直接合成颜色的。打印机、印刷机等使用颜料的印刷设备生成颜色，所以，色彩模式之间是有区别的。图1-20所示为Photoshop中提供的多种色彩模式。

（1）RGB模式

RGB模式适用于显示器、投影机、扫描仪、数码相机等，也被称为加色模式。RGB色彩就是常说的三原色，R代表Red（红色），G代表Green（绿色），B代表Blue（蓝色）。

（2）CMYK模式

CMYK模式是当阳光照射到一个物体上时，这个物体将吸收一部分光线，并将剩下的光线进行反射，反射的光线就是我们所看见的物体颜色。这是一种减色色彩模式，适用于打印机、印刷机等。

CMYK代表印刷上用的4种颜色，C代表青色（Cyan），M代表洋红色（Magenta），Y代表黄色（Yellow），K代表黑色（Black）。因为在实际应用中，青色、洋红色和黄色很难叠加形成真正的黑色，最多不过是褐色，因此，才引入了K——黑色。黑色的作用是强化暗调，加深暗部色彩。

值得注意的是，在用Photoshop软件设计一个名片或者海报时，做图的时候色彩模式选择的是RGB，提交给印刷厂时，可以在软件中将图像模式转换为CMYK模式，如图1-21所示。

（3）Lab模式

Lab模式由3个通道组成，但不是RGB通道。它的一个通道是明度，即L。另外两个是色彩通道，用a和b来表示，如图1-22所示。Lab模式弥补了RGB和CMYK这两种色彩模式的不足。

RGB是一种屏幕加色模式，CMYK是一种颜色反光的印刷减色模式。而Lab模式既不依赖光线，也不依赖颜料，它是CIE组织确定的一个理论上包括了人眼可以看见的所有色彩的色彩模式。

可以放心大胆地在图像编辑中使用Lab模式，因为它所定义的色彩最多，并且和光线、设备无关，处理速度快。Lab模式在转换成CMYK模式时，色彩不会丢失或被替换。

5. 色彩的性格

为什么大多数购物类网站的页面用的都是黄色、红色？工业类网站的页面则常用蓝色？在生活当中，往往也能根据店铺的装修风格，判断出是从事什么行业的。这都是为什么呢？

颜色与人的大脑有着某种联系，不同颜色对人的身体情绪、思想和行为有着深刻影响。由于人们的生活经验、传统习惯、年龄和性格等不同，对色彩可产生的心理反应也自然不同。其实“色彩是感情的语言”，根据不同色彩可以诱发不同情感。

红色的热情振奋，蓝色的健康活泼，白色的纯洁坦率，黄色的高贵庄重，紫色的高贵脱俗，黑色的神秘恐怖等。所以，在进行创作的时候，选择合适产品的颜色属性是很有必要的。

红——活力、健康、热情、希望、太阳、火、血。

橙——兴奋、喜悦、活泼、华美、温和、欢喜、灯火、秋色。

黄——温和、光明、快活、希望、金光。

绿——青春、和平、朝气。

青——希望、坚强、庄重。

蓝——秀白、清新、宁静、平静、永恒、理智、深远、海洋、天空、水。

紫——高贵、典型、华丽、优雅、神秘、丁香、玫瑰。

褐——严肃、浑厚、温暖。

白——纯洁、神圣、清爽、洁净、卫生、光明、雪、云。

灰——平静、稳重、朴素。

黑——神秘、静寂、悲哀、严肃、刚健、恐怖、稳重、夜。

金——光荣、华贵、辉煌。