项目2 婴幼儿用品店招与导航的设计

项目二

婴幼儿用品店招与导航的设计网店美工项目实战教程CONTENTS目录项目导入2.1知识与技术引导2.2项目实现2.3拓展项目2.4课后思考2.52.1.1项目情景2.12.1.2项目目标2.1.3效果展示项目导入小李筹备着在网上新开一家网店，主要销售一些婴幼儿用品，在准备好了商品图片之后，她需要来装修店铺。买家进入店铺第一眼看到的就是店招和导航，设计独特、制作精良且符合网店特色的店招会给浏览的顾客留下深刻印象。此时，她正在发愁，需要用怎样的创意、配色和设计元素来制作店招和导航。2.1.1项目情景2.1.2项目目标了解网店店招与导航的作用与设计思路。能够根据商品特点及商品照片色调，来定位网店店招和导航的风格和配色，并运用店铺名称和图像来告知顾客店铺销售内容并引起其注意和兴趣。会通过钢笔绘制形状和文字工具制作店铺LOGO，使用图层蒙版工具控制图像素材在店招中的显示效果，灵活使用形状工具加入其他的修饰元素。2.1.3效果展示婴幼儿用品店招与导航的效果图2.2.1店招与导航的概述2.22.2.2赏析店招与导航知识与技术引导店招，顾名思义，就是网店的店铺招牌。店招与导航位于网店页面的最顶端，无论顾客进入店铺的首页、详情页还是其他页面，都能看到的第一个模块，因此是网店装修设计中的重中之重。2.2.1店招与导航的概述店招一般包含店铺名称，可以有一句简洁且吸引力强的广告语。同时使用具有代表性的图片来暗示店铺的销售内容。导航需清楚地列出店铺中的商品分类，帮助顾客快速找到所需要购买物品的位置。2.2.1店招与导航的概述以淘宝网为例，店招的格式为JPEG或GIF。尺寸是950像素×120像素，导航的尺寸是950像素×30像素。有的店铺为了在风格上保持一致，会把店招和导航放在一起制作，尺寸为950像素X150像素。如果需要页头背景，页头背景是1920×150像素，页头背景图片大小不能超过200K。2.2.1店招与导航的概述店招与导航的设计要从顾客的角度考虑，既要使画面美观醒目、与整体页面风格一致，又要添加具有吸引力的广告信息或是商品信息等来赢得顾客的兴趣，为转化做铺垫。为了方便顾客重返店铺，可以在店招中加入收藏和关注标志。2.2.2赏析店招与导航店招与导航的设计要从顾客的角度考虑，既要使画面美观醒目、与整体页面风格一致，又要添加具有吸引力的广告信息或是商品信息等来赢得顾客的兴趣，为转化做铺垫。为了方便顾客重返店铺，可以在店招中加入收藏和关注标志。2.2.2赏析店招与导航店招与导航的设计要从顾客的角度考虑，既要使画面美观醒目、与整体页面风格一致，又要添加具有吸引力的广告信息或是商品信息等来赢得顾客的兴趣，为转化做铺垫。为了方便顾客重返店铺，可以在店招中加入收藏和关注标志。2.2.2赏析店招与导航店招与导航的设计要从顾客的角度考虑，既要使画面美观醒目、与整体页面风格一致，又要添加具有吸引力的广告信息或是商品信息等来赢得顾客的兴趣，为转化做铺垫。为了方便顾客重返店铺，可以在店招中加入收藏和关注标志。2.2.2赏析店招与导航2.3.1设计理念2.32.3.2工具方法2.3.3实现过程项目实现2.3.1设计理念以橙黄色为导航主色调，表现出页面明亮活泼的感觉。与之搭配的浅蓝色，恰与代表店铺销售内容的几件商品主色调一致，既展现出婴幼儿纯洁天真的特性，又使得画面和谐统一。使用可爱的卡通小狐狸图标作为店铺LOGO，展示出店铺的可爱形象，同时与店铺名称相呼应。采用圆润、俏皮可爱的字体来编辑文字，使得整个画面风格统一、富有稚趣。2.3.2工具方法使用钢笔工具组绘制LOGO形状，使用圆角矩形工具等绘制多种修饰形状。通过图层蒙版来控制素材图片的显示效果，使用画笔工具简单绘制商品阴影。利用“渐变叠加”、“投影”等图层样式对绘制的形状进行修饰，使其更视觉多样化。2.3.3实现过程使用“钢笔工具”绘制LOGO，并添加文字。使用“快速选择工具”抠取商品1图片，并绘制阴影。绘制形状，添加文字。添加商品2、商品3的内容。绘制导航条。2.4.1潮流女装店招导航的设计2.42.4.2居家日用品店招导航的设计拓展项目2.4.1拓展潮流女装店招导航的设计设计理念本案例中在色彩搭配上使用时尚又具有轻熟感的橡皮红为与暖灰色为主，烘托出女性靓丽又温柔的画面感觉。在店招中加入模特图片，既告知顾客销售内容，又展示出店铺的潮流感；精炼的广告语，拉近了与顾客的距离；简洁的搜索框和收藏图标，为转化作铺垫。采用细瘦、标准的字体来编辑文字，并添加细小的投影，使得整个画面风格和谐统一的同时给人以华丽、高贵的感觉。效果如下图所示。2.4.1拓展潮流女装店招导航的设计实现过程在Photoshop中新建一个文档，使用“颜色叠加”和“内发光”图层样式来修饰背景，使用“横排文字工具”加入店铺中英文名及广告语。加入两张模特素材，并使用图层蒙版来控制其显示区域，做出渐隐效果。绘制搜索框和收藏店铺。此处注意为已建立好的图层进行编组，以方便后期查看和修改。2.4.1拓展潮流女装店招导航的设计实现过程使用“矩形工具”绘制触碰矩形，并添加“渐变叠加”图层样式制作出按下后的立体交互效果。再绘制白色的选择矩形。使用“横排文字工具”为导航加入文字信息。使用“矩形工具”绘制导航背景，为其添加“渐变叠加”图层样式来凸显立体质感，并使用两根错开的、深浅不一的直线制作出富有立体效果的导航间隔线。2.4.2拓展居家日用品店招导航的设计设计理念本案例中在色彩搭配上使用绿色和白色为主，烘托出居家日用品干净整洁的体验感受，再加入亮红色和灰色点缀，使得整个画面明亮且时尚。在店招中加入商品图片及价格信息，既告知顾客销售内容，又将优惠信息直接展示；隐在搜索框中的简洁广告语，凸显出店铺的专业性。与LOGO色彩呼应的导航条，并添加具有立体感的分隔线，使得整个画面色调统一且富有质感。效果如下图所示。2.4.2拓展居家日用品店招导航的设计实现过程在Photoshop中新建一个文档，并加入参考线，结合使用“钢笔工具”、“添加锚点工具”、“转换点工具”、“直接选择工具”等，绘制代表店铺特色的LOGO图片。输入店铺名称，使用“圆角矩形工具”、“自定义形状工具”绘制所需基本形状，制作店铺收藏图标和搜索框，在框中加入店铺专营信息。2.4.2拓展居家日用品店招导航的设计实现过程使用“矩形工具”绘制导航背景，添加“渐变叠加”图层样式制作出立体效果。利用“直线工具”为导航条添加分隔线。再加入导航文字。将商品信息加入店招，特别注意使用剪贴蒙版的方法，来统一商品图片显示区域的大小。使用“圆角矩形工具”、“椭圆工具”等绘制价格标签。2.5.1思政思考2.52.5.2技能思考课后思考在本案例绘制LOGO图形的过程中，一般使用“钢笔工具”进行绘制，这是一个非常精细又非常繁琐的步骤，要求从事网店美工的小伙伴们一定要耐心细致地完成这项任务，从而逐步锻炼自己吃苦耐劳的精神。2.5.1思政思考我们经常会通过使用富有个性化的字体，来美化设计的页面，从而给客户留下深刻的印象。但是在为你的店铺挑选精美字体之前，一定要注意版权问题，避免产生不必要的纠纷。在这里，给大家介绍“360查字体”，如图2-5-1、2-5-2所示，可以查询已经安装的字体中哪些是可以免费使用的，哪些字体在商用前一定要获得授权的，做一个诚信守法的网店美工。2.5.1思政思考我们经常会通过使用富有个性化的字体，来美化设计的页面，从而给客户留下深刻的印象。但是在为你的店铺挑选精美字体之前，一定要注意版权问题，避免产生不必要的纠纷。在这里，给大家介绍“360查字体”，如图2-5-1、2-5-2所示，可以查询已经安装的字体中哪些是可以免费使用的，哪些字体在商用前一定要获得授权的，做一个诚信守法的网店美工。2.5.1思政思考在对网店的店招和导航进行设计的过程中，不同的网络平台上，其设计的内容都是相似的。请大家到常用的网络平台（如：淘宝、京东）上找几个你喜欢的、优秀的店招导航，并将其以图片的形式保存。搜索知识：常用的网络平台上对店招导航的尺寸要求，并以文档形式保存。2.5.2技能思考谢谢观看01财务计划报表您的内容打在这里，或者通过您的内容打在这里，或者您的内容打在这里，添加标题您的内容打在这里，或者通过您的内容打在这里，或者您的内容打在这里，添加标题添加内容添加内容您的内容打在这里，或者通过您的内容打在这里，或者您的内容打在这里，添加标题您的内容打在这里，或者通过您的内容打在这里，或者您的内容打在这里，添加标题添加内容添加内容01项目背景研究PyramidLoremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummynibheuismodtinciduntutlaoreetdoloremagnaaliquameratvolutpat.UtwisienimadminimSettingLoremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummynibheuismodtinciduntutlaoreetdoloremagnaaliquameratvolutpat.UtwisienimadminimBrightIdesLoremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummynibheuismodtinciduntutlaoreetdoloremagnaaliquameratvolutpat.UtwisienimadminimIntroductionLoremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummynibheuismodtinciduntutlaoreetdoloremagnaaliquameratvolutpat.UtwisienimadminimClockLoremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummynibheuismodtinciduntutlaoreetdoloremagnaaliquameratvolutpat.UtwisienimadminimNoodleLoremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummynibheuismodtinciduntutlaoreetdoloremagnaaliquameratvolutpat.Utwisienimadminim01财务计划报表FirstStageTitleGoeshereTherearemanyvariationsofLoremIpsumavailable,butthemajorityOurStartTherearemanysufferedTherearemore.FourthStageTitleGoeshereTherearemanyvariationsofLoremIpsumavailable,butthemajoritySecondStageTitleGoeshereTherearemanyvariationsofLoremIpsumavailable,butthemajorityFifthStageTitleGoeshereTherearemanyvariationsofLoremIpsumavailable,butthemajorityThirdStageTitleGoeshereTherearemanyvariationsofLoremIpsumavailable,butthemajoritySixthStageTitleGoeshereTherearemanyvariationsofLoremIpsumavailable,butthemajority01财务计划报表SUCCESSIDEAPLANNINGREALIZATIONLoremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummynibheuismodtinciduntutlaoreetdoloremagnaaliquameratvolutpat.Loremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummynibheuismodtinciduntutlaoreetdoloremagnaaliquameratvolutpat.Loremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummynibheuismodtinciduntutlaoreetdoloremagnaaliquameratvolutpat.Loremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummynibheuismodtinciduntutlaoreetdoloremagnaaliquameratvolutpat.工作完成情况★完成概述★完成阶段★团队完成★完成比例★季度完成★月计划完成01[第二部分]PART0101市场评估分析单击此处添加文本单击此处添加1单击此处添加文本单击此处添加2单击此处添加文本单击此处添加3单击此处添加文本单击此处添加4单击此处添加文本单击此处添加5单击此处添加文本单击此处添加6单击此处添加文本单击此处添加7标题文字01市场评估分析2001-2001LoremIpsumissimplydummytextoftheprintingandtypesettingindustry.LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1520112001-2001LoremIpsumissimplydummytextoftheprintingandtypesettingindustry.LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1520122000-2001LoremIpsumissimplydummytextoftheprintingandtypesettingindustry.LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1520102006-2007LoremIpsumissimplydummytextoftheprintingandtypesettingindustry.LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe15201301市场评估分析201635%Therearemanyvariationsofpassagesofloremipsumavailable,butthemajorityhavesufferedalterationinsomeform,byinjectedhumourrandomizedwordswhichdon'tlookevenslightlybelievable65%Therearemanyvariationsofpassagesofloremipsumavailable,butthemajorityhavesufferedalterationinsomeform,byinjectedhumourrandomizedwordswhichdon'tlookevenslightlybelievable成果展示及问题★项目前期★执行过程★存在问题★解决方法★成果展示★收益增值01[第三部分]PART0101项目特色展示产品一单击此处添加对图片的说明文字单击此处添加对图片的说明文字.产品二产品三产品四单击此处添加对图片的说明文字单击此处添加对图片的说明文字.单击此处添加对图片的说明文字单击此处添加对图片的说明文字.单击此处添加对图片的说明文字单击此处添加对图片的说明文字.添加标题添加标题添加标题添加标题01项目特色展示WebDesignTherearemanyvariationsofLoremIpsumavailable,butthemajorityhavesufferedTherearemanyvariationsofLorem

Ipsumavailable,MobileAppsTherearemanyvariationsofLoremIpsumavailable,butthemajorityhavesufferedTherearemanyvariationsofLorem

IpsumavailableDataAnalysisTherearemanyvariationsofLoremIpsumavailable,butthemajorityhavesufferedTherearemanyvariationsofLorem

IpsumavailableManagementTherearemanyvariationsofLoremIpsumavailable,butthemajorityhavesufferedTherearemanyvariationsofLorem

Ipsumavailable01项目特色展示TitleGoesHere

ofloremipsumavailable,butthemajorityhavesufferedTitleGoesHere

ofloremipsumavailable,butthemajorityhavesufferedalterationinsomeform,byinjectedhumour

randomizedTitleGoesHere

ofloremipsumavailable,butthemajorityhavesufferedTitleGoesHere

ofloremipsumavailable,butthemajorityhavesufferedTitleGoesHere

ofloremipsumavailable,butthemajorityhavesufferedTitleGoesHere

ofloremipsumavailable,butthemajorityhavesuffered01项目特色展示TitleGoesHereTherearemanyvariations

ofpassagesloremipsumavailable,butthemajoritysufferedalterationTitleGoesHereTherearemanyvariations

ofpassagesloremipsumavailable,butthemajoritysufferedalterationTitleGoesHereTherearemanyvariations

ofpassagesloremipsumavailable,butthemajoritysufferedalterationTitleGoesHereTherearemanyvariations

ofpassagesloremipsumavailable,butthemajoritysufferedalterationTitleGoesHereTherearemanyvariations

ofpassagesloremipsumavailable,butthemajoritysufferedalterationTitleGoesHereTherearemanyvariations

ofpassagesloremipsumavailable,butthemajoritysufferedalteration工作不足及提高★努力方向★工作效率★团队提高★扩展销售01[第四部分]PART0101团队成员介绍Portfolio1Loremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummyPortfolio2Loremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummyPortfolio3Loremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummyPortfolio4Loremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummy01团队成员介绍TitleGoesHere

Therearemanyvariationsofpassagesofloremipsumavailable,butthemajority亮亮图文旗舰店tobesure.TitleGoeshereTherearemanyvariationsofthemetotheheavenTwo50%TitleGoesHere

Therearemanyvariationsofpassagesofloremipsumavailable,butthemajorityhavesufferedalterationinsomeform,byinjectedhumourrandomizewordswhichdon'tlookevenslightlybelievable.IfyouaregoingtouseApassageofloremipsum,youneedtobesure.TitleGoeshereTherearemanyvariationsofthemetotheheavenTwo90%01团队成员介绍Loremipsumdolorsitamet,consecteturadipiscingelit.Curabiturelementumposuerepretium.Quisquenibhdolor,dignissimacdignissimut,luctusacurna.Aliquamaliquetnonmassaquistincidunt.Maurisullamcorperjustotristiqueduiposueretincidunt.Inneclacuslaoreetorcivariusimperdietsitametinaugue.ImprovementsLoremipsumdolorsitamet,consecteturadipiscingelit.PasswordsLoremipsumdolorsitamet,consecteturadipiscingelit.UploadsLoremipsumdolorsitamet,consecteturadipiscingelit.SupportLoremipsumdolorsitamet,consecteturadipiscingelit.NetworksLoremipsumdolorsitamet,consecteturadipiscingelit.01团队成员介绍

DetermineyourRealRewardIdentifyyourTriggerCreateaNewRoutineLoremipsumdolorsitamet,consecteturadipiscingelit.LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s.Step1Loremipsumdolorsitamet,consecteturadipiscingelit.LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s.Step2Loremipsumdolorsitamet,consecteturadipiscingelit.LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s.Step301团队成员介绍FinancialFamilySecureSafetyOURGOALSButallsunshinewithoutshade,allpleasurewithoutpain,isnotlifeatall.Takethelotofthehappiest-itisatangledyarn.Bereavementsandblessings,onefollowinganother,makeussadandblessedbyturns.Evendeathitselfmakeslifemoreloving.Butllsunshinewithoutshade,allpleasurewithoutpain,isnotlifeatall.itisatangledyarn.allsunshinewithoutshade,allpleasurewithoutpain,isnotlifeatall.Takethelotofthe.Bereavementsandblessings,one明年工作计划方向★营业额提升★团队扩大★管理提高★利益最大化01[第五部分]PART0101项目背景研究此处添加详细文本描述，建议与标题相关并符合整体语言风格2009此处添加详细文本描述，建议与标题相关并符合整体语言风格2010此处添加详细文本描述，建议与标题相关并符合整体语言风格2011此处添加详细文本描述，建议与标题相关并符合整体语言风格2012此处添加详细文本描述，建议与标题相关并符合整体语言风格2013此处添加详细文本描述，建议与标题相关并符合整体语言风格2014此处添加详细文本描述，建议与标题相关并符合整体语言风格201501项目背景研究您的内容打在这里，或者通过您的内容打在这里添加标题您的