网店美工赢家宝典(第4章)

赢家宝典网店美工赢家宝典品牌展示的窗口之店铺页头第4章Areyouready?第4章品牌展示的窗口之店铺页头与众不同的Logo设计4.14.2个性化店铺招牌设计4.34.4完善店铺导航模块页头背景设计Logo（标志）作为一种特殊的视觉符号，是店铺形象、特征、信誉、文化的浓缩。它的作用是将店铺的经营理念、经营内容、品牌文化等要素传达给买家，使买家能够记住该品牌，从而形成品牌烙印。Logo从形态上大致可分为三大类型：文字Logo、图形Logo和图文Logo。文字Logo文字logo主要包括汉字标志、拉丁字母标志和数字标志，其中拉丁字母标志在文字Logo设计中占主导地位。此类标志看上去简约却不简单，设计前要对文字结构要有深入的了解，抓住其特点，可进行适当夸张、变形和美化等加工。文字Logo也是使用最广泛的一类标志，事实上，很多国际性的大公司都在使用这种标志，如SONY，IBM。图形Logo图形logo通过几何图案或象形图案来表示的标志。图形标志可分为3种，即具象图形标志、抽象图形标志与具象抽象相结合的标志。相对于文字Logo来说，图形Logo通过形状的变化更加直观、形象，视觉吸引力更强，如iPhone的标志。图文logo图文组合标志集中了文字标志和图形标志的长处，克服了两者的不足，让平淡无味的图形和文字瞬间变得美丽、漂亮起来，如绿色食品标志。图文LogoLogo不仅仅是图形或文字的组合，也是依据企业的构成结构、行业类别、经营理念并充分考虑标志接触的对象和应用环境，为产品制定的标准视觉符号。在设计之前，首先要对产品做全面深入的了解。下面以“石榴汁”为例，制作名为“石榴汁”的商品Logo，首先，要开始思考石榴给人的感觉，鲜红色的外表和颗粒饱满的果实。针对石榴的形态，Logo的标准色可以采用红色，类型可以采用图文Logo进行设计，具体操作步骤如下：石榴操作步骤步骤1

打开PhotoshopCS6软件，执行【文件】丨【新建】命令，快捷键为【Ctrl+N】，在打开的【新建】对话框中设置属性，点击【确定】按钮，新建一个文档。【新建】对话框操作步骤步骤2

在工具箱中选择【圆角矩形工具】，在工具选项栏中点击【设置形状填充类型】按钮，在打开的下拉色板中点击按钮，打开【拾色器（填充颜色）】对话框，在其中设置填充颜色值为【#fd3336】，点击【确定】按钮，再设置【半径】为【30像素】。操作步骤步骤3

属性设置好后，在图像上按住鼠标左键并拖动绘制一个圆角矩形。在【图层】面板【圆角矩形1】上点击鼠标右键，在弹出的菜单中选择【栅格化图层】。绘制一个圆角矩形栅格化图图层操作步骤操作步骤步骤4

在工具箱中选择【钢笔工具】，在工具选项栏中选择【工具模式】为【形状】，设置【填充】颜色值为【#ffffff】，【描边】为【无】，然后在图像上绘制如左图所示的形状。绘制形状操作步骤步骤5

按【Ctrl+Enter】组合键，将路径转换为选区，按【Delete】键删除选区内的图像，按【Ctrl+D】组合键取消选区。删除部分图像操作步骤步骤6

在工具箱中选择【横排文字工具】，在工具选项栏中设置【字体】为【造字工房朗倩】，【字体大小】为【149点】，【消除锯齿方法】为【锐利】，【文本颜色】为白色（#ffffff）。操作步骤步骤7

将鼠标移动到图像左侧，点击鼠标左键，待闪烁光标出现后输入【石榴汁】文字，然后按【Ctrl+Enter】组合键确认输入。操作步骤步骤8

在【图层】面板中选中文字图层【石榴汁】，单点击鼠标右键，在弹出的菜单中选择【栅格化文字】。栅格化文字操作步骤步骤9

在工具箱中选择【橡皮擦工具】，在工具选项栏中设置【大小】为【20像素】，【硬度】为【100%】，【不透明度】为【100%】，在图像上拖动鼠标将【汁】字的【氵】擦除。操作步骤步骤10

选择【钢笔工具】，在工具选项栏中选择【形状】，设置【颜色】为白色，然后在图像上绘制如左图所示形状。绘制形状操作步骤步骤11

在工具箱中选择【横排文字工具】，在工具选项栏中设置属性。在图像上输入【POMEGRANATESAUCE】，使Logo看起来不那么单一。输入文字操作步骤步骤12

在【图层】面板中复制【圆角矩形1】图层，得到【圆角矩形1副本】图层，再次复制【圆角矩形1】图层，得到【圆角矩形1副本2】图层。操作步骤步骤13

在【图层】面板中选中【圆角矩形1】图层，点击面板底部的【添加图层样式】按钮，在弹出的菜单中选择【颜色叠加】命令，在弹出的【图层样式】对话框中点击【设置填充颜色】按钮，在弹出的【拾色器（叠加颜色）】对话框中设置填充颜色值为【#008606】，依次点击两次【确定】按钮，为图形叠加颜色。操作步骤步骤14

按键盘上的【↑】键，将添加图层样式后的图像向上移动。向上移动图像操作步骤步骤15

利用步骤12～13中的操作方法，为【圆角矩形1副本】图层添加【颜色叠加】图层样式，其中填充颜色值为【#ffffff】。调整图形位置后。添加图层样式并移动位置操作步骤步骤16

按【Ctrl+Shift+Alt+E】组合键盖印图层，将所有图层合成一个新的图层。盖印图层操作步骤步骤17

打开本书配套素材【1.jpg】图像文件，在制作好的【石榴汁.psd】图像窗口中石榴汁Logo上按住鼠标左键不放并向【1.jpg】图像窗口中拖动，至合适位置后释放鼠标按钮，复制石榴汁Logo。打开素材文件并复制图像制作完成的Logo不但可以作为店铺品牌形象符号应用于店招、海报中，还可以应用于产品主图等位置。店铺招牌就是店铺的招牌，简称店招，从品牌推广的角度来看，在繁华的地段一个好的店招不光标志着的店铺坐落地，更起到户外广告的作用。店铺招牌是品牌展示的窗口，整个淘宝店铺只有一个店招，无论点击哪个页面，店铺招牌都会显示在最上方，所以店招是店铺中最重要的一部分。店铺招牌在设计的过程中要遵循两点准则：美观性和功能性。美观性是指店铺招牌的设计不但符合店铺产品，还能够吸引买家眼球。功能性是指店招要有明确的品牌定位和产品定位。品牌定位可以让买家在脑海中产生品牌烙印，产品定位可以让买家明确的知道店铺出售的是什么商品。下面将两款店招进行对比，大家通过这两款店招来分别猜一猜店铺出售的是什么商品：第一款店招第二款店招店招效果对比从第一款店招的唯美程度来看，我们可以猜出店铺所卖的产品可能是女性用品，但是具体出售的是什么产品就无从而知了。再看第二款店招，从设计角度分析，不如第一款店招设计的好看，吸引人眼球，但是单从店招上我们可以看出店铺所卖的产品是面膜，而且是补水面膜，虽然设计上比不上第一款店招，但是第二款店招不但加入了店铺名称、产品图片和产品功效，还利用文字和背景色的鲜明对比，让买家可以很清晰的了解该店铺的产品定位。因此，店招的设计不但要考虑它的美观性，还要考虑它的功能性。基础店招主要应用于旺铺基础版本，因为是免费版本，所以无法设计太多内容，重点设计店招部分。淘宝对基础店招的尺寸要求是950×120像素（如果高度超过120像素，导航条显示可能异常），可以上传GIF，JPG，JPEG和PNG，共4种图片格式。下面以雨伞的店铺为例制作一款店招，在制作店招之前需要搜集素材，如天空的图片，因为雨伞与天空有关。在制作店招的时候不要盲目的进行设计，可以从产品本身关联周围环境入手。操作步骤步骤1

在执行【文件】丨【新建】命令，打开【新建】对话框，在其中设置参数，点击【确定】按钮，新建空白文档。【新建】对话框操作步骤步骤2

打开本书配套素材【2.jpg】文件，将其中的天空图片拖到【雨伞店招.psd】图像窗口中，适当调整位置。复制素材文件操作步骤步骤3

打开执行【图像】丨【调整】丨【色相/饱和度】命令，如图4-29所示，快捷键为【Ctrl+U】。选择【色相/饱和度】操作步骤步骤4

在弹出的【色相/饱和度】对话框中调整【色相】的值为【-20】，使晴朗的天空图片变得清澈一些，制造清新的意境，设置好后点击【确定】按钮。操作步骤步骤5

在工具箱中选择【油漆桶工具】，设置前景色色值为【#15bfd2】。在【图层】面板中选中【背景】图层，然后在图像上点击鼠标左键，为背景图像填充前景色。操作步骤步骤6

在工具箱中选择【画笔工具】，在工具选项栏中设置画笔【大小】为【150像素】，【硬度】为【0%】，【不透明度】为【50%】。选择【色相/饱和度】操作步骤步骤7

在【图层】面板中选中【图层1】，然后点击面板底部的【添加图层蒙版】按钮，为【图层1】添加蒙版。添加图层蒙版操作步骤步骤8

在天空图片上拖动鼠标进行涂抹，将多余的云彩涂抹掉，使图片看上去更唯美。步骤9

打开本书配套素材【3.psd】文件，将其中的雨伞图像拖至【雨伞店招.psd】图像窗口中，并且移动到合适的位置。操作步骤步骤10

在【图层】调板中复制【图层2】图层，得到【图层2副本】图层，然后选中【图层2】图层。执行【编辑】丨【自由变换】命令（快捷键为【Ctrl+T】）显示自由变换框，在框内点击鼠标右键，在弹出的菜单中选择【垂直翻转】命令，翻转雨伞图像，按【Enter】键确认操作，移动位置后，为雨伞添加阴影效果。自由变换图像添加阴影效果操作步骤步骤11

在按【Ctrl+U】组合键，在弹出的【色彩/饱和度】对话框中调整【色相】的值为【17】，【饱和度】的值为【-21】，【明度】的值为【-25】，点击【确定】按钮，使雨伞的投影效果更加有意境。操作步骤步骤12

在工具箱中选择【横排文字工具】，设置【文体】为【方正兰亭中黑体】，【文字大小】为【24点】，【文本颜色】的值为【#00c8ff】，然后在图像的合适位置输入【天堂伞官方旗舰店】。输入文字操作步骤步骤13

在点击【图层】面板底部的【添加图层样式】按钮，选择【描边】命令，在弹出【图层样式】对话框中设置参数，点击【确定】按钮，如图4-40所示，为文字添加描边图层样式。添加描边图层样式操作步骤步骤14

利用【横排文字工具】在图像上的合适位置输入其他文字内容，如店铺的经营类目，也可以添加一些英文语句来完善店招的布局。输入其他文字内容字体：微软雅黑；大小：6点；颜色值：#adf8fe字体：宋体；大小：12点；颜色值：#fda444操作步骤步骤15

在【图层】面板中点击【新建图层】按钮，利用【画笔工具】进行涂抹。新建图层操作步骤步骤16

在工具箱中选择【画笔工具】，设置画笔【大小】为【108像素】，【硬度】为【0%】，前景色的值为【#edfbf7】，然后在图像上拖动鼠标进行涂抹，绘制浅色背景。操作步骤步骤17

利用步骤16中的操作方法，分别设置前景色的值为【#f4d5c0】【#a4f2ef】【#19c1d4】，然后分别在在图像中进行涂抹，画笔的大小可以根据所需涂抹的部分而定。按【Ctrl+S】组合键保存文件，再保存一份JPEG格式。对于刚接触店招设计的新手来说，店招的布局是很头疼的一件事，不知道该如何布局才能够让店招看起来舒服、好看，还能体现的全面，这时候可以参考一些同行业的店招设计，模仿自己喜欢的店招布局，从而提升自己的设计能力。通栏店招主要应用于旺铺专业版本，可以利用其中的自定义店招模块，对店招进行多元化的设计，使店招整体看上去更美观，淘宝对通栏店招的尺寸要求是1920×150像素（150像素内包含店招和导航两部分，每部分所占的比例可以自己布局），可以上传GIF，JPG，JPEG和PNG四种图片格式。通栏店招宽度虽然可以制作成1920像素，但是店招和导航条上的文字内容，依旧建议C店的放在950像素之内，天猫店的放在990像素之内。原因是如果店招上的文字需要添加超链接，那么超过950像素（或者990像素）的部分是无法添加超链接的，但是，为了店招的美观度，超过950像素（或者990像素）的部分可以用图片代替。通栏店招操作步骤步骤1

在Photoshop中新建一个名称为通栏店招，尺寸为1920×150像素的空白文档。在工具箱中选择【油漆桶工具】，设置前景色的值为【#010b2f】，然后在图像上点击鼠标左键为背景填充颜色。填充颜色操作步骤步骤2

打开本书配套素材【4.jpg】文件，将其中的图像拖到【店招.psd】图像窗口中。复制素材文件操作步骤步骤3

执行【滤镜】丨【模糊】丨【高斯模糊】命令，在弹出的【高斯模糊】对话框中设置【半径（R）】为【170像素】，点击【确定】按钮，模糊图像。半径像素越大，图片就会越模糊，不同的图片模糊的效果不同，可以通过这种方式增加背景的高光颜色。利用【高斯模糊】命令调整图像操作步骤步骤4

执行【视图】丨【标尺】命令启动标尺，快捷键为【Ctrl+R】，然后将鼠标光标移动到垂直标尺上，按住鼠标并向右拖动至485像素的位置后释放鼠标按钮，创建垂直参考线。创建垂直参考线操作步骤步骤5

利用步骤4中的操作方法，分别在960像素和1435像素的位置创建垂直参考线，这样可以直观地看出图片的中心位置和950像素以内的位置。操作步骤步骤6

打开本书配套素材【5.psd】文件，将Logo图像拖至【通栏店招.psd】图像窗口中，并放置在第1条垂直参考线的右侧。利用【横排文字工具】在Logo图像的右侧输入如右图所示的文字。字体：汉仪菱心体简；大小：35点；颜色值：#ffffff字体：方正兰亭纤黑体；大小：12点；颜色值：#ffffff步骤7

在工具箱中选择【直线工具】，在工具选项栏中设置【填充】的值为【#ffffff】，【粗细】为【1像素】，然后在图像上按住鼠标从上至下拖动绘制直线。操作步骤操作步骤步骤8

此时在【图层】面板中自动创建【形状1】图层，点击面板底部的【添加图层蒙版】按钮，为【形状1】图层创建一个图层蒙版。创建图层蒙版操作步骤步骤9

在工具箱中选择【渐变工具】，在工具选项栏中点击【点按可编辑渐变】按钮，在打开的【渐变编辑器】对话框中渐变颜色条的下方点击，创建一个色标。然后双击右侧的色标，在打开的【拾色器（色标颜色）】对话框中设置颜色值为【#000000】。利用同样的方法，设置中间的色标颜色值为【#ffffff】。创建色标设置色标颜色操作步骤操作步骤步骤10

在图像上从直线形状顶点向终点拖动鼠标，得到两边尖的分割线条，这种光效线条在作图过程中会经常用到。操作步骤步骤11

打开本书配套素材【6.psd】文件，将其中的主推商品图片拖动到【通栏店招.psd】图像窗口中第3条垂直参考线的左侧。在工具箱中选择【横排文字工具】，在助推商品图片的左侧输入如右图所示的文字。字体：方正兰亭中黑；大小：20.73点；颜色值：#fff000字体：Impact；大小：25.28点；颜色值：#fff000字体：Impact；大小：44点；颜色值：#fff000输入文字操作步骤步骤12

在工具箱中选择【圆角矩形工具】，在工具选项栏中设置填充颜色值为【#ff9c03】，【半径】为【30像素】，然后在图像上绘制圆角矩形，并在圆角矩形上输入【明星产品】。字体：方正兰亭细黑；大小：16.95点；颜色值：#000d30绘制圆角矩形并输入文字操作步骤步骤13

在工具箱中选择【圆角矩形工具】，设置填充颜色值为【#3349b8】，【半径】为【6像素】，然后在图像上第1条参考线右侧绘制圆角矩形，在图像中只留上半部分，保留高度大约为30像素即可。利用【横排文字工具】在圆角矩形上输入【首页】。字体：方正兰亭黑；大小：15点；颜色值：#ededef操作步骤步骤14

利用步骤13中的操作方法，在导航条的位置输入其他店铺分类信息。制作导航条操作步骤步骤15

在工具箱中选择【自定形状工具】，在工具选项栏中设置填充颜色值【#ffffff】，点击【形状】右侧的下拉三角按钮，在打开的下拉列表中选择选择【红心形卡】，然后在图像上拖动鼠标绘制心形。操作步骤步骤16

至此，完成了通栏店招案例的整体制作步骤。按【Ctrl+S】组合键保存文件，再保存一份JPEG格式。在这里我们制作的通栏店招较为简单，读者可以根据自己的喜好进行发挥。另外，在绘制图形时，按住【Shift】键的同时拖动鼠标绘制图形，可以得到正比例图形。最终效果店招设计好了，如何将设计的成果展示到店铺中呢？下面以展示【雨伞店招】为例对其进行详细讲解。具体设置步骤如下所示：操作步骤步骤1

打开淘宝店铺【卖家中心】页面，在【店铺管理】选项栏下点击【店铺装修】按钮。操作步骤步骤2

进入【店铺装修】页面，将鼠标移动至【店铺招牌】模块中，然后点击【编辑】按钮，打开【店铺招牌】对话框，在【店铺类型】设置区中选择【默认招牌】单选钮；在【店铺名称】设置区中取消勾选【是否显示店铺名称】复选框；在【背景图】设置区中点击【选择文件】按钮，弹出【从图片空间选择】选项区。操作步骤步骤3

在选项区中点击【上传新图片】选项卡，在其中点击【添加图片】按钮。操作步骤步骤4

在弹出的对话框中选择【雨伞店招.jpg】图片，点击【打开】按钮，关闭对话框。选择图片操作步骤步骤5

雨伞店招图片被上传至【上传新图片】选项区中，点击【插入】按钮。上传图片操作步骤步骤6

经过步骤5的操作，雨伞店招被上传到【店铺招牌】对话框中，在其中点击【保存】按钮。操作步骤步骤7

保存好以后，雨伞店招显示在【店铺装修】页面，点击页面右上角的【发布】按钮，店招会在【淘宝店铺】页面顶部显示。店招只有在【店铺装修】页面发布后，买家才可以浏览到店招效果，不发布的话，页面上显示的店招还是未装修之前的效果。一个好的店铺导航，决定着买家的浏览路径和在店内停留的时间。网店应该让每一个导航成为店铺的“导购员”，节约买家时间。所以在首页和内页都应该合理地设置导航，让买家顺畅的浏览。导航区域可以放置店铺最重要的信息，最多添加12项一级内容，建议不超过7项，二级内容没有限制。具体设置步骤如下所示：操作步骤步骤1

进入淘宝店铺【店铺装修】页面，点击【导航】模块右上角的【编辑】按钮，在弹出的【导航】对话框中选择【导航设置】选项卡，然后点击【添加】按钮。步骤2

在弹出的【添加导航内容】对话框中可以选择导航显示的内容，勾选展示内容前的复选框，点击【确定】按钮。操作步骤根据以上操作，我们就完成了店铺导航的基础设置。导航展示了大家需要的内容。注意：内容不能选择太多，因为系统导航只有950像素的宽度，如果内容超出这个宽度的范围，将不显示选择的多余内容。自定义导航是卖家在PS中自己设计的导航效果，通过为导航添加链接来完成自定义导航内容。在这里以4.2节中的通栏店招为例进行实例操作，具体操作步骤如下：步骤1

打开在4.2节已经设计好的店招和导航条，在工具箱中选择【裁剪工具】，沿着参考线裁剪图像，将其保存为名称为【店招】的JPEG格式图像。操作步骤步骤2

打开Dreamweaver软件，在【文件】面板【淘宝店铺代码】站点中新建【untitled.html】文件，在编辑框中将除【.html】以外的文字删除，然后在【.html】左侧输入【导航】，按【Enter】键确认操作，重命名文件。操作步骤新建并重命名文件步骤3

双击打开【导航】文件，点击【代码】按钮，并删除页面中的所有代码。操作步骤删除所有代码步骤4

点击【设计】按钮返回设计操作页面，选择【表格】按钮，打开【表格】对话框，在其中设置参数，点击【确定】按钮，新建一个表格。操作步骤新建表格步骤5

鼠标点击制作好的表格内容区域，点击【图像】按钮，在弹出的【选择图像源文件】对话框中选择已保存的【店招.jpg】，点击【确定】按钮。系统会弹出2个提示框，依次选择【否】和【取消】命令，完成插入图片的操作。操作步骤插入图片步骤6

点击【图像】按钮右侧的下拉三角按钮，在弹出的下拉列表中选择【绘制矩形热点】命令。操作步骤选择【绘制矩形热点】命令步骤7

将鼠标移至店招图像上，在【首页】模块上按住鼠标左键并拖动，绘制矩形热点，然后依次覆盖店招图像中导航条上的其他模块信息。操作步骤步骤8

鼠标点击其中一个绘制好的矩形热点，在【属性】面板中添加链接地址，【目标】选择为【_blank】。操作步骤添加链接地址步骤9

依次添加好链接之后，点击【代码】按钮，将【<map>】与【</map>】之间所有的代码全部剪切（快捷键为【Ctrl+X】），然后粘贴到【<imgsrc="图片地址"/>】后侧。操作步骤编辑代码步骤10

将代码中【Map】属性全部改成【Map031】因为淘宝网站中有【Map】属性，所以我们需要改一下属性名。依次按【Ctrl+A】【Ctrl+C】组合键，复制全部代码。操作步骤编辑代码步骤11

进入淘宝【店铺装修】页面，点击【店铺招牌】模块右上角的【编辑】按钮在弹出的【店招招牌】对话框中选择【自定义招牌】单选钮，点击【源码】按钮，然后将Dreamweaver【导航】文件中所有的代码粘贴到代码编辑区域内，并将【高度】更改为【150px】，点击【确定】按钮完成操作。操作步骤完成操作将图层隐藏后，再次点击该图层左边的区域可重新显示被隐藏的图层。模块信息后需要跳转的页面地址。例如，为首页添加链接地址，需要到淘宝页面点击店铺首页，在浏览器上方出现的地址就是链接地址。多样化的特效导航指的是利用CSS代码编辑系统导航样式。CSS也叫层叠样式表单，是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。店铺导航开放CSS设定，是为了让卖家通过CSS代码将导航条更加完美地展现出来。具体操作步骤如下：步骤1

进入【店铺装修】页面，点击【导航】模块右上角的【编辑】按钮，在弹出的