网店美工实战情境二 电子教案中职.doc

情景二 手机套店铺的网店美工任务1 制定视觉设计方案教案活动（1） 制定手机套店铺视觉设计方案课题制定视觉设计方案课型理论课课时1教学目标知识目标1. 学会分析客户的身份特征和心理需求情况。2. 制定中高档手机套视觉设计方案 。技能目标1. 能够根据产品定位，分析顾客身份的特征和消费心理。2. 能够对视觉设计目标选择确定字体、色调等内容。3. 能够完成撰写手机套类网店的视觉设计方案。情感目标1. 培养学生对美的追求以及审美能力；2. 鼓励学生对色彩搭配的探索，提升学生学习兴趣。教学重点中高档手机套客户身份特征分析和心理分析教学难点确定配色基调教学内容一、客户群体定位与风格客户特征：美尔搭手机套定位为中高档品牌，主要客户群体为喜欢大方体面的商务人士，崇尚休闲的、时尚的、有个性的年轻人等，这些客户具有以下特征：25-45岁1.用于休闲娱乐的消费支出占其生活花费的比例相对较高 2.白领、企业主、公务员、自由职业者等3.对产品的质量要求高，如绿色环保，健康性等；4.对实用性要求高；5.对产品的时尚性和个性要求很高；二、客户群心理分析客户心理特征：1有品味、高素质、思想独立；2他们多交际、品味独特、不盲从不跟随；3追求生活质量和小资情调4思想前卫，追求时尚，易于接受新生事物，生活比较有品位；三、配色基调根据色彩的特性，不同的色彩能给人不同的感受。时尚的、休闲的 、个性的、文化的美尔搭手机套店将主色调定为驼色，辅助色调定为灰色和白色。四、字体选择字体尽量时尚大方，能突显本手机套产品个性的字体，如SteelFish常规、微软雅黑以及方正兰亭黑简体（方正系列字体可能存在版权问题，可以换成近似字体）。五、道具的选用为了更好展现手机套的个性和品味，在拍摄手机套产品图片时需要选择一些能衬托出产品特质的道具，比如笔记本、钢笔、毛刷、黑色反光板等物品。复习小结任务2 设计首页活动（1） 准备图片课题准备图片课型实操课课时2教学目标知识目标1. 了解首页图片选择要求；2. 了解手机套图片的处理步骤。技能目标学会对已经拍摄的手机套商品图片进行美化处理，常规的步骤有：去除杂质、抠图、修复、调色等。情感目标1. 培养学生耐心细致的做事态度；2. 培养学生对美的追求以及审美能力。教学重点手机套商品图片进行美化处理教学难点手机套商品图片进行美化处理教学内容一、图片选择商品的图片要选择尽量能清晰展示商品特征的全图。二、图片处理（讲练结合）使用Photoshop打开上面其中一张照片，可以看到照片手机套上有很多灰尘和一些小刮痕，色彩也不够理想，需要处理，具体操作如下：1. 去手机套上的灰尘和一些小刮痕。放大图片，看到需要修复的位置，使用污点修复画笔工具、修复画笔工具、修补工具，要使用到ATL键+修复画笔工具吸取要改变的样板，再在需要修复的位置涂抹，修补工具选取要修改的区域，拖动到想改成的样板地方，松开鼠标即可。使用这些工具时要注意“选项栏”的参数设置，才会达到最佳效果。2. 让手机套更与实物相近，调整色相/饱和度，曲线，分别按Ctrl+U和Ctrl+M，调出面板，设置参数。三、实操练习（学生操作）老师提供手机套的一些图片，学生按照上述方法完成任务手机套图片处理。复习小结活动（2） 设计PC端首页课题设计PC端首页课型理实一体课课时2教学目标知识目标1. 了解首页大致内容和结构。2. 了解全屏首页的基本要求。3. 了解店招的主要内容。技能目标1. 学会首页规划。2. 学会LOGO设计和店招制作。3. 学会规划手机套店铺的首页并完成制作。情感目标1. 培养学生耐心细致的做事态度。2. 培养学生对淘宝店铺首页设计大局观和全局意识。教学重点1.PC首页的规划。2.PC首页制作操作。教学难点PC首页的制作教学内容一、首页规划二、LOGO设计 LOGO使用MERDA英文全拼为设计基础，LOGO字体颜色设置为#E7AE02，字体和字号及各参数设置。三、店招设计店招本身只有120像素的高度，但是为了整体性，这次设计直接将店招和导航栏的30像素放在一起设计，也就是设计150像素的店招，操作步骤如下：步骤一：打开Photoshop，新建宽度为1920像素，高度7000像素的图片（高度也可以自己定，过高的部分可以在首页完成后去掉，高度不够也可以自行添加），图片名称为首页，填充背景色#F1EdE8。步骤二：添加150像素的水平参考线，新建图层，将图片顶端150像素高度的区域全部填充为淡刈(yì)安色，颜色代码为：#F1EdE8。 步骤三：划分导航栏区域。店招和导航栏一起设计完成，但在制作过程中还是要加以区分，新建120像素的水平参考线，两条参考线中间形成30像素的导航栏。在120像素和150像素的参考线上，选定这块30像素的区域，新建一个图层，把这块区域填充颜色为#A68A65。1.做好店招，宽度1920像素，高度120像素。2.制作导航栏，宽度1920像素，高度30 （制作这个要了解店铺内有什么产品）。四、海报制作第一个海报通常是最能吸引客户眼球的，通常用于店铺活动宣传或者店铺爆款商品推广。目前主流的PC设备的分辨率为1920×1080像素，即一屏的高度为1080像素，所以店招与海报总的高度最好不要超过1080像素。制作海报前，最好先建立海报组，海报所有图层放置在这个组内。第一幅海报操作步骤如下：步骤一：选定照片、美化商品照片。选定新品的手机套照片，并用PS去除照片的杂质。步骤二：加上装饰。打上数字7，然后再复制一层数字7， 把第二层数字7填充为白色，再调整位置就可以做到字体有阴影或者有立体感；打上“折起”文字。另外在图片的左下角加上美尔搭LOGO。五、热卖推荐热卖推荐板块设计放了四款颜色和款式比较流行的手机套，制作相对简单，但是商品要有一定的吸引力。把拍摄出来处理好的商品照片逐个添加在不同的层，调整好大小和位置，并打上想描述的文字。六、售后模块首页剩下的内容就是售后模块，完善一些售后服务和商品保障信息。这个模块制作比较简单，根据自己手机套商品的特点，并参考一些好卖家店铺在这模块的设计，制作出自己的售后模块，仅供参考。复习小结活动（3） 制作移动端首页课题制作移动端首页课型理实一体课课时1教学目标知识目标1. 了解移动端首页的基本要求；2. 了解移动端店招和导航栏的操作要求。技能目标1. 学会制作移动端店招；2. 学会将PC端首页调整为移动端首页。情感目标1. 培养学生举一反三的思维；2. 培养学生对移动端大局观和全局意识。教学重点1.移动端首页的规划；2.PC端首页调整为移动端首页的操作。教学难点PC端首页调整为移动端首页的操作教学内容一、 移动端首页规划 移动端首页采用类似PC端首页的设计风格。二、图片处理图片处理主要针对新的商品图片，常规的图片处理步骤包括：抠图、修复、去杂质等。美尔搭旗舰店使用红色和白色为店铺视觉设计的主色调，但已经拍摄完毕的商品图片基本都是有灰尘的，桌子也显得比较乱，但并非所有商品都需要抠图，所以本次图片处理的步骤为：处理背景修复。第一张图上处理步骤：背景处理使用Photoshop打开N17A9518图片，可以看到图片左右两边的背景都有一些痕迹，白色灰尘，桌子不够光滑，需要处理，具体操作如下：1.用多边形套索工具选出有灰尘的地方，这样是为了方便不影响其它地方。2.使用默认前景色（D），用画笔（B）进行涂抹。3.可以看到手机底部有许多划痕，影响美观，这时候使用钢笔工具勾选出来，因为手机是银色的，可以用渐变工具（G），金属-银色进行渐变，还有一些白色的划痕，可以使用仿制图章工具进行涂抹。第二张图上处理步骤：背景处理使用Photoshop打开N17A9533图片，可以看到手机壳里面有一些白色灰尘，显得不干净，桌子也是，需要处理，具体操作如下：1.用多边形套索工具选出桌子有灰尘的地方。2.使用默认前景色黑色（D），用画笔（B）进行涂抹3.可以看到手机壳里面有白色灰尘，如图4-35。，这时候可以用仿制图章工具（S）在周围选取一块干净的地方按alt键吸取，再到有灰尘的地方涂抹。还可以用吸管工具吸取颜色，用画笔工具进行涂抹，但这方法只能用来涂抹手机壳内的硬壳，涂抹外面的皮套会使它失去质感，少了纹路。 三、首页制作店招搭配红色和白色，显得十分简约。背景填充为驼色，把“创意、品味、高端”的品牌定位语做上去即可。导航区仅付费用户可更改底色，所以这里无法做任何处理，制作时可以直接留白。接着把制作好的海报图片放上去即可。移动端首页完成之后效果图如图。复习小结任务3 设计详情页活动（1） 规划详情页课题规划详情页课型理论课课时1教学目标知识目标了解手机套类商品详情页的内容技能目标规划详情页结构和内容情感目标培养学生大局观和全局意识教学重点规划详情页，确定详情页结构和内容教学难点规划详情页，确定详情页结构和内容教学内容详情页规划详情页设计遵循板式统一视觉设计方案，使用主色调定为驼色，辅助色调定为灰色和白色，呈现为“创意、品味、高端”。第一部分：宝贝多个款式展示。第二部分：宝贝外观细节展示。第三部分：列举选择本店宝贝的理由。 第四部分：列举产品优势，增强消费者购买信心。1、简易安装。 2、孔位精准。 3、超薄工艺。4、精致制造。 5、完美呵护。 6、信号无阻。7、后盖防摔耐磨。 8、色彩艳丽，不褪色。 9、坚强护盾。本次在商品详情页中没有加入关联营销，主要是为了增强消费者购物体验，也体现出对商品的自信。复习小结活动（2） 制作详情页课题制作详情页课型理论课课时3教学目标知识目标了解手机套相关商品知识技能目标能够按详情页规划完成详情页制作情感目标1. 培养学生制定计划、落实计划的意识；2. 培养学生对美的追求以及审美能力。教学重点按详情页规划完成详情页制作教学难点按详情页规划完成详情页制作教学内容一、图片准备准备详情页需要的商品图、场景图、图形符号等素材。二、制作详情页（讲练结合）步骤一：宝贝形象宝贝形象是详情页的第一张图片，这一张图传递的信息是整个详情页的基调，所以这里需要注意三个问题：第一，选对图片；第二，传递商品价值；第三，美观大方，与店铺整体风格一致。主要操作：1）新建画布，宽度750像素，高度可以设定在15000像素左右（也可以根据个人习惯自己设定，如果作图过程中图片刻度不够，可以通过画布大小增加高度，制作完成如果图片没有占用相应的像素，可以将多余的高度裁剪掉），填充背景色#d9d1c3。添加水平参考线，位置1080像素，控制宝贝形象图片高度，不能超过一屏的高度。2）导入手机壳图。考虑到整体美感和详情页篇幅，通过剪贴蒙版控制显示区域。3）添加文案。添加文字一方面可以对图片进行补充说明，另一方面也可以增强图片的美观度。这里主要使用了一种字体（微软雅黑），汉字“至尊独创 拒绝平壤”，英文为“The supreme original refused to mediocrity”，“For 华为mate9”，文字颜色为#636363，也可以选更暗点的颜色。顶部英文主要用作装饰，强化商品个性化，完成宝贝形象图的制作。 步骤二：产品外观通常详情页第二部分内容是产品外观展示，从不同角度展示产品外观。1）栏目标题。栏目标题的作用是为了方便消费者浏览，不需要过多的设计，直接在背景上输入中英文标题，加上一个色块即可。2）导入手机壳图。布局使用内外结构，外边为细节解释图，里边为商品正视图，根据视觉习惯，展示出完美的手机套造型。3）展示选择理由，让客户更有要买商品的欲望，展现与同行的优势所在。步骤三：产品优势（设计亮点）1）栏目标题。2）导入处理好的图片， 3）添加文案。设计亮点，完整描述文字，符合视觉设计风格。步骤四：整体检查，完成详情页详情页的各个部分已经完成，最后还需要整体浏览，确定详情页整体协调，没有瑕疵。三、移动端详情页跟首页相似，移动端详情页也可以用PC端修改完成，这里不再讲述移动端详情页制作，自己尝试制作移动端详情页的时候必须记住以下三点：1）字符必须在12点以上，否则会影响阅读；2）并排的图片最多三张，两张最好；3）图片或者文字比较密集的区域，如穿着场景、品牌故事和产品信息文字区都需要重新设计，图片最好均已模特展示图的方式排列，文字排列方式也应该做出相应该表。复习小结任务4 上传商品和详情页活动（1） 上传商品和详情页到电商平台课题上传商品和详情页到电商平台课型操作课课时1教学目标知识目标1. 了解电商平台主幅图要求。2. 了解商品上传的基本内容。技能目标1. 了解主幅图的制作方法。2. 了解商品上传的基本操作。3. 了解详情页上传的基本操作。情感目标1. 培养学生耐心细致的做事态度。2. 培养学生动手实践的意识。教学重点1. 电商平台关于上传商品和详情页相关知识；2. 上传商品和详情页相关操作。教学难点上传商品和详情页相关操作。教学内容一、设计主副图（讲练结合）1设计主图步骤一：打开图片，调整画布宽度，将画布调整为正方形，用内容识别的方式填充背景不足的区域。步骤二：图片处理。步骤三：裁剪。裁剪为700×700像素的图片。步骤四：添加其他内容。这里仅需要添加LOGO。2.设计辅图由于主图设计相对简洁，这里的辅图跟主图相比，仅少一个LOGO。3.设计最后一张图完整的商品图，换成白底。4.制作主图视频主图视频是用60秒的短视频替代原来的主图位置。二、上传商品（讲练结合）将商品主副图和详情页切片图上传到图片空间，在系统的提示下，完成商品上传。如果详情页存在关联营销、领取优惠券、搭配销售等有超链接的内容，可以用Dreamweaver或者用购买模板的方式完成。三、详情页上传1、进入装修后台，选择【店铺装修】-【页面】中的【宝贝详情页】。2、点击【模块】-【750】-加入【自定义】。3、将详情页切图上传即可。复习小结任务5 上传首页活动（1） 上传PC端首页课题上传PC端首页课型操作课课时1教学目标知识目标1. 了解淘宝网PC端首页装修的基本内容；2. 了解代码布局的基本功能；技能目标学会使用普通布局加代码上传淘宝PC端首页。情感目标1. 培养学生耐心细致的做事态度；2. 培养学生克服困难，解决问题的做事态度。教学重点使用普通布局加代码上传PC端首页。教学难点使用普通布局加代码上传PC端首页。教学内容一、订购旺铺智能版首先各位需要订购旺铺智能版才能够使用旺铺智能版1920模板进行店铺装修（现在一个钻以下商家智能版免费使用）。PC装修的1920模块是智能版专享功能，购买智能版后可使用该功能，使PC店铺显得更高端大气，提升消费者体验。二、淘宝旺铺智能版1920模板装修操作流程如下：1、 进入智能版后台，选择【电脑页面装修】-【模块】中的【1920】。2、 在店招区点击【编辑】后，选择“自定义招牌”，点击“插入图片空间图片”按钮选“店招”图片。3、 点击 “源码”按钮，为了把“店招”图片变成1920，做法与专业版加入代码，修改方法一样。4、 点击页面左则“页头”模块，背景选择“店招”图片，设置如图。5、 点击页面左则“模块”模块中的【1920】，选择“全屏宽”拖入右则顶上区域，点击【编辑】后，选择插入的海报图片(宽1920，高不大于540)，同时可以设置链接地址（也可以先省略）。但是这种设置方法有局限性，图片高于540就无法正常显示了。6、 解决方法可以用专业版的方法处理，在这加入自定义区，点击【编辑】后选择宽度为1920px，高度超过540的图片，然后点击左下角【编辑代码】，如图。7、 接下来的步骤就按照自己首页设计切割的模块进行对应装修即可。8、 装修完成后，点击页面右上角的【发布站点】按钮，就可以查看店铺首页了。注意设置：海报高度使用海报图片的高度值。海报间的缝隙可以先设置“”或者是“缝隙高度*除顶部海报外第几张图”。产品图片连接可以在店铺【素材中心】找到对应图片复制链接地址。产品连接地址海报想连接跳转的产品页。编辑完代码后要点击【确定】按钮。专业版:专业版要把原来宽度1920px的首页缩小设计成宽度950px。一、950px首页设计制作的方法：1、店招要设计成950px*150px，高度包括导航栏的30px，可以把1920px首页上面的元素逐个复制过去，调整好位置，但是不能一起直接复制过去按比例收缩，这样做不到想要的效果。2、除了店招部分以外，别的部分可以复制后按固定比例收缩成宽度为950px的元素，调整好位置，形成新的首页。3、用“切片工具”按照设计布局分割好首页，保存好图片，把图上传到“图片空间”的“素材中心”，以便装修店铺时使用。二、淘宝旺铺专业版950模板装修操作流程如下：1、进入装修后台，选择【电脑页面装修】-【模块】中的【950】，如图。2、按照装修设计的流程，分别加入店招、图片轮播区、自定义内容、悬浮导航等其他部分，并编辑各个区域，加入对应的图片即可。这里不再详细讲述。3、装修完成后，点击页面右上角的【发布站点】按钮，就可以查看店铺首页了。复习小结活动（2） 上传移动端首页课题上传移动端首页课型操作课课时1教学目标知识目标3. 了解淘宝网移动端首页装修的基本内容。4. 了解码普通上传移动端首页的基本流程。技能目标学会使用普通上传移动端首页。情感目标1. 培养学生耐心细致的做事态度；2. 培养学生克服困难，解决问题的做事态度。教学重点使用普通上传移动端首页。教学难点使用普通上传移动端首页。教学内容操作流程如下：用“切片工具”按照设计布局分割好首页，保存好图片，把图上传到“图片空间”的“素材中心”，以便装修店铺时使用。1、进入装修后台，选择【手机端装修】-【页面】-【手淘首页】-【装修页面】，如图。2、按照装修设计的流程，先添加店招背景图片，图片呈渐变显示，请在设计时注意整体效果，尺寸750X580、建议大小400K左右，图片格式JPG、JPEG、PNG，效果如图。3、添加海报模块，可以使用智能海报或者自定义内容模块进行海报上传，已经设计好的海报，尽量使用自定义模块上传海报效果好。切割图片时要注意，宽度和高度最大都是640PX，按照80PX的整数倍来切割，特别是高度，否则会不符合条件，添加不进来，如图。复习小结