1.1　了解淘宝美工

淘宝美工是淘宝店铺页面美化工作者的统称。淘宝美工和传统美工既有共同的特征，也有一定的区别。要弄清楚二者之间的相同和不同，首先需要对淘宝美工有一个系统的认识。

1.1.1　什么是淘宝美工

美工一般是指对平面、色彩、构图和创意等进行设计处理的职位，如平面美工、网页美工等。淘宝美工是随淘宝网站的发展而产生的一种新职业，其主要工作是对网站页面进行设计、美化，制作网店促销海报，把物品照片制作成宝贝描述中需要的图片，以及设计电子宣传单等。淘宝美工的主要任务在于给消费者带来好的视觉体验，同时达到引导销售和提高成交率的目的。如图1-1所示，左侧为经过设计的淘宝店铺首页，右侧为淘宝默认的店铺首页。

图　1-1

1.1.2　淘宝美工应该掌握的基础知识

由于淘宝店铺首页和宝贝页面的模块都有自己固定的格式和规格，稍有偏差就可能引起页面版式错位，从而造成后期大量修改。因此，在对淘宝店铺各个模块设计前，还需要掌握以下基础知识。

1.图像像素和分辨率

像素即px，它是构成位图的基本单位，也是屏幕中最小的点。一张位图是由水平及垂直方向上的若干个像素组成的，放大后会发现一个个有色彩的小方块（常规是正方形，还有其他形状）。图像中包含的像素越多，图像的信息量就越大，文件也越大，图像的质量也就越好。图1-2所示为将一张图片放大后看到的像素点。

分辨率是用于描述图像文件信息的术语，分辨率常分为图像分辨率和屏幕分辨率。

图　1-2

图像分辨率：图像分辨率是指每英寸图像内的像素点数，它决定了位图图像细节的精细程度，其单位为像素/英寸（dpi）。分辨率越低，像素点变大，图片质量越低。分辨率越高，像素点变小，图片也越清晰逼真。

屏幕分辨率：屏幕分辨率是显示器屏幕每行的像素点数×每列的像素点数，即宽度（px）×高度（px）。屏幕分辨率越高，所呈现的色彩越多，清晰度也越高，所占存储空间就越大。

2.图像大小

图像大小常会被理解为图片尺寸或图片所占的空间大小。实际上，图片尺寸和图片大小是不一样的。

图片尺寸：图片尺寸的单位为像素（px），也可以用厘米、毫米和英寸等表示。当图片尺寸用像素表示的时候，与分辨率在概念上会有重合。

图片大小：图片的大小是指图片文件所在的存储空间的多少，单位是bit（字节）、KB（千字节）和MB（兆字节）。

3.位图与矢量图

位图也称为点阵图，是由称作像素的单个点组成的，这些点可以进行不同的排列和染色以构成图样。位图与图像的像素和分辨率都有关系，位图放大后，其图像会显示为像素块。

矢量图也叫向量图，是一种基于图形的几何特征来描述的图像，矢量文件中的图形元素称为对象。矢量图中的每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。矢量图与分辨率无关，可以将其设置为任意大小，清晰度不会改变，也不会出现锯齿现象，放大后同样显示为清晰的边缘，如图1-3所示。

图　1-3

4.文件格式

图片的文件格式有多种，而常用于淘宝店铺页面设计的图片格式有JPEG、PNG、GIF等，如图1-4所示。

下面简单介绍这几种常见的图像格式。

PEG格式：JPEG格式即JPG格式，是最常用的一种图像格式，它在获取极高压缩率的同时能展现十分丰富的图像，具有调节图像质量的功能，允许用不同的压缩比例对文件进行压缩，支持多种压缩级别。因此，大多数有丰富细节和色彩的图片都会采用JPEG的文件格式，它也是最适合应用于互联网的文件格式。

图　1-4

PNG格式：PNG格式是一种无损压缩的图像格式，使用这种图像格式能够保证图像质量，同时也可以减小体积。PNG格式同JPGE等格式不同，它可以支持透明效果，可以为原图像定义256个透明层次，使彩色图像的边缘能与任何背景平滑地融合，从而彻底消除锯齿边缘。Photoshop中可以存储为PNG-8（即显示28种颜色）和PNG-24（即显示224种颜色）。

GIF格式：GIF的文件格式一般用于存储动态图片，它分为静态GIF和动画GIF。GIF格式是一种压缩位图格式，它同样支持透明背景图像，适用于多种操作系统，网上的很多表情包的动画都是GIF格式的。但是GIF有个极大的缺点，就是它只能显示256色。

当然，除了淘宝网店常用的几种图片格式外，美工还需要了解一些其他常见的文件格式，如PSD、RAW、TIF等格式。

PSD/PDD格式：PSD格式和PDD格式都是Photoshop CC自身的专用文件格式，支持从线图到CMYK的所有图像类型，但通用性不强。PSD格式和PDD格式能保存图像数据的细小部分，如图层、通道等Photoshop CC对图形进行的其他处理信息。这两种文件格式因为包含的细节太多，因此存储的容量大，占用的磁盘空间较多。

RAW格式：RAW格式是一种常用于数码单反相机的保存格式，该文件格式基本上是一个没有经过任何图像处理的源文件，它能原原本本地记录相机拍摄到的信息，没有因为图像处理（如锐化、增加色彩对比）和压缩而造成的信息丢失，但需要用特别的软件来打开这些文件，如ACDSee、Photoshop、Lightroom等。需要注意的是不同的相机厂商对于RAW文件拓展名是不同的。

TIF/TIFF格式：TIF/TIFF格式被广泛用于对图像质量要求较高的图像的存储和转换，该格式支持256色、24位真彩色、32位色、48位色等多种色彩位，同时支持RGB、CMYK等多种色彩模式。在Photoshop中编辑的TIF格式可以存储路径和图层。

Tips

在Photoshop中制作的设计图，建议在保存的时候先保存为PSD格式的文件，以便下次修改。对于一些需要用到的图片，可以另存为其他的格式。

5.色彩模式

常用的颜色模式为RGB模式，另外还有CMYK模式、HSB颜色模式、Lab颜色模式、位图模式、灰度模式、索引颜色模式、双色调模式和多通道模式等色彩模式。

下面对常用的RGB模式和CMYK模式进行简单介绍。

图　1-5

RGB模式：RGB颜色模式是工业界的一种颜色标准，通过对红（R）、绿（G）、蓝（B）3个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色，RGB即代表红、绿、蓝3个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最为广泛的颜色系统之一，也是最适于在屏幕上观看的颜色模式，如图1-5所示。

CMYK模式：CMYK模式是最佳的打印模式。CMYK代表印刷上使用的4种颜色，C代表青色（Cyan），M代表洋红色（Magenta），Y代表黄色（Yellow），K代表黑色（Black）。在实际应用中，青色、洋红色和黄色很难叠加成真正的黑色，因此引入了K——黑色。黑色的作用是强化暗调，加深暗部色彩，如图1-6所示。

图　1-6

Tips

在屏幕上显示的图像一般都用RGB模式来表现；在印刷品上显示的图像一般则是用CMYK模式表现，如书籍、报刊、宣传画等，都采用的是CMYK模式。

1.1.3　淘宝美工需要掌握的设计原则

淘宝美工在淘宝店铺的视觉设计上除了要符合大众审美外，还应该添加一些独特的视觉效果设计。例如，为店铺设置与众不同的搭配色彩，为商品设计不同的结构版式等，这些都是吸引消费者的重要因素，可以迅速拉近卖家和买家的距离。

1.把握店铺的整体风格

店铺的风格决定了消费者最直观的消费体验，店铺定位与店铺经营的商品决定了消费群体，所以把握店铺的风格及定位是美工设计的重中之重。

一些优秀的淘宝店铺在店铺设计上会要求风格统一，且会根据品牌和商品的特点来设计主题风格与版面。如图1-7所示，该店铺首页和详情页的设计风格都偏简洁、清新和日系。

图　1-7

2.遵循设计审美的原则

设计店铺页面并不是随心所欲地在界面中添加图片或元素，要想店铺页面更整洁美观，必须遵循一定的设计原则。

特色鲜明：设计页面时，在和谐、均衡和突出重点的原则上，可以使用不同的色彩来组合搭配，体现店铺的特色和理念。

搭配合理：无论色彩搭配还是图文搭配，都应该以消费者的良好视觉感受为前提。

艺术创意：要想给消费者留下更深刻的印象，设计页面时，在考虑店铺本身特点的基础上，可以大胆创新，让店铺更有特色，使店铺在同类店铺中脱颖而出，如图1-8所示。

图　1-8