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

情境三 食品类店铺的网店美工任务1 制定视觉设计方案教案活动（1） 制定食品店铺视觉设计方案课题制定视觉设计方案课型理论课课时1教学目标知识目标1. 理解中低端食品客户群体的特征和消费心理；2. 理解配色、字体等对应的视觉传递效果。技能目标1. 能够根据产品定位，分析顾客的特征和消费心理；2. 能够视觉设计目标选择配色、字体、产品图；3. 能够完成撰写食品类网店的视觉设计方案。情感目标1. 培养学生对美的追求以及审美能力；2. 鼓励学生对色彩的探索，提升学生学习兴趣。教学重点中低端食品类客户特征分析和心理分析教学难点确定配色基调教学内容一、客户群体定位与风格 甜果时光铺子以“健康美味，好吃不贵”、“甜果时光，美味戒不掉”为主题，主要客户群体聚焦在女性与小孩。客户特征：1.对食品强调美味，价格优惠2.以健康为主，享受休闲时光或亲子时光二、客户群心理分析1.在零食上处于中低消费2.注重实惠和美味3.对零食健康有较高的要求，特别是妈妈群体关键词总结：健康、诱惑、实惠、休闲、享受。三、配色基调甜果时光铺子将主色调定位绿色（包括深绿和浅绿），辅助色调定位橙色、黄色和白色。绿色代表健康，给人春天休闲的舒适感，橙色、黄色为暖色调，适合美食，能刺激食欲。四、字体选择字体尽量自然大方，根据甜果时光铺子特点以及客户定位。选用常用字体：ArailImpact黑体宋体微软雅黑。复习小结任务2 设计首页活动（1） 准备图片课题准备图片课型实操课课时2教学目标知识目标1. 了解首页图片选择要求；2. 了解零食图片的处理步骤。技能目标学会零食产品图处理的基本操作：包括抠图修图合成调色背景处理等内容。情感目标1. 培养学生耐心细致的做事态度；2. 培养学生对美的追求以及审美能力。教学重点零食产品图片处理教学难点钢笔抠图教学内容一、图片选择商品的图片要有清晰展示整体的，也要有细节突出的。二、图片处理（讲练结合）步骤一：抠图。1.选择钢笔工具，单击鼠标，选取第一个曲线锚点，释放鼠标后，沿着图像边缘选取第二个描点并拖动鼠标，将曲线调整到和图像边缘重合的位置，释放鼠标，确定第二个曲线描点。2.重复以上动作，沿着图像边缘绘制闭合路径。3.按【Ctrl+Enter】组合键，将路径转化为选区，创建选区步骤二：瑕疵修复在需要修复的位置，使用污点修复画笔工具，在需要修复的位置涂抹，松开鼠标即可。步骤三：调色处理食品类的图片，主要强调颜色的搭配，一般来讲，暖色鲜艳的颜色看起来比较有食欲。因此需要对产品的饱和度、明暗度等进行适当的调整。步骤五：处理背景给食品加上一个模糊的、色调比较简单的背景。选中要处理的背景，进行“滤镜”“模糊”“高斯模糊”，对背景进行模糊处理。三、实操练习（学生操作）老师提供零食产品图片，学生按照上述方法完成操作。复习小结活动（2） 设计PC端首页课题设计PC端首页课型理实一体课课时3教学目标知识目标1. 了解首页大致内容和结构；2. 了解全屏首页的基本要求；3. 了解店招的主要内容技能目标1. 学会图层蒙版的使用；2. 学会对产品图片进行调色和处理；3. 学会使用修复工具修复产品瑕疵；4. 学会规划食品类店铺的首页并完成制作。情感目标1. 培养学生耐心细致的做事态度；2. 培养学生全局意识。教学重点1.首页的规划；2.首页制作操作教学难点首页的制作教学内容一、 首页规划以春季盎然为线索，背景以绿色、白色为主，海报和产品图突出“美味和诱惑”设计首页为全屏首页，即宽度为1920像素；首页结构为店招、海报、优惠券、特惠专区、掌柜推荐等模块组成二、店招设计（讲练结合）步骤一：新建1920像素*8000像素的图片，图片名称为甜果时光店铺首页。步骤二：添加120像素和150像素的水平参考线，输入店铺名称和广告语，文字颜色使用#fb7401，字体分别使用微软雅黑和楷体。步骤三：输入“关注我们”和“收藏店铺”等信息，同时添加形状进行装饰；添加“柳树”、“花瓣”等春天气息的素材，体现美好的休闲时光。步骤四：划分导航栏区域。店招和导航栏一起设计完成，但在制作过程中还是要加以区分，新建120像素和150像素的水平参考线，两条参考线中间形成30像素的导航栏。将该区域填充为绿色（#92db72），并依次输入导航内容，字体选择宋体，颜色为橙色（#fb7401）。完成店招。三、海报制作（讲练结合）本次海报的商品为店铺掌柜推荐新品：葡萄干。使用全屏海报，尺寸大小为1920*600px。步骤一：选择背景素材。结合前面确定的配色基调，选择清新的带着自然气息的背景图；步骤二：处理产品图。1.首先，拖入产品图“葡萄干1.jpg”；2.为葡萄干图层添加图层蒙版，选择黑色的柔性画笔，涂抹掉不需要的背景，只留下主要内容，使产品图和背景融合3.调整产品图亮度/对比度和色相饱和度，使产品图色彩艳丽，充满诱惑感。步骤三：添加文案文案操作相对比较简单，但要注意选择合适的字体、字体的大小及文案排版，这里使用了系统自带的Arial和微软雅黑字体。步骤四：添加装饰打开素材“葡萄干2.jpg”，抠取几颗葡萄干，拖入到海报图中，作为装饰。四、优惠券制作（讲练结合）结合配色表，优惠劵底色选择橙色（#fb7401）、黄色（#f9c300），用白色字体。满赠券底色选择绿色（#98c232），用白色字体。步骤一：制作背景，不用太复杂，直接简单填充淡黄色（#ffeab5）。再制作优惠券背景，画出圆角矩形，填充橙色（#fb7401），用小圆选区删除矩形两端部分区域，做出半圆形的镂空，让矩形看起来不会太单一。利用矩形选框工具和椭圆选框工具，通过“添加到选区”做出长条形的圆角矩形选区，从上往下做“黄色橙色”的渐变色填充。步骤二：输入优惠文字信息。步骤三：用同样的方法，做出另外两张优惠券。可选中优惠券所有图层，按住Alt键，按住鼠标左键拖拽，可复制优惠券，对优惠文字信息进行修改即可。步骤四：制作满赠券，背景色使用绿色（#98c232），文字使用白色，拖入处理好的产品素材。五、特惠专区结合店铺主题“健康和休闲时光”，在特惠专区中，每款产品都要体现该主题，同时突出产品特色，具体制作思路如下：步骤一：制作背景，填充淡绿色（#d2e7ac）。步骤二：拖入黄桃干产品图，调整产品图大小和角度，为产品图图层修改图层样式，添加投影，增加产品图的立体感。步骤三：继续拖入素材“黄桃”，将素材载入选区，新建图层，填充黑色，调低图层不透明度，并拖到“黄桃”图层下方，调整位置，制作黄桃投影，增加立体感。步骤四：输入文案。添加装饰。步骤五：加入促销语。此次利用领券方式，制作详情领券，让页面看起来更加丰富。制作步骤同优惠券专区优惠券。六、 完成首页剩余内容。继续完成特惠专区其他产品内容，基本上重复以上操作。复习小结活动（3） 制作移动端首页课题制作移动端首页课型理实一体课课时1教学目标知识目标1. 了解移动端首页的基本要求；2. 了解移动端店招和导航栏的操作要求。技能目标1. 学会制作移动端店招；2. 学会将PC端首页调整为移动端首页。情感目标1. 培养学生举一反三的思维；2. 培养学生的全局意识。教学重点1.移动端首页的规划；2.PC端首页调整为移动端首页的操作。教学难点PC端首页调整为移动端首页的操作教学内容一、移动端首页规划随着智能手机等设备的普及，智能手机购物的方式成了一种流行趋势，同时也便捷了生活，所以移动端首页装修也必须重视。本次移动端首页制作，通过使用模板来完成。根据最新版模板要求，移动端首页的宽度为750像素，店招尺寸要求为750X580像素。移动端首页采用类似PC端首页的设计风格，按照“商品海报+优惠券+特惠推荐+热卖推荐”的布局方式。二、移动端首页制作（讲练结合）1.移动端店招移动端的店标是自己上传的，按80*80像素要求制作。模板中店招大小是750*580像素，因系统默认的内容较多，尽量简约，不做其他的装饰和设计。2.移动端导航栏导航区仅付费用户可更改底色，所以这里无法做任何处理，制作时可以直接留白。导航区仅付费用户可更改底色。3.将PC端首页调整为移动端首页考虑到直接使用模板，将PC端首页各部分根据模板尺寸大小进行调整，宽度为750像素。注意整体宽度，图片排列，文字大小要合适，不能影响阅读。复习小结任务3 设计详情页活动（1） 规划详情页课题规划详情页课型理论课课时1教学目标知识目标了解食品类商品详情页的内容技能目标规划详情页结构和内容情感目标培养学生大局观和全局意识教学重点规划详情页，确定详情页结构和内容教学难点规划详情页，确定详情页结构和内容教学内容详情页结构和内容：第一部分：商品创意，宣传商品。第二部分：商品推荐，关联店铺内其它商品，做二次营销，提升客单价。第三部分：商品信息，展示商品属性、规格、保质期等信息，帮助顾客了解商品。第四部分：商品特色，展示商品多个功能，体现商品特性。第五部分：商品成分，展示商品主要营养价值。第六部分：适用人群，为商品添加“亲感”附加价值，获得顾客的情感共鸣。第七部分：温馨提示，打消顾客的疑虑，促使顾客下单购买。复习小结活动（2） 制作详情页课题制作详情页课型理论课课时3教学目标知识目标了解食品相关商品知识技能目标能够按详情页规划完成详情页制作情感目标1. 培养学生制定计划、落实计划的意识；2. 培养学生对美的追求以及审美能力。教学重点按详情页规划完成详情页制作教学难点按详情页规划完成详情页制作教学内容一、图片准备根据不同模块图片的使用情况，准备大量的、清晰度较高的图片。二、制作详情页（讲练结合）步骤一：制作商品创意图主要操作：1.新建图片，宽度750像素，高度10000像素，填充背景色#FFFFFF。2.新建水平方向参考线，位置为900px。3.制作商品创意背景，导入大自然背景和木质背景素材，合并两个图层。4.导入黄桃干素材图片，用钢笔工具对素材进行抠图处理。5.调整图像色相/饱和度、色彩平衡、色阶。6.为图像添加投影效果。7.添加“高品质”图形和文字标识。8.添加“黄桃干”、“美味诱惑”文字标识。9.添加“撩动味蕾 好甜好脆好酥软”图形和文字标识。步骤二：关联营销1.栏目标题。创建文字“商品推荐Commodity sale”，利用多边形工具和矩形工具制作商品推荐栏目形状。2.制作商品推荐模块背景，商品推荐模块添加淡灰色#d4d4d4。利用矩形工具创建4个正方形。3. 导入商品图，使用剪贴蒙版控制显示范围和位置，再利用色阶、色相/饱和度、色彩平衡等命令对图片进行处理。4.添加文案，为商品创建 “标题”、“价格”、“立即购买”等文字。步骤三：商品信息1. 栏目标题。修改标题文字为“商品信息 Commodity information”。2.导入商品图片。导入黄桃干素材图片，调整图片大小和位置后，再次使用剪贴蒙版控制显示范围和位置，再利用曲线、色相/饱和度、色彩平衡等命令对图片进行处理。3.添加文案。输入文本“多汁大黄桃 美味戒不掉”及商品基本信息。步骤四：商品特色1.栏目标题。修改标题文字为“商品特色 Commodity feature”。2.制作商品特色模块架构。绘制圆角矩形，使用剪贴蒙版控制矩形的显示区域。3.导入素材图片，使用剪贴蒙版控制图片显示。4.添加文案。步骤五：商品成分1.栏目标题。修改标题文字为“商品成分 Commodity ingredients”。2. 制作背景。绘制圆角矩形做为商品成分模块背景，半径为10像素，填充颜色为#f7ffe9。3.导入图片。利用剪贴蒙版控制图片位置，设置圆形描边样式。4.添加文案。模块添加的文案为“丰富的营养让您吃的健康”，强调营养健康主题。围绕商品图片从不同角度展示商品主要营养价值，增强消费者对商品的信任感。添加“维生素A、维生素C、维生素E、胡萝卜素、纤维素、锌、硒、磷”等文本，改变字体颜色并利用自由变换工具旋转角度。步骤六：适用人群通过展示适用人群，为商品添加“亲感”附加价值，从而获得顾客的情感共鸣，增强顾客购买欲。1.栏目标题。修改标题文字为“适用人群 Suggested crowd”。2.制作背景。3.导入图片。4.添加文案。步骤七：温馨提示1.栏目标题。修改标题文字为“温馨提示Tips”。2.导入图片，添加文案完成温馨提示模块制作。步骤八：详情页剪切及切片操作详情页的各个部分完成后，要进行整体查看页面效果，对存在问题的区域做局部修改和调整。1.页面裁切。Alt+Ctrl+Shift+E组合键对图层进行盖印操作，选择【图像】【画布大小】命令，对图像进行剪切操作。2.新建参考线。选择【视图】【新建参考线版面】，在弹出的对话框中选中【行数】复选按钮，行数为3。3. 页面切片。选择切片工具，在属性栏中设置【基于参考线的切片】。4. 保存切片文件。选择【文件】【导出】【存储为Web所用格式（旧版）】。设置为【JPEG】格式，单击【存储】命令，对图像进行保存。复习小结任务4 上传商品活动（1） 上传商品到电商平台课题上传商品到电商平台课型操作课课时1教学目标知识目标1. 了解电商平台主幅图要求；2. 了解商品上传的基本内容。技能目标1. 了解主幅图的制作方法；2. 了解商品上传的基本操作。情感目标1. 培养学生耐心细致的做事态度；2. 培养学生动手实践的意识。教学重点1. 电商平台关于上传商品相关知识；2. 上传商品相关操作。教学难点上传商品相关操作。教学内容一、设计主副图（讲练结合）1设计主图步骤一：制作LOGO图。1）新建700×700像素的图片，利用钢笔工具绘制锚点和曲线，绘制完毕后，用路径选择工具选取移动路径，用直接选择工具选取锚点，单独对锚点进行修改处理。2）将路径变为选区，利用描边路径命令完成路径描边操作。3）输入文字“甜果铺子Sweet Fruit ”。步骤二：制作主图。1）导入素材图片，利用自由变换工具对图片进行缩放处理，调整图片色阶、色相/饱和度和色彩平衡命令，使商品体现出美味和诱惑。2）利用铅笔工具绘制曲线。3）添加文案“￥19.9/3袋”、“领券再减5元”。2.设计辅图制作过程中利用套版操作，只需修改商品图片和文案，这样不仅提升做图速度，还保证了主辅图的风格统一。步骤一：制作辅图1。1）在主图文档中，将主图组隐藏。2）导入黄桃干图片素材，利用自由变换工具对图片进行缩放处理，调整图片色阶、色相/饱和度和色彩平衡命令，使商品色泽更加鲜艳动人，用污点修复画笔工具修复商品图片中的瑕疵。3）制作完毕后，将文档存储为“辅图1”。步骤二：制作辅图2。1）同样在主图文档中完成操作，将辅图1隐藏。把主图组中的文案和图形隐藏，只保留商品图片即可。2）制作完毕后，将文档存储为“辅图2”。步骤三：制作辅图3。1）在主图文档中完成操作，只显示LOGO组，将其它图层和组均隐藏。2）导入黄桃干素材图片，调整图片色阶、色相/饱和度和色彩平衡命令。3）绘制一个正方形，再绘制一个圆形，用“从选区减去”操作，填充颜色为#638b03，调整图形的位置至文档的右上角。添加白色文字“品质保证”。4）利用减淡工具，使商品图片变亮。5）制作完毕后，将文档存储为“辅图3”。步骤四：制作辅图4。1）在主图文档中完成操作，只显示LOGO组，将其它图层和组均隐藏。2）导入黄桃干素材图片，调整图片色阶、色相/饱和度和色彩平衡命令。3）制作完毕后，将文档存储为“辅图4”。二、上传商品（讲练结合）将商品主副图和详情页切片图上传到图片空间，在系统的提示下，完成商品上传。如果详情页存在关联营销、领取优惠券、搭配销售等有超链接的内容，可以用Dreamweaver或者用购买模板的方式完成。复习小结任务5 上传首页活动（1） 上传PC端首页课题上传PC端首页课型操作课课时1教学目标知识目标1. 了解淘宝网PC端首页装修的基本内容；2. 了解DW上传PC端全屏首页的使用方法。技能目标学会使用DW上传PC端全屏首页到淘宝网站。情感目标1. 培养学生耐心细致的做事态度；2. 培养学生克服困难，解决问题的做事态度。教学重点学会使用DW上传PC端全屏首页到淘宝网站；学会使用原模板快速上传移动端首页到淘宝网站。教学难点学会使用DW上传PC端全屏首页到淘宝网站。教学内容1.店招上传（讲练结合）步骤一：将1920*150的店招和导航条切成950*150的店招、导航条和1920*150的页头。将950*150的店招、导航条储存为web所用格式，格式是HTML和图像。然后将存好的JPG格式图片上传至淘宝图片空间。步骤二：打开Dreamweaver软件，在软件中打开“店招.html”。点击图片，把切好的950*150店招和导航条用DW制作成代码。点击矩形框在图中圈出需要连接的区域，比如导航条“首页”，把链接中的#去掉，附上需要链接的地址（每个需要附上链接的区域都必须这么做）。步骤三：点击整张店招图片，把属性栏的源文件“images/店招.jpg”改为店铺图片空间中店招图片的图片地址。步骤四：点击代码，将页面切换到代码模式，将<body></body>之间的代码复制下来（注意：不包括body）。步骤五：进入店铺装修页面，点击店招部分，选择编辑，选择自定义招牌，点击“源码”，将代码粘贴进来。完成导航代码。步骤六：点击页头，将页头图片上传，背景显示“不平铺”，对其方式为“居中”。完成店招的上传。步骤七：植入代码。进入淘宝后台，点击店铺装修，在店招位置点击编辑，选择自定义招牌，点击源码按钮，粘贴上一步生成的代码，点击保存。2.上传轮播海报（讲练结合）添加1920“全屏宽图”模块，点击编辑，上传全屏海报。涉及到的链接，按店招导航添加链接方法进行操作。3.首页其他部分上传（讲练结合）添加“自定义内容区”模块，依次上传其他部分切片图片。完成PC端首页上传。复习小结活动（2） 上传移动端首页课题上传移动端首页课型操作课课时1教学目标知识目标了解淘宝网移动端首页装修的基本内容。技能目标学会使用原模板上传移动端首页。情感目标1. 培养学生耐心细致的做事态度；2. 培养学生克服困难，解决问题的做事态度。教学重点学会使用原模板上传移动端首页。教学难点学会使用原模板上传移动端首页。教学内容移动端首页上传，使用原模板，上传较简单。步骤一：登录淘宝旺铺手机端后台，选择模板，官方模板可以免费使用，也有设计师模板供付费使用。步骤二：根据手机端首页的需要，选择合适的模块，对模板进行布局。这里主要选用图文集中的“单列图片模块”。其中优惠券部分，使用“美颜切图”模块，便于添加热区。步骤三：编辑模块，上传图片，注意尺寸大小为750*（200-950）px）。依次将手机端首页的切片上传。步骤四：添加链接。除了需要切图添加热区的“优惠券专区”（见步骤二），其他专区选择的都是“单列图片模块”，链接的操作比较简单，在对应的编辑区中点击链接，选择对应的链接即可。复习小结