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

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

2、首页的Banner,直接决定了用户的停留。 Banner知识 顾及网店产品定位 因为涉及的产品不同，网店有着不同的风格，所以设计师们做设计 的时候也要考虑到如体育产品的运动感，服装产品的时尚和潮流等。 色彩 情感 抓住 关键字 顺应浏 览习惯 辅助 视觉 分清主标 与副标 网店产 品定位 主标和副标搭配 1、从主次上来说，主标要起到吸引眼球的效果，所以字体要大颜色要醒目。 副标起到从内容上和形式上都辅助主标的作用。一个好的banner标题文字处理都比较 饱满，比较集中。 色彩的情感联想 色彩的情感联想，主要从具体联想和抽象联想两个维度划分：色彩的情感联想，主要从具体联想和抽象联想两个维度划分：

3、 明白文字在Banner中占主导地位 从构成上讲，一个banner分为2个部分，一为文字，二为辅助图。辅助 图虽然占据大多数的面积，但是不加以文字的说明，很难让用户知道 这个banner要说明什么。要读一个人的喜怒哀乐，只要读其五官即可 。在一个banner里面，标题文字起着五官一样的作用，所以个人觉得 文字才是整个banner的主角。 如果主标太长，在不舍得删文字的情况下，对主标中重要关如果主标太长，在不舍得删文字的情况下，对主标中重要关 键字进行权重，突出主要的信息，弱化键字进行权重，突出主要的信息，弱化的的、之之、和和年年第第 X届届这种信息量不大的词。如果整体文字太短，画面太空，这种信

4、息量不大的词。如果整体文字太短，画面太空， 可以用一些加入一些辅助信息丰富画面。如加点英文，域名，可以用一些加入一些辅助信息丰富画面。如加点英文，域名， 顺应用户的浏览习惯 我们知道大多数的用户在浏览网页的时候都是从上到下，从左到右的浏览。为我们知道大多数的用户在浏览网页的时候都是从上到下，从左到右的浏览。为 了使了使banner更容易被用户浏览更容易被用户浏览,我们应该顺应用户这样的浏览习惯，糟糕的设我们应该顺应用户这样的浏览习惯，糟糕的设 计会让用户无所适从，焦点到处都是。计会让用户无所适从，焦点到处都是。 构建辅助视觉 1、文字、文字+主体物的两段式，文字图案相辅相成，起到文字言事图案帮

5、助理解的效果。这样的主体物的两段式，文字图案相辅相成，起到文字言事图案帮助理解的效果。这样的banner适合适合 做介绍类或者产品类。做介绍类或者产品类。 2、主体物、主体物+背景背景+文字的三段式，特点虚实结合，主次关系明显，也是效果最好，用的最广泛的一种形式。文字的三段式，特点虚实结合，主次关系明显，也是效果最好，用的最广泛的一种形式。 第第 1 章章 计计 算算 机机 基基 础础 知知 识识 2020/3/28 任务任务 （1）根据要求，选择自已最熟悉的软件，如根据要求，选择自已最熟悉的软件，如 Photoshop/firework/imageready/coreldraw等等 （2）根

6、据样例和提供的素材，完成一个静态）根据样例和提供的素材，完成一个静态 banner设计。设计。 第第 1 章章 计计 算算 机机 基基 础础 知知 识识 2020/3/28 Banner模拟设计模拟设计 第第 1 章章 计计 算算 机机 基基 础础 知知 识识 2020/3/28 以以photoshop为例，简要演示制作方法。为例，简要演示制作方法。 第第 1 章章 计计 算算 机机 基基 础础 知知 识识 2020/3/28 展示学生作品展示学生作品 提问：提问：banner设计难不难？有什么不足？设计难不难？有什么不足？ （1）必须熟悉图形编辑软件操作必须熟悉图形编辑软件操作 （2）图片输

7、出大部分都是静态图片）图片输出大部分都是静态图片 （3）难以制作动态）难以制作动态banner 第第 1 章章 计计 算算 机机 基基 础础 知知 识识 2020/3/28 （1）简要介绍阿里妈妈简要介绍阿里妈妈bannermaker在线在线 banner设计设计。 （2）了解阿里妈妈了解阿里妈妈bannermaker的使用方法的使用方法。 第第 1 章章 计计 算算 机机 基基 础础 知知 识识 2020/3/28 第第 1 章章 计计 算算 机机 基基 础础 知知 识识 2020/3/28 第第 1 章章 计计 算算 机机 基基 础础 知知 识识 设计步骤整理设计步骤整理 （1）结合网店经

8、营产品或品牌，确定结合网店经营产品或品牌，确定banner设设 计主题、表现手法等。计主题、表现手法等。 （2）选定）选定banner主体、文字等主体、文字等 （3）选择色彩、背景、搭配图等。）选择色彩、背景、搭配图等。 （4）对图文位置、大小进行调整，重点突出主）对图文位置、大小进行调整，重点突出主 体视觉效果，体现广告宣传理念。体视觉效果，体现广告宣传理念。 以某一女鞋网店以某一女鞋网店banner为例，为例， 1、在、在photoshop或其它图片编辑软件中处理好素或其它图片编辑软件中处理好素 材图片，如抠图、裁剪等，输出材图片，如抠图、裁剪等，输出png图片格式。图片格式。 将处理好的

9、图片上传到alimama的素材中 按照设计图进行素材的排版 添加适当的装饰、效果等 发布/预览banner作品 第第 1 章章 计计 算算 机机 基基 础础 知知 识识 2020/3/28 （1）任务一：）任务一：利用给定素材完成大小为利用给定素材完成大小为950*120 的的banner设计。设计。 （2）任务二：）任务二：展示学生作品，讨论其中不足，展示学生作品，讨论其中不足， 完善完善设计设计方案方案。 第第 1 章章 计计 算算 机机 基基 础础 知知 识识 评一评，比一比评一评，比一比 20202020年年3 3月月2828日日1 1时时1919分分 张青张青 3232 （1）任务一

10、：）任务一：对女鞋网店对女鞋网店banner进行进行 背景替换，观察不同色彩下的背景替换，观察不同色彩下的banner 效果。效果。 （2）任务二：）任务二：总结总结banner设计中应该设计中应该 注意的问题注意的问题。 第第 1 章章 计计 算算 机机 基基 础础 知知 识识 BannerBanner设计注意事项设计注意事项 简约简约 突出主体突出主体 内容清晰内容清晰 正确搭配色彩正确搭配色彩 结构合理结构合理 20202020年年3 3月月2828日日1 1时时1919分分 张青张青 3434 第第 1 章章 计计 算算 机机 基基 础础 知知 识识 2020/3/28 网店网店banner的作用的作用 Banner的设计要求的设计要求 Banner的设计技巧的设计技巧