资源简介 情景二 手机套店铺的网店美工任务1 制定视觉设计方案教案活动(1) 制定手机套店铺视觉设计方案课题 制定视觉设计方案 课型 理论课课时 1教学目标 知识目标 学会分析客户的身份特征和心理需求情况。 制定中高档手机套视觉设计方案 。技能目标 能够根据产品定位,分析顾客身份的特征和消费心理。 能够对视觉设计目标选择确定字体、色调等内容。 能够完成撰写手机套类网店的视觉设计方案。情感目标 培养学生对美的追求以及审美能力; 鼓励学生对色彩搭配的探索,提升学生学习兴趣。教学重点 中高档手机套客户身份特征分析和心理分析教学难点 确定配色基调教学内容 一、客户群体定位与风格 客户特征: 美尔搭手机套定位为中高档品牌,主要客户群体为喜欢大方体面的商务人士,崇尚休闲的、时尚的、有个性的年轻人等,这些客户具有以下特征: 25-45岁 1.用于休闲娱乐的消费支出占其生活花费的比例相对较高 2.白领、企业主、公务员、自由职业者等 3.对产品的质量要求高,如绿色环保,健康性等; 4.对实用性要求高; 5.对产品的时尚性和个性要求很高; 二、客户群心理分析 客户心理特征: 1.有品味、高素质、思想独立; 2.他们多交际、品味独特、不盲从不跟随; 3.追求生活质量和小资情调 4.思想前卫,追求时尚,易于接受新生事物,生活比较有品位; 三、配色基调 根据色彩的特性,不同的色彩能给人不同的感受。 时尚的、休闲的 、个性的、文化的 美尔搭手机套店将主色调定为驼色,辅助色调定为灰色和白色。 四、字体选择 字体尽量时尚大方,能突显本手机套产品个性的字体,如SteelFish常规、微软雅黑以及方正兰亭黑简体(方正系列字体可能存在版权问题,可以换成近似字体)。 五、道具的选用 为了更好展现手机套的个性和品味,在拍摄手机套产品图片时需要选择一些能衬托出产品特质的道具,比如笔记本、钢笔、毛刷、黑色反光板等物品。复习小结任务2 设计首页活动(1) 准备图片课题 准备图片 课型 实操课课时 2教学目标 知识目标 了解首页图片选择要求; 了解手机套图片的处理步骤。技能目标 学会对已经拍摄的手机套商品图片进行美化处理,常规的步骤有:去除杂质、抠图、修复、调色等。情感目标 培养学生耐心细致的做事态度; 培养学生对美的追求以及审美能力。教学重点 手机套商品图片进行美化处理教学难点 手机套商品图片进行美化处理教学内容 一、图片选择 商品的图片要选择尽量能清晰展示商品特征的全图。 二、图片处理(讲练结合) 使用Photoshop打开上面其中一张照片,可以看到照片手机套上有很多灰尘和一些小刮痕,色彩也不够理想,需要处理,具体操作如下: 1. 去手机套上的灰尘和一些小刮痕。放大图片,看到需要修复的位置,使用污点修复画笔工具、修复画笔工具、修补工具,要使用到ATL键+修复画笔工具吸取要改变的样板,再在需要修复的位置涂抹,修补工具选取要修改的区域,拖动到想改成的样板地方,松开鼠标即可。使用这些工具时要注意“选项栏”的参数设置,才会达到最佳效果。 2. 让手机套更与实物相近,调整色相/饱和度,曲线,分别按Ctrl+U和Ctrl+M,调出面板,设置参数。 三、实操练习(学生操作) 老师提供手机套的一些图片,学生按照上述方法完成任务手机套图片处理。复习小结活动(2) 设计PC端首页课题 设计PC端首页 课型 理实一体课课时 2教学目标 知识目标 了解首页大致内容和结构。 了解全屏首页的基本要求。 了解店招的主要内容。技能目标 学会首页规划。 学会LOGO设计和店招制作。 学会规划手机套店铺的首页并完成制作。情感目标 培养学生耐心细致的做事态度。 培养学生对淘宝店铺首页设计大局观和全局意识。教学重点 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教学目标 知识目标 了解移动端首页的基本要求; 了解移动端店招和导航栏的操作要求。技能目标 学会制作移动端店招; 学会将PC端首页调整为移动端首页。情感目标 培养学生举一反三的思维; 培养学生对移动端大局观和全局意识。教学重点 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)新建画布,宽度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.设计主图 步骤一:打开图片,调整画布宽度,将画布调整为正方形,用内容识别的方式填充背景不足的区域。 步骤二:图片处理。 步骤三:裁剪。裁剪为700×700像素的图片。 步骤四:添加其他内容。这里仅需要添加LOGO。 2.设计辅图 由于主图设计相对简洁,这里的辅图跟主图相比,仅少一个LOGO。 3.设计最后一张图 完整的商品图,换成白底。 4.制作主图视频 主图视频是用60秒的短视频替代原来的主图位置。 二、上传商品(讲练结合) 将商品主副图和详情页切片图上传到图片空间,在系统的提示下,完成商品上传。如果详情页存在关联营销、领取优惠券、搭配销售等有超链接的内容,可以用Dreamweaver或者用购买模板的方式完成。 三、详情页上传 1、进入装修后台,选择【店铺装修】-【页面】中的【宝贝详情页】。 2、点击【模块】---【750】---加入【自定义】。 3、将详情页切图上传即可。复习小结任务5 上传首页活动(1) 上传PC端首页课题 上传PC端首页 课型 操作课课时 1教学目标 知识目标 了解淘宝网PC端首页装修的基本内容; 了解代码布局的基本功能;技能目标 学会使用普通布局加代码上传淘宝PC端首页。情感目标 培养学生耐心细致的做事态度; 培养学生克服困难,解决问题的做事态度。教学重点 使用普通布局加代码上传PC端首页。教学难点 使用普通布局加代码上传PC端首页。教学内容 一、订购旺铺智能版 首先各位需要订购旺铺智能版才能够使用旺铺智能版1920模板进行店铺装修(现在一个钻以下商家智能版免费使用)。PC装修的1920模块是智能版专享功能,购买智能版后可使用该功能,使PC店铺显得更高端大气,提升消费者体验。 二、淘宝旺铺智能版1920模板装修 操作流程如下: 进入智能版后台,选择【电脑页面装修】-【模块】中的【1920】。 在店招区点击【编辑】后,选择“自定义招牌”,点击“插入图片空间图片”按钮选“店招”图片。 点击 “源码”按钮,为了把“店招”图片变成1920,做法与专业版加入代码,修改方法一样。 点击页面左则“页头”模块,背景选择“店招”图片,设置如图。 点击页面左则“模块”模块中的【1920】,选择“全屏宽”拖入右则顶上区域,点击【编辑】后,选择插入的海报图片(宽1920,高不大于540),同时可以设置链接地址(也可以先省略)。但是这种设置方法有局限性,图片高于540就无法正常显示了。 解决方法可以用专业版的方法处理,在这加入自定义区,点击【编辑】后选择宽度为1920px,高度超过540的图片,然后点击左下角【编辑代码】,如图。 接下来的步骤就按照自己首页设计切割的模块进行对应装修即可。 装修完成后,点击页面右上角的【发布站点】按钮,就可以查看店铺首页了。 注意设置: 海报高度——使用海报图片的高度值。 海报间的缝隙——可以先设置“0”或者是“缝隙高度*除顶部海报外第几张图”。 产品图片连接——可以在店铺【素材中心】找到对应图片复制链接地址。 产品连接地址——海报想连接跳转的产品页。 编辑完代码后要点击【确定】按钮。 专业版: 专业版要把原来宽度1920px的首页缩小设计成宽度950px。 一、950px首页设计制作的方法: 1、店招要设计成950px*150px,高度包括导航栏的30px,可以把1920px首页上面的元素逐个复制过去,调整好位置,但是不能一起直接复制过去按比例收缩,这样做不到想要的效果。 2、除了店招部分以外,别的部分可以复制后按固定比例收缩成宽度为950px的元素,调整好位置,形成新的首页。 3、用“切片工具”按照设计布局分割好首页,保存好图片,把图上传到“图片空间”的“素材中心”,以便装修店铺时使用。 二、淘宝旺铺专业版950模板装修 操作流程如下: 1、进入装修后台,选择【电脑页面装修】-【模块】中的【950】,如图。 2、按照装修设计的流程,分别加入店招、图片轮播区、自定义内容、悬浮导航等其他部分,并编辑各个区域,加入对应的图片即可。这里不再详细讲述。 3、装修完成后,点击页面右上角的【发布站点】按钮,就可以查看店铺首页了。复习小结活动(2) 上传移动端首页课题 上传移动端首页 课型 操作课课时 1教学目标 知识目标 了解淘宝网移动端首页装修的基本内容。 了解码普通上传移动端首页的基本流程。技能目标 学会使用普通上传移动端首页。情感目标 培养学生耐心细致的做事态度; 培养学生克服困难,解决问题的做事态度。教学重点 使用普通上传移动端首页。教学难点 使用普通上传移动端首页。教学内容 操作流程如下: 用“切片工具”按照设计布局分割好首页,保存好图片,把图上传到“图片空间”的“素材中心”,以便装修店铺时使用。 1、进入装修后台,选择【手机端装修】-【页面】-【手淘首页】-【装修页面】,如图。 2、按照装修设计的流程,先添加店招背景图片,图片呈渐变显示,请在设计时注意整体效果,尺寸750X580、建议大小400K左右,图片格式JPG、JPEG、PNG,效果如图。 3、添加海报模块,可以使用智能海报或者自定义内容模块进行海报上传,已经设计好的海报,尽量使用自定义模块上传海报效果好。切割图片时要注意,宽度和高度最大都是640PX,按照80PX的整数倍来切割,特别是高度,否则会不符合条件,添加不进来,如图。复习小结 展开更多...... 收起↑ 资源预览