《网页美工设计》教案-第1讲 餐饮类网页设计制作3

PAGE《网页美工设计》教案授课专业广告艺术设计专业授课教师 PAGE1第三部分综合实训篇第一章综合案例——餐饮类网页设计制作标题第三节餐饮类网页设计制作案例3第一讲餐饮类网页设计制作3（上）课时2课时教学目标教学内容与过程在做商品或者服务推广时，网页中的视觉内容重要性不言而喻，视觉营销即通过刺激受众的感官来提高商品认同感，从而激发购买欲。视觉是手段，营销是目的。视觉营销存在的目的是在短时间内产生最大的影响，增进商品或服务与消费者之间的联系，促成最终的交易行为。因此网页的视觉营销堪称卖家利器。下面结合餐饮类网页制作案例，我们先来学习了解视觉营销的作用、视觉营销的应用以及网页文案策划。（一）视觉营销的作用1、提升店铺吸引力，凸显商品特性及功能在品牌和消费者之间的衔接中，视觉营销是一种借助视觉辅助手段传达品牌理念的有效策略。无论是店招设计、商品详情页编排还是店面广告策略，都可以看成视觉营销的不同形式。采用可视化内容不仅能提高品牌在网页上的曝光量，还能令目标受众对品牌产生深刻的印象。网页中一张凸显商品特性和功能的图片，一条吸引眼球的广告语总能唤起消费者的兴趣，线上销售的指路门径便是图片、色彩、文字等商品“包装”。对网店而言能够带来点击量的图片主要有商品主图、关联图片、Banner广告等。2、抓住买家的兴趣点，增加停留时长在成功地引导受众进入网页界面后，如何聚焦受众的关注点，抓住其核心诉求，激发其购买欲，让其在店铺内停留更久。例如此网页中使用的主标题是“都市慢生活”，副标题是“从一份早餐开始”，用慢早餐和优雅生活关联，开启美好的一整天，其表达的卖点是“营养早餐”，向受众输出营养早餐的理念与重要性。3、构建真实应用场景，刺激购买欲帮助受众构建起真实的商品应用环境，让受众身临其境地获取商品应用感知是促成交易的有效策略。例如，此网页产品是牛皮拳击手套，适用人群是健身的时尚群体。这款手套三重内胆，适合打击、缓冲、保护，三段护腕增强冲击力度、人体工程学加强内部空间弧度设计等多种功能，更重要的卖点是它加入了各种运动的场景，让受众感受专注的力量，体验用拳头说话，“拳力出击”。4、打造具有辨识度的店铺形象，提升品牌认知度网上店铺千千万万，店铺形象同质化严重，而通过视觉营销可以打造出具有辨识度的店铺形象，提升品牌认知度。如何让自己的店铺名称或品牌被受众记住并深入受众的脑海是每一个卖家都需要认真思考的问题，因此，在店铺的视觉营销中做到色彩搭配、主色突出、风格统一尤为重要。（二）视觉营销的应用要让网页视觉营销的整体设计和布局转化为成交率，需要通过具体的网页设计和商品详情页设计来实现，充分利用视觉冲击、色彩调和、页面布局等来吸引顾客，引导购买，促成成交。设计引人入胜的商品主图，凸显商品可圈可点之处；制作精益求精的商品详情页，抓住促成交易的关键；打造让受众留步的店铺首页。（三）网页文案策划文案在视觉营销方案中具有重要的作用，无论是店铺的名称、标语，图片中的文字内容，还是视频中的旁白都属于视觉营销文案策划的一部分。网页文案不需要追求华丽的辞藻，只需要通过简练的语言传递重要的信息，在受众心中快速塑造一些画面和场景。进行视觉营销文案策划时，需要通过进行精心的设计让文案更富有互动性和情感性，从受众的角度出发，寻找需求和痛点，从而更好地打动受众。1、店招文案策划店招因为其位置优势，是网页流量最大的一部分，需要通过简单明了的文案让受众快速知道店铺的品牌、产品、卖点及活动情况。2、广告图文案策划店铺广告图常用于用户引流，爆款产品宣传、品类推荐及活动宣传等，通过文案突出产品的“物美价廉”。“物美”体现的是产品的优势，“价廉”则体现的是产品的活动力度。刚才学习了视觉营销的作用、视觉营销的应用以及网页文案策划，下面通过案例进行学习。这是餐饮美食类小龙虾的网页制作，下面进入案例实操讲解。首先打开Photoshop软件，打开效果图，在文件窗口上方单击右键，在弹出的对话框选“复制”这个文件。新建图层，填充黑色作为背景。第一部分产品主图。1、将两个龙虾素材移动到文件中，调整合适的位置，给龙虾1添加图层蒙版，选择黑色画笔，调整不透明度，对素材进行修改隐藏。2、移动雾气的素材到文件中，将混合模式调整为“滤色”，按CTRL+T，单击鼠标右键，选择“垂直翻转”，添加图层蒙版，对素材进行修改隐藏。3、移动叶子素材，选择钢笔工具绘制点缀装饰，将路径变成选区，CTRL加回车键，新建图层，填充绿色。选择滤镜—模糊—高斯模糊，再复制这个图层，变化它的方向。4、输入文字“味蕾生香”，调整大小，切换文字方向，纵向排列。右键—栅格化文字。使用选框工具，选中“味”字最后一笔，按DELETE键删除。将辣椒素材移动到“味”字上方，增加文字趣味性，凸显产品特性及功能。5、选择画笔工具，将前景色设置为黄色，打开画笔预设选取器，载入画笔—云雾画笔笔刷，选择2064，新建图层，绘制文本底图。选择滤镜—风格化—风，大风，从右的方向。按CTRL+T，鼠标单击右键，旋转90度顺时针。输入文字“小龙虾”，调整大小。教学反思第一章综合案例——餐饮类网页设计制作标题第三节餐饮类网页设计制作案例3第二讲餐饮类网页设计制作3（下）课时2课时教学目标教学内容与过程小龙虾网页制作分为四个模块，第一模块为产品主图，第二模块为产品介绍，第三模块产品分类细节展示，第四模块为信息品质及购买须知。在第一模块产品主图制作中还有文案设计的部分。前面我们学习了网页文案策划，文案在视觉营销方案中具有重要的作用，不需要追求华丽的辞藻，只需要通过简练的语言传递重要的信息，在受众心中快速塑造一些画面和场景。例如本案例中“舌尖美味”——小龙虾、大食尚、虾中霸、味中王。下面进入案例实操制作。1、按CTRL+R打开标尺，拖拽两条参考线。选择矩形选框工具，绘制图形后，新建图层，选择编辑—描边命令，宽度6像素，位置内部。在图层面板下方，添加图层样式—渐变叠加，选择橙、黄、橙渐变。2、使用选框工具，删除缺口，并复制图层。输入文字，调整大小和间距。再将舌尖美食复制两个图层。3、将第一个文字图层添加图层样式—斜面和浮雕，样式：内斜面，方式：雕刻清晰，深度1000，大小10。添加图层样式——图案叠加，编织120*120像素。4、将第二个文字图层混合模式调整为“叠加”，将第三个文字调增为黄色，图层混合模式调整为“变暗”。第二模块产品介绍的制作。1、新建图层，填充白色。将龙虾素材和产品信息的素材移动到画面中，选择矩形选框，删除一部分图片，在留白的地方调整素材位置。2、选择画笔，打开F5，选择柔角画笔，调整画笔笔尖形状，大小100像素；形状动态：大小抖动100%，散布两轴120%，数量5，纹理：添加云彩图案（128*128像素），勾选“为每个笔尖设置纹理”，模式为颜色加深。传递不透明度为50%。新建图层，在两个图层衔接处涂抹。3、选择画笔—672笔刷，新建图层，绘制1个，按住ALT键，选择移动工具复制3个。选择第二个图层，添加图层样式，颜色叠加为红色。鼠标单击图层样式，按住ALT键，复制样式给第四个图层。4、新建文字图层—“麻辣鲜香”，将第一个和第三个字改成红色，调整字的大小和距离。第三模块产品分类细节展示。1、将美食1图片移动到画面中。给图片添加图层蒙版，选择画笔—2071笔刷，涂抹隐藏图片上部分，选择1718笔刷，涂抹隐藏图片下部分。2、选择矩形选框工具，新建图层，填充灰色。选择多边形套索工具，绘制不规则图形，按住CTRL+SHIFT+J，通过拷贝的图层。再选择另外一半矩形，向右边移动，将矩形框分开。3、将两张美食图片移动到画面中，分别放在两个不规则矩形的上方，按住ALT键，鼠标放在两个图层中间，单击。4、下方输入文字，两种不同的口味。“麻辣口味”和“十三香口味”。5、新建图层，选择画笔，柔角画笔2像素，按住shift键在画面中绘制一条直线。选择滤镜—模糊—动感模糊，调整间距，制作一条装饰线。第四模块为信息品质及购买须知。1、将龙虾图片移动到画面中。2、新建图层，绘制矩形选框，描边为红色，3像素。选中上方一部分删除。输入文案“信心品质，敢于承诺”，因为是标题文字，所以一定要醒目、易识别。选择白色微软雅黑字体。3、选择圆角矩形，填充红色，半径25像素。输入文案“我们会全力以赴，只为你的信任!”4、新键图层，绘制正圆填充红色，输入文字“规格不够”。同时选中文字和红色正圆两个图层，按住ALT键进行复制，修改文字。5、新建图层，在虾的中心绘制一个稍微大的正圆，填充黑色,图层不透明度70%。输入文字“退”6、绘制1个圆角矩形，两个矩形选框。7、输入文字以及图形。将第二个图形和三个