《网店美工实战》情境一-电子教案.doc

1、情境一 玩具类店铺的网店美工任务1 制定视觉设计方案教案活动（1） 制定玩具类店铺视觉设计方案课题制定视觉设计方案课型理论课课时1教学目标知识目标1. 理解玩具类客户群体的特征和消费心理；2. 理解配色、字体、模特图对应的视觉传递效果。技能目标1. 能够根据产品定位，分析顾客的特征和消费心理；2. 能够视觉设计目标选择配色、字体、模特图；3. 能够完成撰写玩具类网店的视觉设计方案。情感目标1. 培养学生对美的追求以及审美能力；2. 鼓励学生对颜色的探索，提升学生学习兴趣。教学重点儿童玩具类客户特征分析和心理分析教学难点确定配色基调教学内容一、客户群体定位与风格客户特征：1.对孩子爱护有加；2.

2、相对于价格，更注重玩具质量和款式；二、客户群心理分析客户心理特征：1.高品质消费心理；2.对质量和安全性很注重；3.对品牌氛围有一定要求。三、配色基调主色调：玫红色，辅助色：粉红色、蓝色和白色四、字体选择微软雅黑以及方正兰亭黑简体五、模特形象选择模特以彩虹宝宝只能玩偶为主体，突出童真。复习小结任务2 设计首页活动（1） 准备图片课题准备图片课型实操课课时2教学目标知识目标1. 了解首页图片选择要求；2. 了解玩具图片的处理步骤。技能目标学会玩具图片的基本操作：包括抠图瑕疵修复调色增加质感等内容。情感目标1. 培养学生耐心细致的做事态度；2. 培养学生对美的追求以及审美能力。教学重点玩具图片处理

3、教学难点玩具图处理教学内容一、图片选择不仅仅选择了适合制作海报的露露商品图片，还选择了“露露”智能玩偶的部分场景图，如撑着雨伞和抱着小熊的图片。二、 图片处理（讲练结合）步骤一：抠图使用Photoshop打开“露露”拍摄图，由于玩具涉及毛发因此我们需要在保留毛发细节的前提下把主背景抠除掉。步骤二：瑕疵修复。放大图片，看到需要修复的位置，使用污点修复画笔工具，在需要修复的位置涂抹，松开鼠标即可。步骤三：调色儿童玩具强调色彩活泼明快，由于商品拍摄灯光照射整体色调偏白偏灰，因此需要对商品进行色彩校正处理。步骤四：增加质感提升质感主要通过高反差保留操作，强化图片轮廓。三、实操练习（学生操作）老师提供模

4、特图片，学生按照上述方法完成任务模特处理。复习小结活动（2） 设计PC端首页课题设计PC端首页课型理实一体课课时2教学目标知识目标了解首页大致内容和结构；了解店招的主要内容。技能目标学会钢笔工具的使用；学会利用图片素材营造氛围；学会规划玩具店铺的首页并完成制作。情感目标培养学生耐心细致的做事态度；培养学生大局观和全局意识。教学重点1.首页的规划；2.首页制作操作教学难点首页的制作教学内容一、 首页规划“彩虹宝宝智能玩偶”店铺主打儿童智能玩具，我们应该体现“童真”“智能”“陪伴”等品牌形象，用粉红、天蓝等颜色突出俏皮可爱的特征。二、 店招设计（讲练结合）步骤一：设置背景。打开Photoshop，

5、新建宽度为950px，高度120px的图片，图片名称为店招。用渐变工具填充背景，并将准备的素材粉红色太阳花等放入合适位置。步骤二：添加logo及店铺名称。添加logo及店铺名称。将公司的logo添加到左上方，店铺名称采用微软雅黑字体，设置字体大小为35，颜色为（19b1e9）为了体现店铺的品牌特征。我们选定“快乐成长，智能陪伴”作为店铺的宣传语，采用灰色字放在店铺名称下面，最后用图形工具绘制收藏按钮。步骤三：添加主推商品。我们将主打产品“露露”用剪贴蒙版工具并适当添加投影。三、 制作轮播海报（讲练结合）步骤一：设计海报背景。为体现店铺定位的童趣，我们采用天蓝色（b6e3f8）和浅粉色（fdc8

6、d1）两种颜色为基调，如图1-16所示，我们用钢笔工具勾勒出曲线，划分出模块，曲线也使得页面更为活泼。在粉色的模块，我们用大小不一白色的色块作为底纹，增加图形的立体感和高级感。步骤二：通过前面的步骤，我们处理了拍摄原图，在处理好的图片中筛选一到两张作为备用。步骤三：把选好的“露露”图片放在画面左右两边。步骤四：在画面正中间输入文字“玩具总动员，全场7折起”，采用卡通俏皮一点的字体，颜色选择和背景同色系的深粉色（f9667f）最后对素材、图片背景进行调，让其融合更有整体性，并添加小熊素材，进一步增加画面的可爱属性。四添加优惠信息和推荐商品 在淘宝店铺中，商品默认的商品推荐模块，只需要按照要求设置

7、宝贝数量，排序方式，价格范围等等信息，商品会自动被抓取到前台进行展示复习小结活动（3） 制作移动端首页课题制作移动端首页课型理实一体课课时1教学目标知识目标1. 了解移动端首页的基本要求；2. 了解移动端店招和导航栏的操作要求。技能目标1. 学会制作移动端店招；2. 学会将PC端首页调整为移动端首页。情感目标1. 培养学生举一反三的思维；2. 培养学生大局观和全局意识。教学重点1.移动端首页的规划；2.PC端首页调整为移动端首页的操作。教学难点PC端首页调整为移动端首页的操作教学内容一、 制作移动端店招把模特图作为简单背景底图来使用，不仅迎合了店铺的销售气氛，也能让消费者在第一时间了解店铺中的

8、主营商品。移动端店铺店招底图选择一张背景图片，搭配上简洁的文字描述，并很好地控制了图片与文字色彩的对比度，让消费者可以清晰地阅读文字。二、制作优惠券模块在优惠券上添加“立即领取”按钮之类的视觉元素，可以在一定程度上左右消费者的点击行为，相对于没有明显按钮引导的优惠券版块而言，有按钮引导更具操作的提示感，有利于引导消费者的参与行为。这里我们采用双列图片模块添加5元和15元的优惠券，可以根据PC端首页的优惠券模块更改，图片大小设置为351px*150px。三、制作商品推荐模块PC端首页我们将“露露”这款产品制作成了海报，在移动端页面进行商品展示的时候我们尽可能要用最少的文字和有视觉冲击力的图片，这

9、样更符合移动端的阅读习惯。 复习小结任务3 设计详情页活动（1） 规划详情页课题规划详情页课型理论课课时1教学目标知识目标了解玩具类商品详情页的内容技能目标规划详情页结构和内容情感目标培养学生大局观和全局意识教学重点规划详情页，确定详情页结构和内容教学难点规划详情页，确定详情页结构和内容教学内容详情页的描述基本遵循以下顺序：引发兴趣 激发潜在需求 赢得消费信任 替客户做决定。特别要注意的是，由于客户不能真实体验产品，我们宝贝详情页是要打消买家顾虑，从客户的角度出发，关注最重要的几个方面，并不断强化，告诉顾客我是做这个的专家，我很值得信赖，买家买了都说好，正好店铺有活动，现在下单价格最优。一般而

10、言，详情页面包含以下几个方面：1、创意情景海报。最开始的大图是视觉的焦点，背景应该采用能够展示品牌调性及产品特色的意境图，可以第一时间吸引买家。2、宝贝卖点。根据FAB法则排序，F特性A作用B好处。产品有哪些与众不同的地方，有什么作用，能给顾客带来什么好处。3、宝贝规格、参数。比如服装类就可以附上尺码参照表。4、模特全方位展示。5、细节展示。6、包装展示。7、店铺、产品资历证书，以及品牌门店、车间展示。以此烘托出店铺的实力。8、售后保障、物流说明。解决顾客未知已知的各种问题，消除顾客最后的担忧。复习小结活动（2） 制作详情页课题制作详情页课型理论课课时3教学目标知识目标了解玩具相关商品知识技能

11、目标能够按详情页规划完成详情页制作情感目标1. 培养学生制定计划、落实计划的意识；2. 培养学生对美的追求以及审美能力。教学重点按详情页规划完成详情页制作教学难点按详情页规划完成详情页制作教学内容一、创意情境海报制作用户购买宝贝最主要看的就是宝贝展示的部分，在这里需要让客户对宝贝有一个直观的感觉。这一张图传递的信息是整个详情页的基调，所以这里需要注意三个问题：第一，选对图片；第二，传递商品价值；第三，美观大方，与店铺整体风格一致。本次选用的商品“露露”本身就是一个比较出名的IP，因此制作时候可以借助“彩虹宝宝”的影响力。二、 宝贝参数、卖点图制作1）人物介绍部分步骤一：背景制作。新建图层，选择

12、路径工具绘制波浪线图形，此步骤可以借用形状工具内的相似图形进行组合。补充绘制矩形，整体高度控制在630像素，图形填充颜色（f58ea0）。为了让效果更佳丰富可多复制一层，调整半透明状态放于底层。步骤二：添加文字说明。添加圆角矩形形状图层，半径为30像素，颜色为白色。导入露露素材，并缩小放在相应位置。下行添加文案内容，文字选用幼圆字体，字号23像素，加粗，颜色为（411f00）。同一方法制作另一组人物说明。2）功能说明部分步骤一：格线。选择：视图-显示-网格，作为参考。由于打开的是默认网格，因此需要进行参数修改。选择：编辑-首选项-参考线和网格、切片，设置网格线间隔：1.5厘米；子网格：1。步骤

13、二：直线条工具，类型为像素，颜色（f58ea0） 根据网格参考线画出格子，画完后将参考线关闭即可。步骤三：绘制波浪形形状，这步和之前绘制的步骤类似，也可直接复制，进行水平翻转得到。步骤四：导入露露素材，选择圆角矩形工具，类型为形状图层，半径60像素，固定大小：675*835，适当添加投影。素材放于露露素材下方。步骤五：添加文案。图中有两项文案内容：露露标题、卖点说明。3）产品参数部分 步骤一：添加产品参数说明文字。整体高度控制在460像素左右，字体用到了黑体，加粗显示；幼圆体，字体颜色(6c3020)。利用标尺和文本框工具让内容更整齐显示。步骤二:制作“产品规格展示”导航。用圆角矩形，颜色（6

14、5d2cf）。文字中文字体：幼圆；英文字体：Reeji，颜色（a4a4a4）。并将其打组。三、 细节展示图制作步骤一：标题制作，可利用“产品细节展示文案”进行复制更改绘制6个圆角矩形工具，排列两行。导入素材，放于圆角矩形之上，利用剪贴蒙版将素材制作成圆角的形状。步骤二：同样方法完成其他。并添加内容信息，字体选黑体，幼圆字号25像素。步骤三：制作配件显示，具体方法与上一步内容相似。复习小结任务4 上传商品活动（1） 上传商品到电商平台课题上传商品到电商平台课型操作课课时1教学目标知识目标1. 了解电商平台主副图要求；2. 了解商品上传的基本内容。技能目标1. 了解主副图的制作方法；2. 了解商品

15、上传的基本操作。情感目标1. 培养学生耐心细致的做事态度；2. 培养学生动手实践的意识。教学重点1. 电商平台关于上传商品相关知识；2. 上传商品相关操作。教学难点上传商品相关操作。教学内容一、设计主副图（讲练结合）1设计主图步骤一：打开图片，调整画布宽度，将画布调整为正方形，用内容识别的方式填充背景不足的区域。步骤二：图片处理，抠图修复修型质感调色等几个步骤。步骤三：裁剪。裁剪为700700像素的图片。步骤四：添加其他内容。这里仅需要添加LOGO。2.设计辅图由于主图设计相对简洁，这里的辅图跟主图相比，仅少一个LOGO。3.设计最后一张图完整的商品图，换成白底。二、上传商品（讲练结合）将商品

16、主副图和详情页切片图上传到图片空间，在系统的提示下，完成商品上传。如果详情页存在关联营销、领取优惠券、搭配销售等有超链接的内容，可以用Dreamweaver或者用购买模板的方式完成。复习小结任务5 上传首页活动（1） 上传PC端首页课题上传PC端首页课型操作课课时1教学目标知识目标1. 了解淘宝网PC端首页装修的基本内容；技能目标熟悉和熟练使用淘宝后台操作。情感目标1. 培养学生耐心细致的做事态度；2. 培养学生克服困难，解决问题的做事态度。教学重点上传PC端首页。教学难点上传PC端首页。教学内容1.上传店招（讲练结合）步骤一：登录淘宝店铺，进入“卖家中心”，进入“店铺管理页面”步骤二:选择“

17、pc端”“首页”“装修页面”步骤三：上传店招， 2.上传轮播海报（讲练结合）步骤一：进入淘宝“店铺管理页面”，选择“全屏轮播”模块。步骤二：点击轮播模板中的编辑按钮，选择需要上传的轮播海报即可。步骤三：添加链接。如需为海报添加链接，可在上传页面中选择海报需要链接的一个商品，或者直接输入商品链接，在轮播模块中默认两个轮播图，即画布1和画布2，可以根据实际需要添加画布数量。3.首页其他部分上传（讲练结合）复习小结活动（2） 上传移动端首页课题上传移动端首页课型操作课课时1教学目标知识目标了解淘宝网移动端首页装修的基本内容；技能目标学会上传淘宝移动端首页。情感目标1. 培养学生耐心细致的做事态度；2

18、. 培养学生克服困难，解决问题的做事态度。教学重点上传移动端首页。教学难点上传移动端首页。教学内容一.移动端首页（讲练结合）步骤一：登录淘宝店铺，进入“卖家中心”，进入“店铺管理页面”步骤二: 选择“手机端”“首页”“装修页面”步骤三：选择模板，点击“使用模板”即可步骤四：上传手机端店招。点击店招模块，点击右上角的设置按钮，点击“上传店招”步骤五：把设计好的店招上传到图片空间，这样就顺利地把店招上传到手机端的模块中。步骤六：上传手机端轮播广告。手机端上传轮播广告和店招相似“选择模块”“设计”“上传”。步骤七：链接设置。点击轮播模块进入设置功能，在对应的缩略图右边输入一个链接地址即可。有多少个轮播图就输入多少个链接，轮播图和链接是一一对应的，输完后点击“保存”按钮即可步骤八：完成首页上传。移动端店铺的各模块上传与操作与以上两项的设置相似，这里就不一一介绍，读者可以多加练习，掌握更多模块的使用技巧，这样工作起来就更能得心应手复习小结