网店美工实战教程第5章装修店铺首课件

第5章装修店铺首页网店美工实战教程（全彩微课版）5.1店招的制作内容导航5.2导航条的设置5.3轮播模块的制作5.4分类引导模块的制作5.5宝贝陈列展示区的制作5.6页尾模块的的制作5.7综合实训5.1店招的制作店招是店铺的招牌，是店铺品牌展示的窗口，也是买家对店铺第一印象的主要来源。鲜明有特色的店招对于卖家店铺形成品牌和产品定位具有不可替代的作用。5.1.1店招的设计原则与要求（1）在店招中注入自己的品牌形象（店铺名称或者产品图片）。（2）结合产品进行定位，让买家清楚直观地看到店铺出售的是什么商品。1.设计原则（1）常规店招：旺铺专业版店招，宽度尺寸为950像素，高度尺寸不超过120像素，可以上传GIF、JPG、JPEG和PNG这4种图片格式。（2）通栏店招：1920×150像素，其大小不可以超过200KB。2.设计要求5.1.2制作常规店招1.复制并旋转图层2.擦除书包的边缘为“daisy帆布小店”淘宝网店制作常规店招，设计中加入小雏菊的元素，并放置帆布包产品图使店名与产品图片相结合。5.1.2制作常规店招3.输入店铺名称和促销文字4.绘制渐变色彩5.擦除渐变色块右端5.1.2制作常规店招6.输入文字7.绘制圆形8.添加花朵素材5.1.3制作通栏店招制作“旅行包”的店招，包括店铺名称、旅行包图样、导航条和收藏模块。1.填充颜色并设置参考线2.绘制样式3.输入收藏文字4.设置投影样式5.1.3制作通栏店招5.绘制圆角矩形6.添加文字素材7.设置文字样式8.添加素材并输入文字5.1.3制作通栏店招9.设置渐变叠加效果10.绘制直线并输入文字11.通栏店招效果5.1.4上传店招效果将1920像素的店招保存为“.jpg”格式，在店铺装修页面中的“背景设置”栏中选择“页头”选项卡，单击“更换图片”按钮，将保存的jpg图片上传到页面中，此时通栏店招将显示在店招的位置。5.1店招的制作内容导航5.2导航条的设置5.3轮播模块的制作5.4分类引导模块的制作5.5宝贝陈列展示区的制作5.6页尾模块的的制作5.7综合实训5.2导航条的设置导航条位于店招下方，主要为了方便买家从一个页面跳转到另一个页面，查看店铺各类商品及信息。常规店招中的导航栏不需用户自己设计，只要在店铺的分类管理中进行设置即可。5.2.1在导航条中添加分类（1）进入“店铺装修”页面。（2）单击导航条右上角的“编辑”按钮。（3）打开“导航”对话框。（4）单击“导航设置”中的“添加”按钮。（5）打开“添加导航内容”对话框。（6）选择需要的产品分类。（7）单击“确定”按钮。（8）返回“导航”对话框。（9）单击“确定”按钮。5.2.2自定义导航条页面1.打开“添加导航内容”对话框2.打开“新建页面”页面5.2.3管理导航条内容1.调整导航条顺序2.删除多余的导航条5.1店招的制作内容导航5.2导航条的设置5.3轮播模块的制作5.4分类引导模块的制作5.5宝贝陈列展示区的制作5.6页尾模块的的制作5.7综合实训5.3轮播模块的制作轮播模块是店铺中重要的部分，卖家不仅可以通过轮播模块缩短页面的长度，还可以重点强调主推商品，起到促销的作用。5.3.1轮播图片的尺寸要求轮播图一般位于导航的下方，常需要占用较大的面积，是顾客进入店铺首页中看到最醒目的区域，使用轮播图不仅能更好表现本店铺的商品，还能提高顾客的好感度。轮播图的尺寸要求与店铺布局紧密相关，淘宝系统轮播模块的高度在100像素至600像素以内（包括100像素和600像素），宽度分为750和1920像素两种，其中通栏轮播图为750像素，主要通过插入模块进行添加；全屏轮播的1920像素则与店招一样，其图片的显示效果则需要在中间进行显示，其装修需要通过代码完成。5.3.2轮播图片的视觉要点主题：通过产品和文字描述来体现，放在海报第一视觉点，并根据产品和活动选择合适的背景。文案字体不超过3种，稍大或个性化。构图：左右构图、左中右三分构图、上下构图、底面构图、斜切构图。配色：色调统一，重要文字信息用突出醒目颜色强调，背景色统一，避免颜色太多。5.3.3制作轮播图片制作旅行包海报1.填充颜色2.添加素材3.设置图层样式4.添加水花素材5.3.3制作轮播图片5.添加灰色图层6.添加文字5.3.3制作轮播图片7.设置字体的图层样式8.添加文字9.绘制矩形和直线5.3.4上传轮播图片将旅行包海报上传至图片空间中1.添加“自定义”模块2.打开码工助手界面5.3.4上传轮播图片3.复制图片链接4.生成轮播图的代码5.3.4上传轮播图片5.粘贴生成的代码6.轮播图效果5.1店招的制作内容导航5.2导航条的设置5.3轮播模块的制作5.4分类引导模块的制作5.5宝贝陈列展示区的制作5.6页尾模块的的制作5.7综合实训5.4分类引导模块的制作分类引导模块一般位于左侧或轮播图下面，与前面学习的导航条不同，该模块主要用于显示不同类型的产品，是引导顾客购买的重要模块，而该模块的系统自带模块比较单一，若想制作更加美观的模块，可根据店铺的活动和特色等进行不同的分类。5.4.1制作分类引导模块制作分类引导模块，包括户外背包、服装、配件、鞋袜和骑行产品1.绘制圆2.绘制圆与箭头5.4.1制作分类引导模块3.输入文字并创建新组4.复制图像5.拖动素材到对应的圆圈中5.4.2上传分类引导模块将“旅行包分类引导.gif”上传到图片空间1.复制图片的链接2.单击“在线布局”超链接5.4.2上传分类引导模块3.设置“模块属性”4.添加热区5.4.2上传分类引导模块5.生成其他热区6.导出代码5.4.2上传分类引导模块7.粘贴复制的代码8.查看跳转页面5.1店招的制作内容导航5.2导航条的设置5.3轮播模块的制作5.4分类引导模块的制作5.5宝贝陈列展示区的制作5.6页尾模块的的制作5.7综合实训5.5宝贝陈列展示区的制作宝贝陈列展示区是首页中最重要的模块，其中不但包含了主推产品的图片和基本信息，还包括宝贝的卖点。5.5.1制作宝贝陈列展示图制作宝贝陈列图，并在其中添加宝贝图片。1.绘制辅助线2.绘制矩形3.绘制三角形4.输入文字5.5.1制作宝贝陈列展示图5.输入文字并绘制直线6.设置渐变叠加和投影7.添加参考线并调整图片5.5.1制作宝贝陈列展示图8.添加图片并为图片描边9.绘制两个矩形并填充不同颜色10.绘制箭头并复制绘制的图形5.5.1制作宝贝陈列展示图11.输入描述文字12.宝贝陈列展示图效果5.5.2上传宝贝陈列展示图1.编辑模块热点2.上传宝贝展示图5.1店招的制作内容导航5.2导航条的设置5.3轮播模块的制作5.4分类引导模块的制作5.5宝贝陈列展示区的制作5.6页尾模块的的制作5.7综合实训5.6页尾模块的制作页尾模块位于店铺首页的最底部，是页面装修的最后一个环节，该区域灵活性很大，而且很多卖家在装修时往往会忽略该部分。要制作一个完整的首页，页尾也不可缺少。5.6.1页尾的设计要点设计要点店铺底部导航收藏和分享店铺旺旺客服返回顶部温馨提示154325.6.2制作并装修页尾1.添加描边2.绘制圆3.输入文字并绘制矩形5.6.2制作并装修页尾4.制作折角5.输入文字并绘制直线6.完成页尾的制作5.6.2制作并装修页尾7.复制代码8.查看上传页尾后的效果5.1店招的制作内容导航5.2导航条的设置5.3轮播模块的制作5.4分类引导模块的制作5.5宝贝陈列展示区的制作5.6页尾模块的的制作5.7综合实训5.7.1制作淑女装店招店招作为店铺的门面，要想从店招中体现店铺的内容，需从颜色、店铺主体和设计感中进行传达。该店铺主要出售淑女型的女装，需要从服装和装修风格中体现出该店铺的淑女气质，店铺中主要采用淡淡的粉绿、个性的图块、以及代表性的文字，并加上具有淑女气质的铁艺样式，体现女性的柔美，让店招与产品相符，从而对店铺的特色进行表达。5.7.1制作淑女装店招1.设计思路既联系又区别（1）为了体现店铺“淑女”的特点，背景主要采用浅绿色，搭配深绿、白色的色块让画面整洁又不失柔和，既体现了店铺的风格，又表现了女性的柔美。（2）使用欧美的铁艺线条，该线条圆润，体现了女性的柔美，由于在欧美装修中铁艺常常用于田园系的装修，而这里运用铁艺恰好体现了店铺女装的田园风格。（3）采用圆形等柔美图形，对店名和收藏等文字进行编写，进一步对购买者的性别和风格进行体现。5.7.1制作淑女装店招使用“矩形选框工具”“油漆桶工具”绘制并填充导航条，这是店招的第一步，不但规划了店招的大小，还对主体色调进行了体现。使用“椭圆工具”和“横排文字工具”对收藏版块进行了制作，该版块中主要使用两个圆的重叠，加上圆润的文字，体现女装的柔美。使用“椭圆工具”和“横排文字工具”对店铺的店名进行美化和体现，这里的店名主要采用较可爱的空心字体，通过下面底纹的起伏，在文字中间显示不同的效果。使用“画笔工具”和素材文件对导航条进行绘制，再在其上添加铁艺素材，体现田园风格，最后在其上输入导航内容。2.知识要点5.7.1制作淑女装店招1.填充颜色并添加参考线2.添加并填充圆的颜色3.输入文字“藏”4.绘制椭圆5.将图形液化6.输入其他文字3.操作步骤5.7.1制作淑女装店招7.设置笔画参数8.添加铁艺线条9.输入导航文字10.店招效果5.7.2制作休闲鞋新品促销海报制作一款休闲鞋的新品促销海报，因为该宝贝属于初春新品，因此主打“清新”的风格，在制作该海报时，通过嫩绿的树叶，滚动的水珠进行产品的装饰，并添加不同颜色的休闲鞋，体现休闲鞋简单、舒适的特点。再通过流动的星光，以及鲜亮的文字，让初春的气息铺满整张海报，让人眼前一亮。在制作时，将促销信息的颜色设置为渐变显示，以突出促销卖点。5.7.2制作休闲鞋新品促销海报（1）因为是春季新品，因此背景的主色调主要采用嫩绿色，因为嫩绿色代表清新自然，能够给人带来一种初春的气息。再通过嫩绿的树叶、流动的水珠，把春天带入到海报中，烘托休闲鞋清新、透气的特点。（2）使用简单清新的文字描述，让促销信息、休闲鞋与嫩绿的背景相结合，让清新感从文字和背景中得到升华，从而为休闲鞋的清新透气起到承上启下的作用。1.设计思路5.7.2制作休闲鞋新品促销海报2.知识要点（1）添加背景素材，并在休闲鞋的下方使用“套索工具”绘制阴影，并模糊显示，让休闲鞋的阴影过过渡的更加自然。（2）使用“多边形工具”“横排文字工具”绘制多边形并添加渐变颜色，完成后在其上输入文字，并设置文字的渐变填充，实现文字与背景的统一。5.7.2制作休闲鞋新品促销海报1.填充颜色并添加参考线2.对图像添加投影3.绘制路径并填充颜色3.操作步骤5.7.2制作休闲鞋新品促销海报4.模糊并擦除部分阴影5.添加水珠和叶子6.设置文字的渐变颜色7.输入其他文字5.7.2制作休闲鞋新品促销海报8.绘制多边形9.输入文字并绘制形状10.输入特价信息课后习题（1）