下载掌阅APP，畅读海量书库
立即打开
淘宝美工是随着淘宝的发展而产生的，它和传统的美工有着很大的区别。
美工一般是指对平面、色彩、构图和创意等进行处理的职业，传统的美工指平面美工和网页美工等。而淘宝美工是随着淘宝发展而新生的职业，主要的工作是对淘宝网店商品、页面和广告进行美化，在给消费者更好的视觉体验的同时，达到引导销售和提高销售额的目的。
作为淘宝美工，必须掌握淘宝装修的相关知识。
图像分辨率是指图像中存储的信息量，是每英寸图像内有多少个像素点，分辨率决定了位图图像细节的精细程度。通常情况下，图像的分辨率越高，成像尺寸越大，图像就越清晰，如图1-1所示。图像分辨率的表达方式为“水平像素数×垂直像素数”，分辨率的单位为像素（px）。
图1-1 不同分辨率的图像拍摄效果对比
图像的格式有很多种，常用的有JPEG、PNG和GIF等。下面在Photoshop中分别介绍这几种图像格式。
在Photoshop中制作完图片后，执行“文件”|“存储为”命令，如图1-2所示。打开对话框，在保存类型下包含了多种图像格式，如图1-3所示。
图1-2 执行“文件”|“存储为”命令
图1-3 保存类型
提示
建议在存储图片前先将图片存储为PSD格式，以便下次修改，然后对于需要用到的图片，另存为其他图片格式。
上面这种方法可以存储多种格式的图片。对于淘宝美工而言，还需要了解一种更加重要的存储方法，即存储为Web所用格式。这种方法能根据网页使用目的对不同区域图像做特别优化。
执行“文件”|“存储为Web所用格式”命令，如图1-4所示。弹出对话框，在右侧的“优化的文件格式”下包含了5种格式，如图1-5所示。
图1-4 执行“文件”|“存储为Web所用格式”命令
图1-5 优化的文件格式
下面分别对GIF、JPEG和PNG格式进行介绍，第5种格式WBMP在淘宝装修中用得很少，因此这里不做讲解。
GIF格式： 一般用于存储动态图片，且GIF格式支持透明度及交错显示，如图1-6所示。所谓交错显示，是指图像在加载的过程中，可以展示图像的大致轮廓，然后随着加载的继续，逐渐清晰显示图像的细节，直至加载完成后完全显示图像。但GIF格式有个极大的缺点，它最多只支持256色，如图1-7所示。
图1-6 透明度与交错
图1-7 支持颜色
JPEG格式： JPEG是最常用的图像格式，它在获取极高的压缩率的同时能展示十分丰富、生动的图像，大多数有丰富的细节和色彩的图片都会使用JPEG格式，JPEG格式不支持透明度。在“存储为Web所用格式”对话框中可以设置JPEG格式品质的高低与参数，如图1-8所示。品质越低，压缩越严重。
PNG-8/PNG-24格式： PNG是一种无损压缩的图像格式，在保证图像质量的同时还可以减小体积。PNG格式汲取了GIF和JPEG二者的优点，它既支持透明度，又可以支持较多的颜色，如图1-9所示。PNG-8可以显示28种颜色，PNG-24可以显示224种颜色。
图1-8 JPEG品质
图1-9 PNG格式
淘宝美工必须掌握一些设计类的软件。
图像编辑软件： 拍摄商品时，会因为各种原因导致照片不够美观，不能很好地体现产品优点。因此，拍摄完成后还需要进行一定的编辑，图像编辑软件比较多，常用的有美图秀秀和Photoshop，专业的人员可以选择Photoshop，而新手则可以选择美图秀秀，它相比Photoshop而言，操作更简单。
网页编辑软件： 网店的动态页面装修会使用到网页编辑软件，常用的网页编辑软件为Dreamweaver。
视频编辑软件： 淘宝店铺支持主图视频、首页和详情页添加视频。以影音动态呈现宝贝，可以有效地在短时间内提升买家对商品的认知和了解程度。视频的制作与编辑则会用到视频编辑软件，常用的为会声会影，它简单易学，且功能强大，在后面章节中会进行具体的介绍。
淘宝店铺主要是由店铺首页、店铺列表页和店铺详情页等多个页面组成的。
店铺首页： 店铺首页就是打开域名的第一页，是整个店铺索引和展示宝贝的地方。首页的基本框架包括页头、左侧栏、促销区、推荐宝贝和页尾等几个板块，如图1-10所示。在装修时，可以根据需要来调整框架。
图1-10 店铺首页的板块
列表页： 列表页就是单击某一类别宝贝而打开的展示店铺此类目宝贝的页面，如图1-11所示。每一个类目打开的列表页下的宝贝不同，这也是我们需要明确分类的原因。
图1-11 某店铺列表页
详情页： 详情页就是单击某一宝贝而打开的展示此宝贝所有相关信息的页面，图1-12所示为“茵曼”某宝贝的详情页。每个宝贝的详情页都不同。
图1-12 某宝贝详情页
淘宝美工在开始对店铺进行装修设计前，需要先了解整个工作流程。
风格规划： 根据店铺品牌特色、风格或活动主题进行装修规划是第一步，如端午节和周年庆等不同的主题所策划的方向会不同。
素材准备： 规划后就是素材的准备，包括广告图、产品图、视频及其他相关素材。
图片\视频美化处理： 使用图片处理软件对产品图进行美化处理；制作广告图、首页或详情图；使用会声会影对视频进行剪辑输出等。
切片并生成代码： 使用Photoshop对制作的效果图进行切片，优化后存储为图片和代码。
上传图片到空间： 将存储的图片上传到淘宝图片空间。
添加热点或链接： 使用Dreamweaver打开图片或代码，为图片添加热点或为代码修改链接等。
装修到店铺： 将代码装修到店铺中。
色彩搭配是树立网店形象的关键，一个网店的颜色主要包括主色、辅助色与点缀色，通过这些颜色的合理搭配，给人一种和谐、愉快的感觉。
主色： 占用面积最大，最受瞩目的色彩一般就是主色，主色决定的是整个店铺的风格走向，其配色要比辅助色更清楚、更强烈。
辅助色： 辅助色是指辅助或者补充主体色的色彩，在整体画面中起到平衡主色的冲击效果和减轻主色对观看者产生的视觉疲劳度的作用，有一定的视觉分散效果。辅助色还可以起到渲染的作用，帮助主色建立完整的形象，使页面丰富多彩。辅助色可以是一种颜色，也可以是几种颜色，但要注意保持与基本色的协调关系，例如，使用黑暗色调主体色的时候，最好运用明亮的色彩作为辅助色。
点缀色： 点缀色是指在色彩组合中占据面积较小，但视觉效果比较醒目的颜色，作用如我们搭配服饰时常用来做修饰点缀的丝巾和胸针等。点缀色是相对主色而言的，一般情况下，它比较鲜艳、饱和，有画龙点睛的作用。主色调和点缀色形成对比，主次分明，富有变化。