全国xx杯说课大赛商贸类一等奖作品：《网店装修之banner设计》教学课件

1、作者：欧阳俊 单位：广东省佛山市顺德区陈村职业技术学校,网店装修之banner设计,导入任务-我心中的最美banner,1、通过浏览淘宝网店，选择你认为最美的banner，截屏保存到电脑上，然后通过广播上交图片。,学生自主探究,1、从学生上交图片中，总结banner的构成元素。,（2）感悟“banner之意”,5,1定义 可以作为网站页面的横幅广告，也可以作为游行活动时用的旗帜，还可以是报纸杂志上的大标题。Banner主要体现中心意旨，形象鲜明表达最主要的情感思想或宣传中心。 因此网页Banner设计在这里起到了至关重要的作用，特别是首页的Banner,直接决定了用户的停留。,Banner知识

2、,讲解知识,顾及网店产品定位 因为涉及的产品不同，网店有着不同的风格，所以设计师们做设计 的时候也要考虑到如体育产品的运动感，服装产品的时尚和潮流等。,主标和副标搭配 1、从主次上来说，主标要起到吸引眼球的效果，所以字体要大颜色要醒目。 副标起到从内容上和形式上都辅助主标的作用。一个好的banner标题文字处理都比较 饱满，比较集中。,色彩的情感联想 色彩的情感联想，主要从具体联想和抽象联想两个维度划分：,明白文字在Banner中占主导地位 从构成上讲，一个banner分为2个部分，一为文字，二为辅助图。辅助图虽然占据大多数的面积，但是不加以文字的说明，很难让用户知道这个banner要说明什么

3、。要读一个人的喜怒哀乐，只要读其五官即可。在一个banner里面，标题文字起着五官一样的作用，所以个人觉得文字才是整个banner的主角。,如果主标太长，在不舍得删文字的情况下，对主标中重要关键字进行权重，突出主要的信息，弱化的、之、和年第X届这种信息量不大的词。如果整体文字太短，画面太空，可以用一些加入一些辅助信息丰富画面。如加点英文，域名，,顺应用户的浏览习惯 我们知道大多数的用户在浏览网页的时候都是从上到下，从左到右的浏览。为了使banner更容易被用户浏览,我们应该顺应用户这样的浏览习惯，糟糕的设计会让用户无所适从，焦点到处都是。,构建辅助视觉 1、文字+主体物的两段式，文字图案相辅相

4、成，起到文字言事图案帮助理解的效果。这样的banner适合做介绍类或者产品类。,2、主体物+背景+文字的三段式，特点虚实结合，主次关系明显，也是效果最好，用的最广泛的一种形式。,2020/6/22,任务 （1）根据要求，选择自已最熟悉的软件，如 Photoshop/firework/imageready/coreldraw等 （2）根据样例和提供的素材，完成一个静态banner设计。,“banner初创作”,2020/6/22,Banner模拟设计,2020/6/22,以photoshop为例，简要演示制作方法。,2020/6/22,展示学生作品 提问：banner设计难不难？有什么不足？ （

5、1）必须熟悉图形编辑软件操作 （2）图片输出大部分都是静态图片 （3）难以制作动态banner,感受“banner之魂”,2020/6/22,（1）简要介绍阿里妈妈bannermaker在线banner设计。 （2）了解阿里妈妈bannermaker的使用方法。,个性banner随心变,2020/6/22,2020/6/22,Banner设计分析,设计步骤整理 （1）结合网店经营产品或品牌，确定banner设计主题、表现手法等。 （2）选定banner主体、文字等 （3）选择色彩、背景、搭配图等。 （4）对图文位置、大小进行调整，重点突出主体视觉效果，体现广告宣传理念。,操作演示,以某一女鞋网

6、店banner为例， 1、在photoshop或其它图片编辑软件中处理好素材图片，如抠图、裁剪等，输出png图片格式。,将处理好的图片上传到alimama的素材中,按照设计图进行素材的排版,添加适当的装饰、效果等,发布/预览banner作品,2020/6/22,（1）任务一：利用给定素材完成大小为950*120的banner设计。 （2）任务二：展示学生作品，讨论其中不足，完善设计方案。,任务：提升练习,实例分析-学生作品banner大比拼,评一评，比一比,2020年6月22日4时25分,张青,32,（1）任务一：对女鞋网店banner进行背景替换，观察不同色彩下的banner效果。 （2）任务二：总结banner设计中应该注意的问题。,任务：banner再体验,在线测试效果-上架,Banner设计注意事项,简