作者：闫寒 徐文瑞
出版社：人民邮电出版社有限公司
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
网店美工视觉设计实战教程(全彩微课版)试读：
前言
随着网上购物的不断流行，网上店铺开始蓬勃发展，卖家要想在淘宝市场中争得一席之地，网上店铺的页面设计就显得至关重要。因此，市场上对网店美工的需求越来越大，同时对其技术要求也越来越高。优秀的网店美工不仅可以为买家带来舒适的视觉感受，更能将良好的营销思维应用到商品之中，通过独特的利益诉求点来打动买家，促使他们进行消费。
本书主要内容包括网店美工基础、网店图片处理、店铺装修、无线终端应用4篇共计9章内容。各篇的具体内容分别如下。
第1篇（网店美工基础）：包含第1章的内容，主要介绍网店美工的工作范畴、网店美工的技能要求、网店美工必备的视觉营销知识等。通过学习，读者可明确网店美工的职责，了解视觉营销设计的相关知识等，从而为后面进行店铺元素设计、首页设计与详情页设计打下基础。
第2篇（网店图片处理）：包含第2章和第3章的内容，主要介绍商品图片的调色和修饰。其具体内容包括处理曝光不足或曝光过度的图片、图片调色、修饰商品图片、丰富商品图片内容、添加图片特效等。通过学习，读者能够调整商品图片的色彩，以及使用形状、文本等元素装饰与说明图片。
第3篇（店铺装修）：包含第4章~第7章的内容，主要介绍店铺首页的核心模块设计和详情页视觉设计，以及页面装修、视觉营销推广图的制作。通过学习，读者可以在了解店铺相关页面的包含要素、设计要点等知识的基础上，快速学会网上店铺页面的装修。
第4篇（无线终端应用）：包含第8章和第9章的内容，主要介绍无线终端首页设计基础、无线终端首页关键模块的视觉设计、无线终端店铺装修、无线终端详情页设计基础与装修等。通过学习，读者可以快速完成无线终端店铺的设计与装修。本书主要有以下特点。（一）内容丰富，结构合理
本书从网店美工岗位的认知入手，一步步地介绍了网店美工所涉及的知识，由浅入深，层层深入。同时，本书内容基本按照“设计知识+Photoshop操作知识”的结构进行编写，理论联系实际，便于读者快速掌握网店美工技巧。（二）案例丰富，实践性强
本书结合网店美工岗位实际需求进行设计，知识讲解与实例同步进行，案例丰富、实用；每章后还设计了“实战演练”模块和“课后练习”模块，加强了读者对知识的理解与运用能力。（三）形式新颖，品相精美
本书采用二维码形式嵌入微课视频资料，读者通过扫描二维码可随时随地学习，以提高学习效率；全书全彩印刷，图文并茂，品相精美。（四）配备海量资源
本书不仅提供配套的视频教学资料，而且提供丰富的教学资料，包括素材和效果文件、PPT课件、教学大纲、网店设计常用素材、网店装修精美案例、网店装修代码等，读者可登录人邮教育社区（www.ryjiaoyu.com）进行下载。
本书由闫寒、徐文瑞担任主编，李莉、卞克、何晓琴担任副主编。由于时间仓促和作者水平有限，书中难免存在不足之处，欢迎广大读者批评指正。编者2018年3月第1篇 网店美工基础第1章 网店美工基础知识
网店美工作为网店的装饰者，其作用在于从视觉角度上快速提升网上店铺的形象，树立网店品牌，并吸引更多买家进店浏览。一名优秀的网店美工，除了需要了解网店美工的工作范畴，以及具有网店美工必备的技能要求外，还需要掌握网店美工的一些基础知识。本章将从网店美工必备的视觉营销知识，以及网店美工常用的图像制作与处理软件—Photoshop的使用两个方面讲解网店美工需要掌握的基础知识与技能。学习目标：
＊ 学习色彩搭配技巧
＊ 熟悉图形元素的应用
＊ 熟悉文字的应用技能目标：
＊ 熟悉Photoshop CS6的基本操作
＊ 掌握Photoshop CS6抠图的方法
＊ 掌握抠图与背景的合成的方法1.1 网店美工概述
由于很多读者都是第一次接触网店美工岗位，对该岗位并不熟悉，因此本小节主要介绍网店美工的相关知识，包括网店美工的工作范畴、网店美工的技能要求，为后面进行网店美工设计奠定基础。1.1.1 网店美工的工作范畴
网店美工是网店运营过程中一个非常重要的职位，主要负责图片的美化、店铺的装修、页面的设计，以及运营推广等工作，下面进行具体介绍。
• 图片的美化：拍摄出的商品图片不一定能够直接上架，网店美工需要负责每款商品的设计和美化，具体包括商品的拍摄及商品图片的校色、美化，以及文本的修饰等。图1-1所示为对商品图片进行调色、设置镜头滤镜和添加文本修饰后的效果。图1-1 美化后的图片
• 店铺的装修：网店美工在对店铺进行装修前先要了解店铺的组成，店铺包括快速导航、促销、描述、宝贝分类、商品展示等模块，通过对店铺的模块进行编辑，网店美工能够对设计好的页面进行切片，而合理利用图片空间管理图片，能够帮助网店美工快速完成店铺店招、店标、导航条、轮播海报等模块的装修。图1-2所示为店铺的部分基础模块，以及店铺首页的部分装修效果。图1-2 店铺的部分基础模块和店铺首页的部分装修效果
• 页面的设计：页面的设计包括设计页面布局和进行页面色彩的搭配，此项工作要求网店美工具有良好的审美观，能独立完成店铺首页、详情页、活动页的设计。网店美工要通过页面风格设计打造独特的店铺特色，进而促使买家选购商品，增加店铺销量。图1-3所示为某女装店铺的首页和某护肤品店铺的“双11”活动专页，从店铺配色、字体等元素上可知页面的风格与性质。图1-3 页面设计
• 运营推广：网店美工要挖掘消费者的浏览习惯和点击需求，从用户角度来优化网店，提高网店的可用性，并根据商品的上架情况和促销信息自主制作促销广告位，设计主图、钻展图、直通车图、海报等。图1-4所示为“武之藏”店铺的活动海报与七夕折扣的活动海报。图1-4 活动海报1.1.2 网店美工的技能要求
一名合格的网店美工，除了要能够熟练使用Photoshop、Flash、Fireworks、Dreamweaver等常用的设计与制作软件外，还需要具备扎实的美术功底和独到的创新思维，熟悉网页设计语言并有一定的文字功底，能够写出突出商品亮点的广告文案，这个亮点即为商品的诉求点。一个好的诉求点不仅能打动买家，还能展示商品的优越性；因此，好的网店美工不仅需要懂专业知识，更需要懂商品、懂营销、懂广告，并且了解如何将良好的营销思维应用到商品中，了解所制作的图片将传达什么信息，懂得如何去打动买家，引起买家的购买欲。1.2 网店美工必备的视觉营销知识
由于在网店中购物不能像在实体店一样用五官去感知商品，买家只能通过眼睛对卖家提供的文本、图片、视频进行查看，以了解商品，因此网店的视觉设计就显得尤为重要。本节将针对网店美工视觉营销设计的一些基本理念进行介绍，从中告诉大家如何通过色彩搭配、图形、文字等进行网店的视觉营销，最终达到提高店铺的流量、转化率、品牌形象的目的。1.2.1 色彩搭配
网店的色彩与风格是买家进入店铺时首先感受到的东西，因此色彩搭配是做好店铺视觉营销的基础。很多卖家在装修店铺的时候，喜欢将一些酷炫的色块随意地堆砌在店铺里，这会让整个页面的色彩变得杂乱无比，给买家造成视觉疲劳；而好的色彩搭配不仅能够让页面更具亲和力和感染力，而且还能提高店铺的浏览量。因此，在装修店铺时，色彩搭配尤为重要。
1. 色彩的属性与对比
色彩由色相、明度以及纯度3种属性构成。色相即各类色彩给人的视觉感受，如红、黄、绿、蓝等各种颜色；明度是眼睛对光源和物体表面明暗程度的感觉，该明暗程度取决于光线的强弱；纯度也称饱和度，是指眼睛对色彩鲜艳度与浑浊度的感受。在搭配色彩时，经常需要用到一些色彩的对比，下面本书将对常用的色彩对比进行介绍。
• 明度对比：利用色彩的明暗程度进行对比。恰当的明度对比可以使页面产生光感、明快感、清晰感。通常情况下，明度对比较强时，页面清晰、锐利，不容易出现误差；而当明度对比较弱时，配色效果往往不佳，页面会显得柔和单薄、形象不够明朗。图1-5所示为不同明度的橙色的对比页面。图1-5 不同明度的对比效果
• 纯度对比：利用纯度的强弱形成对比。纯度对比较弱的画面的视觉效果也较弱，适合长时间观看；纯度对比适中的画面的视觉效果和谐、丰富，可以突显画面的主次；纯度对比越强的画面，其视觉效果越鲜艳明朗、富有生机。图1-6所示为不同纯度的红色的对比页面。图1-6 不同纯度的对比效果
• 色相对比：利用色相之间的差别形成对比。网店美工在进行色相对比时需要考虑其他色相与主色相之间的关系，如原色对比、间色对比、补色对比、邻近色对比，以及最后需要表现的效果。其中，原色对比一般指红色、黄色和蓝色的对比；间色对比是指两种原色调配而成的颜色对比，如红+黄=橙，红+蓝=紫；补色对比是指色相环中的一个颜色与180°对角的颜色对比；邻近色对比是指色相环上的色相在15°以内的颜色对比。
• 冷暖色对比：从颜色给人带来的感官刺激进行考量，黄、橙、红等颜色能给人带来温暖、热情、奔放的感觉，属于暖色调；蓝、蓝绿、紫等颜色能给人带来凉爽、寒冷、低调的感觉，属于冷色调。图1-7所示为冷色调和暖色调页面的对比效果。图1-7 冷色调和暖色调的对比
• 色彩面积对比：各种色彩在画面中所占面积的大小不同，其所呈现出来的对比效果也就不同。图1-8所示为在使用了大面积红色色调的页面中加入小面积的蓝色，这可以起到协调和平衡视觉的作用。使用小面积的蓝色，还能起到强调促销文字、突出视觉中心的作用。图1-8 色彩面积的对比
2. 主色、辅助色与点缀色
网店美工在搭配店铺的页面色彩时不能随心所欲，需要遵循一定的比例与程序。网店装修配色的黄金比例为“70：25：5”，其中，主色色域占总版面的70%，辅助色占25%，而其他点缀色占5%。网店装修的配色程序为：首先根据店铺类目选择占用大面积的主色，然后根据主色合理搭配辅助色与点缀色，用于突出页面的重点、平衡视觉效果。图1-9所示为主色、辅助色与点缀色的应用案例。图1-9 主色、辅助色与点缀色
在色彩搭配中，主色、辅助色与点缀色是3种具有不同功能的颜色，具体介绍如下。
• 主色：主色是页面中占用面积最大，也是最受瞩目的颜色，它决定了整个店铺的风格。主色不宜过多，一般控制为1~3种，颜色过多容易使人产生视觉疲劳。主色不是随意选择的，而是需要网店美工系统地分析自己品牌的受众人群的心理特征，找到易于受众人群接受的色彩，如童装适合选择黄色、粉色和橙色等暖色调作为主色。
• 辅助色：辅助色在页面中的占用面积小于主色，用于烘托主色。合理应用辅助色能丰富页面的色彩，使页面更加完整、美观。
• 点缀色：点缀色是指页面中面积小、色彩比较醒目的一种或多种颜色。合理应用点缀色，可以起到画龙点睛的作用，使页面主次更加分明、富有变化。1.2.2 图形元素的应用
在网页中合理利用图形元素，既丰富了网页的视觉效果，又生动地表现出了商品的信息，同时打破了纯粹文字页面给人的呆板视觉效果。点、线、面是图形中最基本的三大要素，三者结合使用，能够呈现丰富的视觉效果。
• 点：点是可见的最小的形式单元，具有凝聚视觉的作用，可以使画面布局显得合理舒适、灵动且富有冲击力。点的表现形式丰富多样，既包含圆点、方点、三角点等有规则的点，又包含锯齿点、雨点、泥点、墨点等不规则的点。如图1-10所示，左图为点的表现形式之一，右图为文字周围的点元素，这些点元素可以丰富画面，突出主题。图1-10 点
• 线：线在视觉形态中可以表现长度、宽度、位置、方向性和性格，具有刚柔并济、优美和简洁的特点，经常用于渲染画面，引导、串联或分割画面元素。线分为水平线、垂直线、曲线、斜线。不同线的形态所表达的情感不同，水平线和垂直线单纯、大气、明确、庄严；曲线柔和流畅、优雅灵动；斜线视觉冲击力强，可以展现活力四射的感觉。图1-11所示为斜线素材，以及直线在文本串联方面的应用。图1-11 线
• 面：点的放大即为面，通过线的分割所产生的各种比例的空间也可以称为面。面有长度、宽度、方向、位置、摆放角度等特性。面具有组合信息、分割画面、平衡和丰富空间层次、烘托与深化主题的作用。网店美工利用面来设计美化页面时需要注意，面与面之间要通过不同的排列来进行灵活对比。图1-12所示为使用面元素，如云朵、圆形、矩形等来装饰画面的效果。图1-12 面1.2.3 文字的应用
可读性强、搭配合理的文本能直观地向买家阐述商品的详细信息，引导买家完成商品的浏览与购买。在设计网店图片时，文字内容的设计及字体的选择都是有讲究的。首先文字内容要精练，能充分体现所要表达的主题。有了文字内容之后，相应的文字字体选择也不能马虎。
1. 字体的性格特征
不同字体具有不同的性格特征，网店美工在选择字体时需要根据商品的特征来选择对应的字体。下面我们将对淘宝网店常用的字体性格特征进行介绍。
• 宋体：宋体是在店铺中应用最广泛的字体，其笔画横细竖粗，起点与结束点有额外的装饰，其外形端庄秀美、具有浓厚的文艺气息，适合用于标题设计。系统默认的宋体纤细端美，但作为标题分量不足；而方正大标宋不仅具有宋体的秀美，还具备黑体的醒目性，因此经常被用于女性商品宣传图的设计。此外，书宋、大宋、中宋、仿宋、细仿宋等也属于常用的宋体。图1-13所示为宋体在女装及护肤品海报中的应用。图1-13 宋体经验之谈在鲜花类、珠宝配饰类、女性用品、护肤品、化妆品等以女性消费者为主体的商品设计中，网店美工一般采用纤细秀美、时尚、线条流畅、有粗细变化的字体，如宋体、方正中倩简体、方正纤黑简体、张海山悦线简体、方正兰亭黑简体等。
• 黑体：黑体笔画粗细一致，粗壮有力、突出醒目，具有强烈的视觉感，宣传性强，常用于促销广告、导航条，或车、剃须刀、重金属、摇滚、竞技游戏、足球等目标群体为男性的商品宣传图的设计中。常见的黑体样式包括粗黑、大黑、中黑、雅黑等。图1-14所示为黑体在台灯及食品海报上的应用。图1-14 黑体
• 书法体：书法体包括楷体、叶根友毛笔行书、篆书体、隶书体、行书体和燕书体等。书法体具有古朴秀美、历史悠久的特征，常用于古玉、茶叶、笔墨、书籍等古典气息浓厚的店铺中，如图1-15所示。图1-15 书法体
• 美术体：网店美工在店铺设计中还经常使用美术体类字体，这类字体具有明显的艺术特征，如汉仪娃娃篆简、方正胖娃简体、方正少儿简体、滕祥孔淼卡通简体等字体具有活泼、可爱、肥圆、调皮等艺术特征，多用于零食、玩具、童装、点读机、卡通漫画等以儿童群体为主体的商品宣传图中。此外，美术体还指将文本的笔画涂抹变形，或用花瓣、树枝等拼凑成各种图形化的字体，其装饰作用强，主要用于海报的设计，可有效提升店铺的艺术品位，如图1-16所示。图1-16 美术体
2. 文字的布局技巧
在网店视觉营销设计中，文字除了传达营销信息外，还是一种重要的视觉材料，文字的布局在画面空间、结构、韵律上都是很重要的因素。下面我们将对网店视觉营销设计中常用的文字布局技巧进行介绍。
• 字体的选用与变化：网店美工在排版网店广告文案时，选择2~3种匹配度高的字体能呈现出最佳的视觉效果。字体过多会产生零乱而缺乏整体的感觉，容易分散买家注意力，使买家产生视觉疲劳。在选择字体时，网店美工可考虑通过加粗、变细、拉长、压扁或调整行间距等操作来变化字体，使其产生丰富多彩的视觉效果。
• 文字的统一：网店美工在进行文字的编排时，需要把握文字的统一性，即使文字的字体、粗细、大小和颜色在搭配组合上给买家以关联感，这样文字组合才不会显得松散杂乱。
• 文字的层次布局：在网店视觉营销设计中，文案的显示并非是简单的文字堆砌，而是有层次的。网店美工通常是按重要程度设置文本的显示级别，引导买家浏览文案的顺序，此情况下首先展示的是该商品所强调的重点。在进行文字的编排时，网店美工可利用字体、粗细、大小与颜色的对比来设计文本的显示级别。图1-17所示的焦点图首先通过红色大字号文字与标签突出“周年庆”的主题，然后配合绿色底纹，使用白色粗体文字强调折扣，并用黄色突出具体折扣值，最后使用较小的文字字体说明活动时间。图1-17 文字的层次布局1.3 Photoshop CS6的基本操作
随着电子商务的发展，网店已经成为人们生活中必不可少的部分。如何使网店中的商品在竞争日益激烈的电子商务市场中脱颖而出，网店美工成为其成功的关键因素之一。怎样通过Photoshop制作出具有吸引力、宣传力的图片，提高店铺的视觉营销效果，是当前网店美工必须解决的问题。而作为一名网店美工新手，了解并掌握Photoshop的基本使用方法是进行其他操作的前提。下面我们将对Photoshop CS6的基础知识进行介绍，主要包括设置前景色与背景色、图层的基本操作、裁剪并更改图片尺寸等。1.3.1 设置前景色与背景色
前景色是插入、绘制图形的颜色；背景色是需要处理的图片底色。网店美工可以根据需要设置前景色与背景色，下面我们对设置前景色与背景色常见的操作方法进行介绍。
• 设置前景色与背景色的颜色：当需要设置前景色与背景色时，单击工具箱底部前景色与背景色对应的色块即可打开颜色设置对话框，大家可在其中选择需要的颜色，图1-18所示为将黑色的前景色设置为绿色。图1-18 将黑色的前景色设置为绿色
• 恢复默认前景色与背景色：单击按钮可恢复默认的前景色与背景色。
• 切换前景色与背景色：单击按钮，可在前景色与背景色之间切换颜色。
• 选区填充：创建选区后，按【Ctrl+Delete】组合键可以用背景色填充当前选区，按【Alt+Delete】组合键可以用前景色填充当前选区。1.3.2 图层的基本操作
图层好比是一张透明的醋酸纸，层与层之间是叠加的。若上层无任何图像，则对当前层无影响；若上层有图像，那么与当前层重叠的部分，则会遮住当前层的图像。网店美工在设计作品时往往需要操作多个图层。操作图层主要在“图层”面板中进行，选择【窗口】/【图层】命令即可打开“图层”面板，图1-19所示为“图层”面板中常用的命令。选择图层后，在面板上方的下拉列表框中可设置图层的不透明度与混合模式；拖动图层到其他位置可移动图层的堆叠顺序，使用移动工具拖动图层中的图像可移动图像在画布中的位置；单击对应的按钮即可完成图层的新建、删除、隐藏与显示、锁定、链接、添加图层样式、添加图层蒙版等操作。图1-19 “图层”面板及常用命令
此外，常用的图层操作方法还包括以下几种。
• 复制图层：按【Ctrl+J】组合键可复制当前选择的图层，拖动图层至“新建图层”按钮上也可复制该图层。
• 合并图层：选择两个或两个以上要合并的图层，选择【图层】/【合并图层】菜单命令或按【Ctrl+E】组合键可将多个图层合并为一个图层。选择【图层】/【合并可见图层】命令，或按【Shift+Ctrl+E】组合键将合并可见的图层，其中隐藏的图层不合并。
• 盖印图层：若要将多个图层的内容合并到一个新的图层中，同时保留原来的图层不变，可执行盖印图层操作。选择多个图层，按【Ctrl+Alt+E】组合键，可将选择的图层盖印到一个新的图层中。
• 利用图层组管理图层：当图层较多时，网店美工可使用图层组对图层进行分类管理，方便后期查找与修改。选择需要移动到一个图层组的图层，按【Ctrl+G】组合键即可将选中的图层移动到新建的图层组中，双击组名称或图层名称可重命名组名称或图层名称；也可单击“创建新组”按钮新建图层组，然后将图层拖动到该图层组中。1.3.3 裁剪并更改图片尺寸
网店内不同位置的图片其尺寸也不相同，而卖家自己拍摄的商品图片或从网上收集的素材图片的尺寸并不一定能符合需要，因此当图片尺寸过大时，就需要进行裁剪。下面我们以裁剪淘宝主图背景图（800像素×800像素）为例，讲解裁剪并更改图片尺寸的方法，其具体操作如下。微课：裁剪并更改图片尺寸STEP 01 打开“主图背景.jpg”图片（配套资源：\素材文件\第1章\主图背景.jpg），如图1-20所示。图1-20 打开素材文件STEP 02 选择“裁剪工具”，在工具属性栏的“裁剪方式”下拉列表框中选择“1×1（方形）”选项，此时画布中将出现正方形裁剪框，将鼠标光标移至裁剪框内，按住鼠标左键不放，拖动裁剪框，调整裁剪框在图像中的位置，如图1-21所示。图1-21 确定裁剪区域STEP 03 确定裁剪区域后按【Enter】键完成裁剪。选择【图像】/【图像大小】命令，在打开的对话框中设置像素大小，此处设置“宽度”和“高度”均为“800像素”，设置“分辨率”为“72像素/英寸”，单击按钮，如图1-22所示。
试读结束[说明：试读内容隐藏了图片]