《网店美工 第2版》 课件 项目五 店招及导航栏设计与制作

项目五

店招及导航栏设计与制作

项目简介店招就是店铺的招牌，也是网店品牌定位最直观的体现，是店铺给人的第一印象，鲜明而有特色的店招不仅能吸引用户的眼球，带来订单，同时起到品牌宣传的作用。网店店招在从内容上可包含：店铺名、店铺logo、收藏按钮、关注按钮、促销产品、优惠券、活动信息/时间/倒计时、搜索框、店铺公告、店铺导航条、旺旺、电话热线、店铺资质、店铺荣誉等等一系列信息。可根据网店的具体情况进行内容设计安排，做到核心信息告知，引起并放大买家的购物欲望。项目目标能读懂客户需求信息。学会常见网店店招模板设计技巧及方法。能根据客户需求信息进行店招及导航栏设计。能使用“文字”“形状”“通道”和“蒙版”等工具制作店招及导航栏。任务一

服装类网店店招及导航栏设计与制作

【任务描述】“俪人装”服装网店即将迎来夏季促销活动，现要求为其网店设计符合活动主题的店招。要求：1、突出店铺品牌特色及活动信息；2、配色符合知性女装特点。3、布局简洁大方，要与整个页面风格、色彩统一。同时，设计师与客户沟通后得到具体需求信息如下：信息客户反馈消费人群25-35岁女青年服装风格柔和、优雅、浪漫关键信息新品、特价、59元起广告版面突出产品和关键信息店招尺寸宽为950像素，高为120像素导航栏尺寸宽为950像素，高为30像素文案简短，能放大购物欲望设计思路分析1.网店店招以网店品牌为主，结合店铺的经营类目，店铺活动信息，总体特色等几个方面进行设计。2．整体构图以文字搭配图像，背景选取柔和优雅的鲜花图案为装饰，并根据配色要符合知性女装特点的要求，字体选择白色、紫色为主色，体现知性的稳重感，同时用红色突出活动信息放大买家购买欲望。3.清晰明了的导航栏，把流量合理的分配给主推的页面或商品页面，引导用户找到合适的产品。4.新品、特价力度是消费的关注点，因此在店招中加入这些文案。最终效果图操作实施1.网店店招的设计（1）启动PhotoshopCC2018，新建一个950像素×150像素的空白文档，名称为“服装网店及店招”，背景填充白色，调出标尺并新建及锁定参考线在水平120像素的位置，打开“网店服装logo.jpg”及“装饰1”素材图像文件，将其移动到图像上，效果如图。店招背景制作（2）新建图层，使用工具箱中的“矩形选框”工具，绘制矩形选区，并填充深紫色，选择文字工具，输入文字，效果如图。制作店铺活动（4）使用工具箱中的“矩形选框”工具，绘制如图所示图形选区，填充灰色，效果如图。添加关注效果图2．网店导航的设计（1）新建图层，根据参考线，绘制一个矩形选区，并填#d4bcd6色，并用椭圆工具按住shift键，绘制正圆，输入文字，效果如图导航栏（2）新建图层绘制矩形选区，并填充颜色#96539a，选择“文本工具”，输入文字，及绘制正圆，效果如图。店招及导航效果图【举一反三】“彼岸花”是一家知名服装店，主营各种时尚女装，款式新颖时尚、价格也实惠。现在公司想为自己的网店制作一张精美大方的店招，让进店的用户能第一时间留下好的印象和即时了解店里的相关优惠促销活动讯息。客户具体要求如表：你能否运用前面所学知识帮小雪这个完成这个任务呢？信息客户反馈消费人群25-35岁女青年服装风格时尚干练关键信息买2得3，秋冬新风尚活动时间8.27-28；系列新品8.27尝鲜价79元起广告版面突出店标和关键信息店招尺寸宽为950像素，高为120像素导航栏尺寸宽为950像素，高为30像素内容要求包含店铺标志、店铺活动、收藏模块、分销招募、会员中心、导航栏等设计任务二

食品类网店店招及导航栏设计与制作

【任务描述】

食尚物语是一家装营进口零食的商城，因商城发展，即将开设网店，为了能够树立品牌形象，现要求为其设计店招。要求：1、配色符合零食店特点；2、突出网店优势，再结合店铺的主题风格，进行相应的设计，设计师与客户沟通后得到具体需求信息如下：信息客户反馈消费人群15-35岁青少年食品定位进口产品/快捷配送/贴心服务关键信息要求树立品牌形象/体现食品安全广告版面突出品牌和关键信息店招尺寸宽为950像素，高为120像素导航栏尺寸宽为950像素，高为30像素文案简短，能体现网店特点设计思路分析。设计师针对客户反馈信息表进行设计思路分析：网店店招整体选用暖色色调，吸引买家的眼球，提高情感、情绪的刺激，提升购买欲。对网店店名进行字体效果处理，吸引眼球，加深买家对网店的印象，树立品牌形象。使用图形与文字结合强化网店服务优势：物流、质量、服务，更易让买家记住，提升好感，起到品牌宣传的作用。清晰明了的导航栏，把流量合理的分配给主推的页面或商品页面，引导用户找到合适的产品。最终效果图操作实施1.网店店招的制作（1）启动PhotoshopCC2018，新建一个950像素×150像素的空白文档，名称为“食品类网店及店招”，背景填充白色，调出标尺并新建及锁定参考线在水平120像素的位置，使用工具箱中的“矩形选框”工具，绘制一个矩形选区，并填充#f6c6b7色，效果如图。新建文件及参考线（2）新建图层，使用工具箱中的“矩形选框”工具，绘制一个矩形选区，并填充#e84e46色，使用工具箱中的“橡皮擦”工具，设置画笔如图5-12所示，按住shift键从左向右拖动，效果如图。使用橡皮擦后的效果（3）新建图层，选择工具，按住shift键绘制正圆，并使用自选图形工具绘制心形，效果如图。图形绘制效果（4）选择“文字工具”，设置字体格式为汉仪琥珀简，输入文字“食尚物语进口零食商城”，栅格化文字，按住快捷键Ctrl+T调整合适大小，选择菜单命令【滤镜】|【杂色】|【添加杂色】，效果如图：文字滤镜效果（5）新建图层，使用自选图形自选工具，分别绘制以下图形，选择“文本工具”，输入文字，打开“零食车”素材图像文件，将其移动到图像上，对图像进行调整，效果如图：图5-18添加素材效果2．网店导航的制作（1）新建图层，根据参考线，绘制一个矩形选区，并填充#e84e46色，并使用文字工具输入文字，效果如图：导航栏文字效果（2）新建图层，使用矩形工具绘制矩形，设置【图层样式】|【斜面与浮雕】，效果图如图：最终效果图【举一反三】

小雪新开了一家网店口口香，主营各种类型的零食。现在小雪想为自己的网店制作一张精美大方的店招，让进店的用户能第一时间留下好的印象和即时了解店里的相关优惠促销活动讯息。具体要求如表：你能否帮小雪这个完成这个任务呢？信息客户反馈消费人群15-35岁青少年关键信息热卖商品促销价28；满100减20广告版面突出店标和关键信息店招尺寸宽为950像素，高为120像素导航栏尺寸宽为950像素，高为30像素内容要求包含店铺标志、产品信息、促销信息、店铺活动、收藏模块、导航栏等设计【项目总结】

对于网店而言，好店招及导航代表着店铺形象，传达店铺核心信息，同时还起到宣传的作用。在制作的过程中，应注意以下原则：1.注意店招及导航的尺寸，淘宝网店标尺寸通常为950*150px（包含导航栏），950*120px（不含导航栏）在实际中可根据网店需要进行选择。2.店招的设计一定要店名醒目，设计吸引人，经营的产品一目了然，和店铺整体风格一致。3.导航清晰明了，体现合理的流量分