网店美工项目7店招导航制作.pptxVIP

项目七店招导航制作·知识目标·技能目标·素质目标（1）掌握店铺导航栏的参数设置及设计步骤。（2）掌握店招的设计要点及具体设计步骤。（1）能根据需要设计制作出店铺导航栏。（2）能根据需要设计制作出店招。（3）熟练使用Photoshop中的相关工具。（1）培养创意和设计思维。（2）培养项目管理和组织能力。

01店铺导航栏制作

任务一店铺导航栏制作一、案例引入及相关知识导航栏也叫导航条，店铺中的导航栏类似于实体店的环境导视，能迅速使买家找到其想要购买的商品。这在很大程度上提高了买家的购买体验以及购买的便利性。导航栏作为店铺首页的一部分，属于店铺形象的一个重要因素，与店铺形象相符的导航栏设计才能更好地树立与宣传店铺形象。赏析网店中常见的导航栏设计效果图可以看出，导航栏无论是在分类设置上还是在色彩搭配上都需要与网点的整体风格和谐统一，而且布局合理，才能很好地起到指引购买的作用。二、资源准备三、实践操作实践操作7-1：店铺导航栏制作1.任务要求（1）店铺导航栏的尺寸为950×30像素。（2）店铺导航栏设计并完成背景样式。（3）给店铺导航栏中的文字添加投影。

任务一店铺导航栏制作步骤1打开Photoshop软件，在菜单栏中执行“文件”→“新建”命令，在弹出的“新建文档”对话框中新建宽度为950像素、高度为30像素、颜色模式为RGB颜色、名称为“导航栏”的空白画布，如图7-1所示。三、实践操作实践操作7-1：店铺导航栏制作图7-1新建导航栏空白画布

任务一店铺导航栏制作步骤2单击工具箱中的前景色图标，打开“拾色器（前景色）”对话框，在对话框最下方“#”后的文本框中输入“ccffff”，为新建的空白画布填充背景色，如图7-2所示。三、实践操作实践操作7-1：店铺导航栏制作图7-2为空白画布填充背景色

任务一店铺导航栏制作步骤3创建新图层，单击工具箱中的矩形选框工具，按住鼠标左键不放拖出一个比画布稍小的矩形，如图7-3所示。单击工具箱中的前景色图标，在弹出的“拾色器（前景色）”对话框“#”后的文本框中输入“99ccff”，为其填充一个其他颜色，如图7-4所示。三、实践操作实践操作7-1：店铺导航栏制作图6-4曝光度调整前后对比图7-4为矩形填充颜色

任务一店铺导航栏制作步骤4单击工具箱中的画笔工具，在“画笔设置”中设置画笔大小为9像素，硬度为100%的硬边圆，间距设置为258%，颜色为白色，如图7-5所示。三、实践操作实践操作7-1：店铺导航栏制作图7-5画笔设置

任务一店铺导航栏制作步骤５在画布的左上角选取一个点，按住Shift键不放，直接在画布右上角位置单击，这样就会出现一行有着相同间距的白色小圆点。重复此操作四次，使得白色小圆点充满整个画布，效果如图7-6所示。三、实践操作实践操作7-1：店铺导航栏制作图7-6绘制白色小圆点

任务一店铺导航栏制作步骤6单击工具箱中的文字工具图标，在画板中输入文本“首页所有商品秋冬新品会员专区收藏店铺”。在属性栏调整文字属性。步骤７在“图层”面板选中文字图层，双击图层空白处，弹出“图层样式”窗口，勾选“投影”前的复选框，调整参数，如图7-7所示。店铺导航栏最终效果如图7-8所示。三、实践操作实践操作7-1：店铺导航栏制作图7-7给文字添加投影图7-8店铺导航栏最终效果

02店招设计制作

任务二店招设计制作一、案例引入及相关知识店招，顾名思义，就是店铺的招牌，它好比实体店的招牌。其作用就是让买家看到并且记住它，从而达到宣传和推广店铺的目的。店招一般位于店铺首页的顶端，是店铺的展示窗口，也是买家对店铺形成第一印象的主要来源。二、资源准备三、实践操作实践操作7-2：店招设计制作1.任务要求（1）店招大小：950×150像素，颜色模式：RGB颜色，分辨率：72像素/英寸。（2）对店铺名称、店铺Logo、店铺广告语、店铺收藏、店铺促销等进行相关设计。（3）店招与整个店铺首页的风格要保持统一。

任务二店招设计制作三、实践操作实践操作7-2：店招设计制作2.实施步骤步骤1启动Photoshop软件，新建一个空白画布，宽度设置为950像素，高度设置为150像素，分辨率为72像素/英寸，颜色模式为RGB颜色，如图7-9所示。图7-9新建空白画布

任务二店招设计制作三、实践操作实践操作7-2：店招设计制作2.实施步骤步骤2单击工具箱中的矩形工具图标，框选店招区域画出蓝色矩形，如图7-10所示。图7-10店招背景制作

任务二店招设计制作三、实践操作实践操作7-2：店招设计制作2.实施步骤步骤3单击工具箱中的文字工具图标，在导航栏区域输入文字信息“首页所有产品戒指手链项链耳环”，如图7-11所示。图7-11输入