网店装修项目三 设计店标店招和导航条（下）

?网店装修?工程三设计店标、店招和导航条重庆大学出版社工程综述小宝和同学们通过上一个项目确定好了店铺的模板和色调，设置好了页面的布局，网店首页就已经有了基本架构。接下来需要在这些架构上完善各个部分。每一家实体店店面，都会有自己各具特色的LOGO(标志)和招牌。淘宝网把这个LOGO(标志)和招牌延伸进了网店，就是网店的店标和店招。在网店里，需要提前设置好导航条，把商品的分类明确地展示给买家，方便买家进行浏览。小宝发现在店铺首页的最上端显示的就是店招，接着是导航条。那么店标在哪里呢？询问了老师才知道原来在店铺被搜索时，首先展示的就是店标。小宝认识到店标、店招是买家对网店的第一印象，导航条直接影响着买家的用户体验度。设计店招搜集素材1：在淘宝网收集一些宣传品牌为主的店招，如图所示。为了效果更突出，文字更醒目，选择使用中心构图。2：结合已经设计制作好的店标，考虑使用相同的底纹。3：明确店招尺寸。在淘宝免费旺铺里，页头高150像素，包括有30像素的导航条，所以店招设计高为120像素、宽950像素上传到淘宝网最合适。。设计店招步骤1.设计店招打开Photoshop文件，新建文件，参数设置如图3.2.6所示。命名为“页头背景图”，宽度为1300像素、高度为150像素。设计店招步骤2.设计店招打开“练习素材/项目3/SC33.jpg”文件，使用移动工具把底纹拖动到“页头背景图”文件里。设计店招步骤3.设计店招按住快捷键“Alt，拖动“图层1，复制3次，调整好位置。设计店招步骤4.设计店招选择“图层1副本，按快捷键“Ctrl+T”自由变换，点击鼠标右键，在弹出的快捷菜单中选择“水平翻转”。设计店招步骤5.设计店招选择“图层1副本3”，按快捷键“Ctrl+T”自由变换，点击鼠标右键，在弹出的快捷菜单中选择“水平翻转”。设计店招步骤6.设计店招按快捷键“Ctrl+L”，调出“色阶”对话框，设置参数如图。设计店招步骤7.设计店招新建图层，命名为“导航条底色”。使用矩形选框工具。填充颜色为#121423(R：18，G：20，B：35)。放大图片，使用移动工具，利用标尺调整“导航条底色”位置设计店招步骤8.设计店招使用图所示的参数设置对话框输入文字“TURX”,使用图所示的参数设置对话框输入文字“图瑞斯”,使用图所示的参数设置对话框输入文字“美式街头休闲文化领衔者”。设计店招步骤9.设计店招使用直线工具，大小为1像素，颜色为#c8c8c8(R：200，G：200，B：200)。绘制直线，并用橡皮擦工具擦去中间部分，调整文字位置，效果如图所示。另存为“页头背景图.jpg”。设计店招步骤10.设计店招新建图层，使用矩形选框工具，建立宽为950像素，高为120像素的选区，填充为白色，调整白色区域的位置如图所示。设计店招步骤11.设计店招使用裁剪工具把白色部分裁剪下来，隐藏白色图块，另存为“店招.jpg”。设计店招步骤12.设计店招打开淘宝网页，选择“卖家中心”→“店铺管理”→“店铺装修”→“页头”选项，点击“更换图片”按钮，如图。上传制作好的“页头背景图.jpg”，选择横向平铺和居中。设计店招步骤13.设计店招在页面编辑处，点击店招右上方的“编辑”按钮。设计店招步骤14.设计店招在弹出的“店铺招牌”对话框中点击“选择文件”按钮，如图所示。设计店招步骤15.设计店招在展开的对话框中选择“上传新图片”，点击“添加图片”，如图所示。上传“店招.jpg”。设计店招步骤16.设计店招在“招牌内容”的页面中点击“保存”按钮，注意要取消“是否显示店铺名称”复选框的勾选。设计店招步骤17.设计店招发布设置好的店招.知识点任务三设计导航条理解网店导航条的作用了解淘宝网店导航条规格了解淘宝网店导航条的种类技能目标能根据网店定位确定导航条的风格能根据需要制作网店导航条情景设计

店标和店招上传到网店后，小宝得到了老师的表扬和肯定。老师告诉小宝，为了方便顾客浏览网店，能快速找到想要的商品，需要设置好导航条。淘宝店铺导航条可以让顾客更便捷地找到所需的商品，促进交易的完成。设计导航条设计导航条步骤1.翻开淘宝网页，选择“卖家中心〞→“店铺管理〞→“宝贝分类管理〞。步骤2.点击“添加手工分类〞，根据店铺宝贝属性添加分类,点击“保存更改〞按钮。设计导航条设计导航条设计导航条步骤3.选择“卖家中心〞→“店铺管理〞→“店铺装修〞选项。步骤4.点击导航条右上方的“编辑〞，编辑导航