网店运营教案---网店招牌banner制作

无基础制作电商淘宝BANNER首先构图什么是构图？百度百科里是这么解释的：构图是一个造型艺术术语，即绘画时根据题材和主题思想的要求，把要表现的形象适当地组织起来，构成一个协调的完整的画面。

在设计当中构图的重要性可谓十分重要，有一句话说的好：确定好了构图板式，也就成功了一半。

电商BANNER也不例外，首先我们来分析一下它的组成部分：一张电商BANNER基本有3部分组成，产品、背景、文案。

常见的板式有3种，左文右图、左图右文，两边图中间文，下面通过5个案例给大家一一说明点击使用模版1，左文右图式左文右图式的文案排版非常经典，主标题字体粗，副标题字体细，上下主次分明，形成对比。

文案四四方方构架非常稳重，平衡。

点击使用模版2，左图右文式左图右文式的排版也是淘宝BANNER中十分常见的，字体也是上粗下细，上大下小。

下面的促销部分突出价格。

3，两边图中间文字的排版在淘宝BANNER的设计中，也经常用文字在中间的排版，产品图一般是一边近景另外一边是远景,产生对比和呼应。

同时文字在中间使得信息更加突出，让客户第一眼就能看到。

点击使用模版4，半透明框框的排版方法在背景图比较复杂的情况下，文字直接打上去会显得太乱，所以我们可以直接画一个半透明的框框，如图所示。

然后再在里面排文案，同时这样也可以增加画面的层次感。

点击使用模版5，斜切式构图在淘宝BANNER设计中，斜切式构图会让画面显得时尚，动感活跃，但是画面平衡感不是很好控制，一般斜切式的文案倾斜角度最好不要超过30度，不然得歪着头阅读。

另外根据阅读习惯，文字一般是往右上方的倾斜，文字这样有一种上升感关于配色刚开始做设计遇到的另外一个难题就是配色了，关于配色的技巧有很多，常见的有对比色，临近色，冷暖色调搭配多种方式，关于配色知识有很多，没有思路的时候大家可以去百度找一些配色色谱网站，还可以利用一些小工具如Kuler等。

我这里说一个最简单的方式，也是一种最快的方法。

就是直接冲产品图上取色。

Logo与Banner的制作教学设计课题：Logo与Banner的制作课时：45分钟周次：第15周教学对象：网页社团课教学目标：1.知识技能目标用fireworks制图工具设计制作网站的Logo与Banner2.过程方法目标首先给出几种基本动态图片的演示效果，激发学生兴趣，产生初步印象。

然后简单介绍fireworks软件，接下来进行具体的演示讲解。

3.情感态度价值观以生活中问题去启发学生，调动学生的积极性与主动性。

教学重点：Logo与Banner的制作教学难点：动态图片制作教学方法：互动交流、讲解示范法、启发引导教学环境：电脑室，网络环境教学内容及过程：一、Logo与Banner的制作0.简答点评，给出学习目标首先，欢迎学生继续进行信息技术课程的学习，对上周社团课内容简单点评，引导发扬优点，克服不足；同时，给出本周社团的学习目标，并提出希望与期待！给出本节课的学习目标，主要在于Logo与Banner的制作。

期待学生积极参与，向更高层次目标努力。

1.网站Logo与banner概述Logo是指网站的标志图片。

它既可以是图形化的形式，也可以是动态的形式，比文字更形象有吸引力。

banner是网幅、旗帜或横幅等广告，属于一种网络广告形式。

2.logo与banner设计要素logo的作用：简洁明快、表达理念、便于传播与记忆。

独特性一致性形象性时代性3.制作网站logo网站logo是一个网站的标志。

具体步骤如下：文件-新建文档，填写数据，确定完成。

4.制作有动画效果的bannerbanner是多数网站的财源。

具体制作步骤如下：文件-新建文档，填写数据，确定完成。

二、作业1.制作网站logo、banner，并提交作业。

命名以“座位+姓名”，如01***。

并表达希望与感谢！三、教学反思。

项目二网店装修知识目标1.了解网店装修的基本步骤；2.了解视觉营销的基本元素。

技能目标1.能够通过分析店铺，制定网站装修方案；2.掌握店招、促销区的设计方法；3.掌握店铺公告的制作方法。

任务一店招设计任务导入一、任务情境小王是一个刚大学毕业的应届毕业生，在各类校园招聘会拼搏了几个月后，终于在农享信息技术公司找到了自己满意的工作。

小王在校期间对平面设计这一领域有极大的兴趣，来公司后，他想在美工设计方面深入发展。

部门经理安排小王对公司将要举行的店铺活动进行装修策划，为店铺带来一个全新的展示风格以吸引用户。

小王决定先对店铺的商品进行深入了解、提取卖点信息后，再进行店铺的整体装修策划。

小王了解到公司是一家食品类的传统企业，为推动公司发展，现在开始进军电子商务领域。

二、任务分析（1）认识网店店招；（2）设计与制作网店店招。

任务实施小王对公司背景、企业文化以及经营商品等基本信息了解后，决定首先进行店招装修设计。

一、认识店招店铺的店招，也就是指店铺的招牌，它是网店装修中最重要的模块之一。

店招是顾客认识店铺的第一步，是卖家展示自身店铺名称和形象特点的重要途径，可以由文字和图案组成，表现方法十分灵活。

网店店招的作用主要体现在留客的环节上，因此在设计网店的店招时要更多地从留客的角度去考虑。

在查看了一些淘宝店铺的店铺招牌后，小王发现店铺店招的装修设计主要有两种展现形式：静态图片与动态图片。

不同的装修展现形式具有不同的制作效果，静态图片展现的形式比较自主和简单，可以用简单的图片设计制作而成。

如在店招中添加爆款商品，购物车等快捷窗口。

静态店招表现形式如图2-1所示。

图2-1 静态店招表现形式动态店招主要使用的是GIF（Graphics Interchange Format，图像互换格式）动画，表现手法生动活泼，也可以通过Flash动画形式来展示。

动态店招表现形式如图2-2所示，该店铺以动态店招来展示他们的设计。

图2-2 动态店招表现形式网店店招默认的表现形式为“背景图片 + 店铺名称”，这种设置非常简单，其中的背景图片不但可以更换，还可以使用店铺默认的招牌背景图片。

网店店招设计教案教案标题：网店店招设计教案教学目标:1. 了解网店店招设计的重要性和作用；2. 掌握网店店招设计的基本原则和技巧；3. 能够运用所学知识设计出吸引人的网店店招。

教学内容:1. 网店店招设计的重要性和作用；2. 网店店招设计的基本原则和技巧；3. 网店店招设计实例分析和讨论。

教学步骤:引入:1. 引导学生回顾自己在网上购物时，是否关注过网店店招设计的特点和作用；2. 通过图片展示引入，展示不同网店店招设计的特点和样式，引发学生对于设计的兴趣和思考。

教学内容讲解和示范:1. 介绍网店店招设计的重要性和作用，如吸引顾客、进行品牌宣传、提升销售等；2. 介绍网店店招设计的基本原则，包括色彩搭配、字体选择、排版布局、图片使用等；3. 分析和展示不同网店店招设计的实例，讲解设计原理和技巧。

实践操作:1. 提供几个网店店招设计任务，要求学生分组进行设计实践；2. 学生根据所学知识进行设计，并展示自己的设计作品；3. 全班讨论和评价不同设计作品的优缺点，分享设计心得和建议。

总结:1. 总结网店店招设计的重要性和基本原则；2. 强调学生在设计中要注重实践和创新；3. 提醒学生在今后遇到设计任务时，要灵活运用所学知识。

教学延伸:1. 鼓励学生自主寻找更多的网店店招设计实例进行研究和分析；2. 引导学生参与线下店铺店招设计的实践，与网店店招设计进行比较和对比。

教学评价:1. 对学生的设计作品进行评价和反馈，关注学生对于设计原则和技巧的应用情况；2. 鼓励学生自评和互评，加强学生对于设计作品的自我反思和提升。

教学资源:1. 图片展示不同网店店招设计作品；2. 设计软件或工具，学生可以使用电脑或平板进行设计操作；3. 线下店铺店招设计的实例图片，用于与网店店招设计进行对比和分析。

当用户访问一个网站的时候，第一屏的信息展示是非常重要的，很大程度上影响了用户是否决定停留，然而光靠文字大面积的堆积，很难直观而迅速的告诉用户来到这里会得到什么有用的信息，因此网页Banner设计在这里起到了至关重要的展示作用，特别是对于首页Banner，有效的信息传达让用户和文字之间的互动变得生动而有趣，下面就让我们通过大量优秀的设计案例走进Banner设计，走进设计师们的灵感挥洒空间。

一.Banner的构成与设计形态分解自然界的万物形态构成都离不开点、线、面。

它们是视觉构成的基本元素，具有不同的情感特征，因此要善于采用不同的组合去体现不同Banner的情感诉求。

a.点的聚合点的排列所引起的视觉流动，引入了时间的因素,利用点的大小、形状与距离的变化，可以设计出富于节奏韵律的画面。

点的连续排列构成线，点与点之间的距离越近，线的特性就越显著。

点的密集排列构成面，同样，点的距离越近，面的特性就越显著。

//无数图形的点聚合在一起，增强画面的韵律感/b.线的流动线分为四类：直线、曲线、折线以及三者的混合。

直线又有水平线、垂直线、斜线三种形式。

其中，水平线给人平静、开阔、安逸的感受；垂直线给人崇高、挺拔、严肃的感受；曲、折、弧线具有强烈的动感，更容易引起视线的前进、后退或摆动。

//3Ddrive/严谨的线条，使页面稳重富有理性c.面的分割面在设计中的概念，可以理解为点的放大，点的密集或线的重复。

Banner元素在不同大小色块元素的风格对比下，能获得清晰、条理的秩序，同时在整体上也显得和谐统一/清晰突出的图片所产生的第一视觉点/色块与线条间不同比例的分隔画面，使页面具有形式美感/二.Banner设计的形式美法则在banner设计中采用特殊的形式结构，会使网页变得个性十足并很好的区别于同类产品，让人记忆深刻。

a.有机形的柔和与美有机形是由一定数量的曲线组合而成，是自然物外力与内力相抗衡而形成的形态。

有机形富有内在的张力，给人以纯朴、温暖而富有生命力的感觉。

网店产品促销海报设计与制作教案【学生分析】本课的教学对象是高二年级学生，在前面课的学习中，已经学习了网店装修的基础知识，海报的设计要点，同时对PS软件也有较好的掌握。

本节课是PS 软件与案例结合的综合运用。

【教学设计目标及思路】1.教学目标知识目标学会分析产品卖点了解宣传海报的相关知识；能力目标（1）熟练运用PS中的各种工具。

（2）进一步熟练海报设计思路，提高综合运用能力。

情感目标通过本课的学习，使学生在设计宣传的过程中，体验学习的乐趣，培养学生的信息素养。

2.教学设计思路为了既能有效地达到本课教学目标，又能让学生保持积极的学习兴趣，我采用了情景导学法与任务驱动法，帮助学生消化本课的内容，激起学生的求知欲，整节课以学生自主探究为主。

在教学中，以产品的使用情景为载体，以完成任务为动力，课的开始创设情景，引入新课内容，课中结合情境，以任务驱动为主线开展整个教学活动过程，激起了学生学习的求知欲，调动他们的学习兴趣，再通过练习，巩固新知；在设计环节，以学生已有的经验入手迁移学习新知，并在此过程中形成各自不同的创意作品，进行展示；在整个教学过程中还辅之以演示法、观察法、迁移法等，以期达到教学效果的最优化。

总之，本课力求采用自主探究的教学方式放手让学生探索，培养学生的能力，从而达到让学生逐步学会学习的目的。

3.教学重难点：/重点：掌握PS基本操作并熟练运用难点：通过反复观察不同的优秀设计产品总结设计要点，并内化为自己的设计思路【教学过程】1.作品评讲导入老师先对上节课所提交的作业进行点评和展示。

设计意图：有反馈才有改进，而展示所有学生提交的作品，也让他们感受到优秀作品的设计思路，在无形之中形成一种自我参照和竞争。

2.新授内容教师进行案例分析并下发本节课素材（1）分析案例的使用情景有哪些（2）分析产品的卖点学生讨论后举手回答（3）明确产品促销海报设计的几大要点a.主题突出b.风格统一c.目标明确d.形式美观：（4）学生自己尝试制作案例学生根据分析进行海报设计制作，有问题的学生可以在网上找找解决的办法或可以向已经懂得同学寻求帮助。

网店店招设计教案教学目标：1.了解网店店招设计的重要性和作用；2.掌握网店店招设计的基本原则和技巧；3.能够运用所学知识，进行网店店招设计。

教学内容：1.什么是网店店招设计？-网店店招设计指的是在网店中使用图片、文字和色彩等元素，通过设计来吸引用户进入店铺、了解产品和促成交易的过程。

2.网店店招设计的重要性和作用-网店店招设计可以吸引用户的注意力，增加店铺的曝光度和知名度；-网店店招设计可以传达店铺的定位和特色，让用户更好地了解产品和品牌；-网店店招设计可以提升用户的购买欲望，促成交易的发生。

3.网店店招设计的基本原则-简洁明了：设计要简单、直接，能够一眼看清楚并理解店铺的主题和特色；-突出亮点：突出店铺的独特卖点和特色产品，吸引用户的注意力；-配色协调：选择合适的配色方案，使整个店招设计看起来和谐、舒适；-字体清晰：选择易读的字体，确保文字能够清晰传达信息；-与产品相匹配：店招设计要与店铺所售卖的产品相匹配，形成统一的整体形象；-引导用户：设计要有明确的引导作用，告诉用户该如何进行下一步操作。

4.网店店招设计的技巧-制作店招图：使用设计工具或平台制作店招图，包括横幅、标语、海报等；-图片选择：选择高清、有吸引力、与店铺定位相符的图片；-标题吸引：设计能够吸引用户的标题，通过短语或口号来引起观众的兴趣；-产品展示：展示店铺的热门产品或代表性产品，让用户对产品有直观的认知；-品牌展示：通过设计展示店铺的品牌形象，包括标志、标志色等；-店铺导航：设计能够方便用户进行导航的按钮或链接，提供多个入口到店铺的关键页面。

教学过程：1.导入：简要介绍网店店招设计的概念和作用，引起学生的兴趣。

2.理论授课：讲解网店店招设计的重要性、基本原则和技巧。

3.实例分析：以知名网店为例，分析其店招设计的优点和特点，并与基本原则进行对比。

4.设计实践：学生们根据所学知识，设计一个虚拟网店的店招，包括横幅、标语、海报、产品展示等。

***学校网店运营科教案（甲）***学校网店运营科教案（乙）5分钟一、导入新课1、检查学生是否完成课前的任务A、要求学生到网上搜索一个动态通栏广告。

B、记录相关信息及截图。

2、给学生展示有特色的动态通栏广告，充分调动学生的兴趣，激发他们的学习欲望。

3、提出问题：构成通栏广告的要素是什么？4、引入课题，指出通栏广告的制作是通过布局和模块完成的。

（板书：4.5 制作通栏广告）通过这个环节，激发学生学习新课兴趣的同时，引入本节课的主题。

明确本节课的任务：制作通栏广告***学校网店运营科教案（乙）授课时间星期第节班级第2页时间安排教学内容、教学过程教学方法与学习指导25分钟二、新课讲授1、熟悉通栏广告的制作方式板书：三个子任务：添加布局单元添加模块设置图片轮播2、将通栏广告制作的整个流程分为三个子任务：演示三个子任务的操作过程。

任务一：添加布局单元。

首先进入我的淘宝-店铺管理-店铺装修，进入之后点击布局管理。

添加成功之后，页面上会多出一个新布局，鼠标移到十字星图标上移动鼠标可调整通栏布局的位置。

进入布局管理之后点击添加布局单元，进入后选择950通栏布局模块。

将通栏广告制作流程向学生展示学生认真观察老师的演示。

通过这一环节，可以促进学生对通栏广告制作流程的了解。

“学习中心”的辅助资料，让学生在软件的应用过程中思路清晰，操作简易，大大提高了学生的学习主动性。

***学校网店运营科教案（乙）授课时间星期第节班级第3页时间安排教学内容、教学过程教学方法与学习指导135分钟在添加模块前，要求学生先完成对页面的整体布局，再进行下一步任务。

任务二：添加模块。

根据即将添加的模块在页面所处的位置，将新添加的布局单元移到合适的位置。

点击添加模块后进入模块管理页面，点击添加图片轮播。

（因为此处制作的是动态通栏广告）***学校网店运营科教案（乙）任务三：设置图片轮播。

保存后，自动返回店铺装修首页这里就多了一个图片轮播模块，点击上面的【编辑】按钮，进入编辑小窗口（或者双击整个蓝色区域）。

二、网店的LOGO设计要点3连连看——LOGO 设计方法4、任务实施任务2：LOGO 设计制作一—乐乐包袋(1) 设计尺寸：淘宝官方的建议尺寸为80PX*80PX 或100PX*100PX (正方形)，大小V80KB,格式:jpg、gif、pngo(2) Log。

的设计技巧(3) logo设计中的色彩运用技巧三、常见设计思路(1) 以对象全名进行字体设计。

(2) 以对象名称字首为主的创意设计。

(3) 以对象性质进行象征设计(4) 抽象符号。

(5) 以历史、典故、社会特性、地域性特征等进行创意设计任务一、根据LOGO设计方法选择恰当的LOGO案例，进行连线。

乐乐效果图任务二、乐乐包袋LOGO设计制作。

微课视频：观看“乐乐包袋LOGO设计制作”视频，完成LOGO设计制作设计思路：以对象性质进行象征设计。

通过适合公司的性质、经【师】1. 讲解LOGO的设计尺寸要求，提炼设计的技巧要点和色彩运用技巧。

2. 通过案例分析，展示5个LOGO常见的设计创作思路。

引出要进行的实训任务。

【生】1. 学习优秀LOGO设计，掌握5个常见的LOGO设计创作思路。

2. 认真聆听老师对于相关知识的巩固讲解【师】1. 设置i博导平台“连连看”拖拽题目，引导学生完成任务一。

2. 实训完成后，老师进行题目讲解。

【生】1. 学生登录i博导平台，完成任务2. 查看答案，分析答案。

【师】1. 布置实训任务二。

2. 根据学生的学习情况，实时的点拨、引导启发学生遇到的因难问题。

注意尽量让学生独立自主的完成学习任务。

3. 实训完成后，老师结合操作过程中的问题进行总结和知识点讲解。

通过优秀案例分析，了解LOGO设计的方法，归纳总结了解logo设计的要点，解决教学的重点。

(10分钟)通过连连看的题日，强化学生对LOGO设计常见方法的理解和运用，吸引学生学习的兴趣。

信息化的手段可以辅助教师及时掌握学生对重难点掌握程度，突破重点。

(5分钟)I.店铺Logo是结合内容做创意，内容是基础，创意作为加分项。