项目9、10 装修店铺、综合案例 生鲜店铺设计与制作

网店美工：理论、案例与实训（全彩微课版）高等院校电子商务类新形态系列教材项目九装修店铺目录Contents任务一

图片切片与上传任务二

装修PC端店铺首页任务三

装修移动端店铺首页任务四

上传商品详情页任务一图片切片与上传网店美工在进行切片操作时，为了保证切片合理、位置精确，需要掌握一定的技巧。 一、图片切片的技巧（1）依靠参考线。通过拖动标尺为图片创建切片的参考线，网店美工在切片时，基于参考线创建的切片区域比直接手绘的切片区域更精确。（2）切片完整性。网店美工在切片时应尽量保证同一个内容的完整性，以免因操作或网速问题造成图片不能完整地被呈现出来。（3）切片存储的格式。网店美工在存储切片时，可单独为各个切片设置存储格式，一般情况下，色彩丰富、尺寸较大的切片，选用JPEG格式（也叫JPG格式）存储；尺寸较小、色彩单一和背景透明的切片，选用GIF或PNG-8格式存储；半透明、不规则以及圆角的切片，选用PNG-24格式存储。任务一图片切片与上传“简吉”家纺店铺决定装修首页，在装修前需要先对首页进行切片操作，并上传到图片空间，方便后期进行装修，其具体操作步骤如下。二、【课堂案例】——家纺店铺首页切片与上传213任务一图片切片与上传二、【课堂案例】——家纺店铺首页切片与上传546任务一图片切片与上传操作思路先对整个活动页添加参考线，添加的参考线要按照各个模块进行添加，方便后期装修，然后依照参考线进行切片并保存切片内容，最后将切片一并上传到图片空间。操作提示按照中秋活动页的页面内容进行切片操作；保存切片内容；将切片内容上传到图片空间。课堂练习：中秋活动页切片与上传目录Contents任务一

图片切片与上传任务二

装修PC端店铺首页任务三

装修移动端店铺首页任务四

上传商品详情页任务二装修PC端店铺首页模块是网店页面的基础组成部分，商品、页面的装修等都依托模块而存在，网店美工可通过模块装修首页。右图所示为“所有”栏下的基础模块，其中常用的模块有以下5种。一、认识装修基础模块（1）宝贝推荐。（2）宝贝排行。（3）图片轮播。（4）友情链接。（5）宝贝搜索。（6）自定义区。任务二装修PC端店铺首页“简吉”家纺店铺的首页设计在完成切片并上传到图片空间的操作后，即可使用模块进行首页各个部分的装修，在装修过程中可使用“自定义区”模块布局各部分，并通过“码工助手”转换源代码，具体操作步骤如下。二、【课堂案例】——使用模块装修店铺首页213任务二装修PC端店铺首页二、【课堂案例】——使用模块装修店铺首页5467任务二装修PC端店铺首页二、【课堂案例】——使用模块装修店铺首页981011任务二装修PC端店铺首页二、【课堂案例】——使用模块装修店铺首页13812任务二装修PC端店铺首页操作思路装修中秋活动页时可先对海报和优惠信息部分使用“热区+代码”的方式进行装修，然后再装修其他部分内容。操作提示选择并添加要装修的模块；复制图片链接；在码工助手中对热区添加链接，并转换为代码；使用代码装修活动页。课堂练习：装修中秋活动页目录Contents任务一图片切片与上传任务二装修PC端店铺首页任务三装修移动端店铺首页任务四上传商品详情页任务三装修移动端店铺首页一、认识移动端店铺首页模块移动端店铺首页与PC端店铺首页一样，各电商平台也为移动端店铺首页装修提供了模块，当下主流的移动端是手机端，这里以淘宝网手机端为例来介绍移动端店铺首页装修的模块。右图所示就是移动端店铺首页页面的模块以及装修后的页面，常用的模块包括以下5种。（1）文字标题。（2）轮播图海报。（3）单图海报。（4）多热区切图。（5）店铺优惠券。任务三装修移动端店铺首页“萍洁”店铺准备将制作的移动端首页装修到移动端店铺中，在装修前可先将商品图片上传到图片空间中，然后进行装修页面操作，具体操作步骤如下。二、【课堂案例】——使用模块装修移动端首页213任务三装修移动端店铺首页二、【课堂案例】——使用模块装修移动端首页546任务三装修移动端店铺首页二、【课堂案例】——使用模块装修移动端首页879任务三装修移动端店铺首页操作思路网店美工在装修移动端家具网店首页时，可添加“多热区切图”模块编辑首页内容，并分别对各个部分添加热点区域。操作提示添加单图海报模块并添加对应的商品图片和链接；添加“多热区切图”模块并添加素材和热区，完成家居网站首页的装修。课堂练习：装修移动端家具网店首页目录Contents任务一图片切片与上传任务二装修PC端店铺首页任务三装修移动端店铺首页任务四上传商品详情页任务四上传商品详情页一、商品详情页上传的注意事项（1）确定商品的类目及属性。商品的类目、属性也是引流的重要条件之一，网店美工需要在商品上架前确定商品的类目及属性。（2）确定必填内容。网店美工填写商品上架信息时，带“*”的类目属于必填类目，要保证填写的正确性，这关系到商品的属性展示，也会影响商品的后续引流。（3）确定信息是否与实物相符。网店美工填写的属性信息要与实物相符，若存在不符的情况，容易遭到消费者投诉。（4）坚持信息的原创性。网店美工应该坚决杜绝标题、图片以及商品详情页效果的复制，坚持信息发布的原创性，无论是标题、图片或详情页介绍都应牢牢结合商品特点并坚持原创，形成自己的店铺特色。任务四上传商品详情页“萍洁”店铺准备将制作完成后的茶杯移动端商品详情页进行上传，上传过程中需要先添加上传的主图，再根据提示输入商品的信息，并添加茶杯商品详情页图片，其具体操作步骤如下。二、【课堂案例】——上传茶杯商品详情页213任务四上传商品详情页二、【课堂案例】——上传茶杯商品详情页546任务四上传商品详情页操作思路整个上传过程可按照提示分别输入内容，其中带“*”的部分为必填内容。操作提示先上传主图；根据提示输入基础信息；添加商品详情页，完成后发布详情页。课堂练习：上传水蜜桃移动端商品详情页网店美工：理论、案例与实训（全彩微课版）高等院校电子商务类新形态系列教材项目十综合案例——生鲜店铺设计与制作目录Contents任务一

处理生鲜店铺素材任务二

制作生鲜店铺首页任务三

制作生鲜店铺商品详情页任务四

制作生鲜商品直通车推广图任务五

制作生鲜店铺主图短视频任务一处理生鲜店铺素材“鲜汁味鲜”是一家集采购、加工、销售农产品于一体的企业，其店铺的商品主要来自大山采摘和农民养殖，商品种类包括水果、蔬菜、海鲜水产、肉禽蛋类等，为加快企业品牌化升级，助推乡村产业振兴，“鲜汁味鲜”生鲜店铺计划上新某地区的标志农产品——海参和虾，并准备将这两件商品分别展现在首页的店招、海报和商品促销页面中，现需处理海参和虾的商品图片，方便后期制作时使用。完成后的参考效果如右图所示。任务一处理生鲜店铺素材观察所有提供的素材，其中海参、虾商品图片有明显的问题，网店美工需要进行分析和处理。一、制作思路（1）处理海参商品图片。打开拍摄的海参商品图片，如右图所示，可发现商品图片呈现灰底效果，若是运用到海报中则显得单调，而店招不需要过多背景，此时可抠取海参商品图片并删除背景，方便制作店招和海报时调用。（2）处理虾商品图片。查看拍摄的虾商品图片，如左图所示，可发现该商品图片存在颜色过暗、偏色、主体对比不够明显等问题，因此网店美工需要先修饰该商品图片，恢复商品本身的颜色，可使用【亮度/对比度】【曲线】【色相/饱和度】和【色阶】等命令，调整商品图片的颜色。任务一处理生鲜店铺素材根据制作思路，网店美工分别进行抠取海参商品图片和调整虾商品图片色调的操作。二、设计实施1．处理海参商品图片1234任务一处理生鲜店铺素材根据制作思路，网店美工分别进行抠取海参商品图片和调整虾商品图片色调的操作。二、设计实施2．调整虾商品图片色调123456目录Contents任务一处理生鲜店铺素材任务二制作生鲜店铺首页任务三

制作生鲜店铺商品详情页任务四

制作生鲜商品直通车推广图任务五

制作生鲜店铺主图短视频任务二制作生鲜店铺首页“鲜汁味鲜”生鲜店铺计划重新设计店铺首页，要求完成后的效果要体现春天的清新，具有自然、和谐之感，其整个首页布局要包括店招、海报、优惠券、商品推荐模块，页面要简洁美观，并且要使用处理好的店铺素材。完成后的参考效果如右图所示。任务二制作生鲜店铺首页网店美工在进行案例设计前需要先对制作思路进行梳理，方便设计。一、制作思路（1）色彩选择和风格定位。为了体现健康、绿色的特点，网店美工在色彩选择上可以绿色和白色为主色，使整个首页的色调更加统一。为了凸显商品内容，在风格选择上则以简约风格为主，通过简单的图文搭配体现店铺内容。（2）页面的布局。根据内容的展现顺序，网店美工可以将首页分为店招与导航、海报、优惠券、商品推荐4个部分。设计店招与导航时，网店美工可在其中体现品牌信息、上新商品、热卖商品和优惠信息，以吸引消费者。任务二制作生鲜店铺首页根据案例分析的思路，网店美工依次对以下4个部分进行设计。二、设计实施1．设计店招与导航12345任务二制作生鲜店铺首页根据案例分析的思路，网店美工依次对以下4个部分进行设计。二、设计实施2．设计海报123任务二制作生鲜店铺首页根据案例分析的思路，网店美工依次对以下4个部分进行设计。二、设计实施3．设计优惠券123任务二制作生鲜店铺首页根据案例分析的思路，网店美工依次对以下4个部分进行设计。二、设计实施4．设计商品推荐1243目录Contents任务一处理生鲜店铺素材任务二制作生鲜店铺首页任务三制作生鲜店铺商品详情页任务四

制作生鲜商品直通车推广图任务五

制作生鲜店铺主图短视频任务三制作生鲜店铺商品详情页“鲜汁味鲜”生鲜店铺最近上新一款牛奶草莓商品，为了提高销量，需要对该商品设计商品详情页，由于PC端和移动端的商品详情页的宽度均为750像素，为了便于使用，这里直接采用同一版式进行设计。商品详情页完成后的参考效果如右图所示。任务三制作生鲜店铺商品详情页为了展示牛奶草莓的卖点，网店美工可将商品详情页按照以下4个思路进行制作。一、制作思路（1）焦点图。焦点图设计时可选择具有创意构思的商品图，并配上卖点文字“能够吃出奶香味的牛奶草莓”，体现了味美的特点。（2）卖点说明图。卖点说明图设计时主要对商品的基本信息进行介绍，并通过图文搭配的方式，体现商品卖点。（4）商品售后。其主要对商品的售后问题进行说明，如快递、大小、重量、售后范围等，方便消费者选购商品。（3）实拍图。其主要通过实拍的方式展示草莓的“香”“甜”卖点，展示时可采用图文结合的方式。任务三制作生鲜店铺商品详情页根据案例分析的思路，按照焦点图、卖点说明图、实拍图、商品售后的顺序进行设计。二、设计实施1234任务三制作生鲜店铺商品详情页二、设计实施5678任务三制作生鲜店铺商品详情页二、设计实施9101112目录Contents任务一处理生鲜店铺素材任务二制作生鲜店铺首页任务三制作生鲜店铺商品详情页任务四制作生鲜商品直通车推广图任务五

制作生鲜店铺主图短视频任务四制作生鲜商品直通车推广图鲜汁味鲜”生鲜店铺准备为一款千禧果商品制作直通车推广图，方便进行商品推广和店铺引流。直通车推广图完成后的参考效果如右图所示。任务四制作生鲜商品直通车推广图为了达到推广的目的，网店美工在设计直通车推广图前，可先规划设计并布局内容，避免完成后的效果不够美观。一、制作思路（1）设计规划。为了使直通车推广图效果更显著，在素材选择上可选择千禧果的食用场景作为背景。制作直通车推广图的目的是引流，因此卖点的体现是制作直通车推广图的目的是引流，因此卖点的体现是设计的重点，经过分析发现“营养丰富”“坏果包赔”“原产地直发”是引流的关键，在设计时可添加“酸甜多汁营养丰富”等文字展示千禧果的卖点。（2）内容布局。为了避免文字遮挡商品，网店美工在设计时可结合上下构图和左右构图，在画面左上角输入