五大步骤!细说Banner图设计之平面构成的奥秘

合集下载

平面构成设计步骤

平面构成设计步骤

平面构成设计是视觉艺术设计的基础课程,其步骤主要包含以下几个阶段:
1. 研究与理解主题:首先,明确设计的目标和主题,对设计背景、目的及受众进行深入理解和分析。

2. 收集素材与灵感:根据设计主题收集相关的图片、色彩、形状等视觉元素,也可以从自然、生活、艺术作品中获取灵感。

3. 元素提炼与选择:从收集的素材中提炼出点、线、面、色彩、肌理等基本视觉元素,并根据设计需求选择合适的元素。

4. 布局与组合:
- 确定画面的基本构成形式,如平衡、对比、节奏、韵律、重复、渐变、发射等。

- 进行空间分割,运用各种构成法则进行视觉元素在二维空间中的布局和组合,形成初步的设计草图。

5. 设计制作与调整:将构思的具体方案通过手绘或电脑软件实现出来。

在这个过程中可能会反复修改和完
善,以达到最佳的视觉效果和表达意图。

6. 评价与反馈:完成初步设计后,通过自我审视、同行讨论或用户测试等方式获取反馈,进一步优化设计方案。

7. 最终完善与呈现:根据反馈意见对设计作品进行调整和完善,最后呈现出符合主题、具有审美价值和创新性的平面构成设计作品。

平面构成完整ppt课件

平面构成完整ppt课件
排列方式的改变 使人产生从二维平 面到三维空间的不 同感受。
.
• 线是设计中最富表现力的元素
线的不同排列方式 可以产生空间感。
.
3. 面
1).面的造型特征 面是线移动的轨
迹。从视觉上看,任 何点的扩大和聚集, 线的宽度增加与围合 都形成了面。其造型 特征是视觉上的充实 感。
.
3. 面
2).面的分类 面与“形状”
加工器具
喷画用具-喷枪装置等 精密仪器-相机、荧光幕等 刀削工具-剪刀、美工刀、锉刀、研磨机等其他工艺机器 挖洞工具-锥子、打孔机、穿孔器等
其 他 钉书机等
.
• 举例
.
第三讲 平面构成技法
• 造型要素 • 形式原理 • 设计法则
.
一. 造型要素
造型要素


线

立体空间
色相

明度
纯度
定 形-具有数理规则性的构造 非 定 形-没有数理规则性的构造
.
• 在包豪斯的理论体系中,构成课的种类按其研究的性质和特点来分可以分 为平面构成、立体构成和色彩构成。但将三者结合起来,可以应用到各种 设计门类中去。
包装设计
构成
平面构成 立体构成 色彩构成
应用设计
广告设计 标志设计 服装设计 书籍装帧
产品造型
室内设计
景观设计 …
.
二. 什么是平面构成?
• 平面构成是研究关于二维空间设计规律和设计方法的理论课程。 • 平面构成是研究平面组成形式和构成规律的设计基础实践课程。
基础绘画(具象)
设计(具象到抽象再回到具象)
.
平面构成 进入第三讲
材料和工具 构成技法
造型要素 形式原理 设计法则

平面设计之版面构成

平面设计之版面构成

平面设计之版面构成平面设计之版面构成面设计之“版面构成”也叫“版面设计”,是现代视觉传达设计艺术的重要组成部分,是一切视觉表现的基石。

在商品经济高速发展,设计同质化问题日益严重的时代背景下,版面设计作为一种技术与艺术高度统一的艺术形式,其历史、发展、概念、创意、形式,构成之形式法则的重要性逐步为大众所关注和了解。

版面构成艺术已成为在“眼球经济”“读图时代”满足大众物质、精神的审美诉求提升的最佳选择,同时也成为审美视觉认知最直接、最重要形式和窗口。

三大构成(平面构成、立体构成、色彩构成)作为艺术设计类院校的必修课程之一,已为大家所熟悉和了解。

作为构成中新的组成部分和分支的“版面构成”、“版式设计”,也已受到人们越来越多的关注与重视!从中国画中的“画面经营”“布局”“计白当黑”“虚实相生”到现代商业美术设计、广告、平面等视觉设计中的“版式”“构图”,“版面构成”的作用和意义可见一斑。

事物的出现,有其偶然性也有其必然性。

版面构成是伴随着现代科学信息技术和经济飞速发展逐步兴起的。

版面构成作为平面设计中的重要组成部分,是一切视觉传播艺术施展的平台与基础,与民族文化传统、审美观念和时代背景、精神风貌等因素紧密相连。

版面构成遍布海报招贴、报纸广告、书刊、包装设计、杂志广告、直邮广告(DM)、企业形象识别(VI)、用户界面(UI)网络媒体等媒介领域。

它为视觉形象化传播和表现以及新的视觉理念和文化审美诉求,提供了无限的发挥空间和舞台。

一、版面构成的定义、渊源及发展版面构成是指在有限的平面二维空间里,依据特定内容需要,结合造型要素及形式法则,将版面构成诸元素――文字、图片图形、线条和颜色色块等规划布局、有序排列,从而将创意理念和信息以完美的视觉形式迅捷传达给受众及目标人群。

版面构成兼具艺术性、技术性特点,它是一切视觉传播平台和基石。

正所谓“以史为鉴,可以知兴替”,深入认知和了解事物的历史渊源,对于事物提升与发展有重要意义!谈到版面构成,首先要提到的是20世纪初欧洲的两位大师――莫里斯和李捷斯基。

美工提升2-构图之banner篇

美工提升2-构图之banner篇
美工提升2——构图 之banner篇
讲师
目录
1
Banner简介
2
Banner的构图
3
Banner的设计技巧
4
Banner制作5步走
6/6/2021
Banner简介
• Banner的定义
– 可以作为网站页面的横幅广告,也可以作为游 行活动时用的旗帜,还可以是报纸杂志上的大 标题。Banner主要体现中心意旨,形象鲜明表 达最主要的情感思想或宣传中心
Banner制作5步走
• 1.新建图层
Banner制作5步走
• 2.放上合适的背景
Banner制作5步走
• 3.放上促销产品的主图
Banner制作5步走
• 4.修饰元素
Banner制作5步走
• 5.促销文字
总结
• Banner简介 • Banner的构图 • Banner的设计技巧 • Banner制作5步走
• 用最短的时间激起点击欲望
– 让用户在最短的时间读懂你的图
Banner的设计技巧
• 色彩不要过于夸张,要醒目
– 突出卖点,吸引买家眼球
Banner的设计技巧
• 产品数量不宜过多
– 对比下面两张图,哪一款更易于识别和引起关 注呢?
Banner的设计技巧
• 信息数量要平衡
– 做好各种信息的平衡和协调非常重要
Banner的设计技巧
• 主题明确
– 突出产品主题,让用户一眼就能识别广告含义, 减少过多的辅助干扰因素
Banner的设计技巧
• 重点文字突出
– 重点文字要醒目,其余的则要相应的弱化
Banner的设计技巧
• 符合阅读习惯
– 阅读视线要符合用户从左到右、从上到下的浏 览习惯。

平面设计的几大原理【平面设计编排构成原理】

平面设计的几大原理【平面设计编排构成原理】

平面设计的几大原理【平面设计编排构成原理】多媒体观众一方面从计算机屏幕上所呈现的视觉表征得到信息,做出反应;另一方面根据其美感经验,从计算机屏幕上赏心悦目的视觉呈现,引起他的良好沟通情绪。

一个赏心悦目的视觉呈现有赖于设计者的创意﹝idea﹞、表现技巧﹝technique﹞、编排﹝lay-out﹞能力。

目前许多国内设计的计算机屏幕视觉呈现是依赖设计者的感觉来处理,或者凭其多年的实务经验来完成。

但是「感觉」对想学习多媒体设计的人是很难捉摸的,「经验」更是残酷的。

因此将「美的原则」运用于平面设计的编排与构成,形成「平面设计编排构成原理」,可以帮忙初学者;甚至对设计师而言,在其面临缺乏「感觉」的时候,还能创作出具水准的作品。

﹝一﹞大小的对比大小关系为造形要素中最受重视的一项,几乎可以决定意象与调和的关系。

大小差别少,给人的感觉较沈着温和,大小的差别大,给人的感觉较鲜明,而且具有强力感。

﹝二﹞明暗的对比阴与阳、正与反、昼与夜等等,如此类的对比语句,可使人感觉到日常生活中的明暗关系。

初诞生的婴儿,最初在视觉上只能分出明暗,而牛、狗等动物虽能简单识别黑白,可是,对彩度或色相却无法轻易识别,由此可知,明暗﹝黑和白﹞乃是色感中最基本的要素。

﹝三﹞粗细的对比字体愈粗,愈富有男性的气概。

若代表时髦与女性,则通常以细字表现。

细字如果份量增多,粗字就应该减少,这样的搭配看起来比较明快。

﹝四﹞曲线和直线的对比曲线很富有柔和感、缓和感;直线则富坚硬感、锐利感,极具男性气概。

自然界中,皆由这两者适当混合。

平常我们并不注意这种关系,可是,当曲线线或直线强调某形状时,我们便有了深刻的印象,同时也产生相对应的情感。

故我们常为加深曲线印象,就以一些直线来强调,也可以说,少量的直线会使曲线更引人注目。

﹝五﹞质感的对比在一般人的日常生活中,也许很少听到质感这句话,但是在美术方面,质感却是很重要的造形要素。

譬如松弛感、平滑感、湿润感等等,皆是形容质感。

广告banner设计要素及构图技巧

广告banner设计要素及构图技巧

8.优秀广告素材分享
➢ 主打单品 、上下结构
1. 配色:粉色会更吸引购买化妆品的年 轻女性,粉色属于比较梦幻、可爱的颜 色,适合美护、女装类目使用
2. 商品图:直接鲜明的告诉了买家卖场 的主题,热销xx件突出了商品的优质
3. 主题噱头:综合榜单的形式(美妆热 卖榜 xx商品xx元)给了没有购买方向 的顾客建议
Banner设计要素及构图技巧
罗春艳 2014年1月
1.什么是 banner
Banner的核心使命其实是吸 引用户关注,然后被点击。
是多数新产品,新事物,各 种优惠活动呈现给客户的主 要第一途径
所以它是主题性明确,突出ห้องสมุดไป่ตู้关键内容并有效抓住用户眼 球的一种广告
主要类型:
• 页面中的横幅广告 • 报纸杂志上的大标题
8.优秀广告素材分享
➢ 无按钮型小banner
1. 配色:粉蓝色切合凉鞋主题,给人一 种清凉的感觉
2. 产品图的放置不仅告诉了买家专题的 内容,也更容易带动了买家点击
3. 噱头足:4折封顶字样的突出;免邮 试免邮换比起包邮,对于鞋子这种对尺 寸高要求的类别更有吸引力
8.优秀广告素材分享
➢ 按钮型小banner
中画的感觉。构图规整平衡,稳定坚固。
此类构图给用户心情:稳定可信赖,产品可靠。
8.优秀广告素材分享
➢ 主打折扣、左右结构
1. 配色:颜色对比鲜明,吸引眼球,红 色和橙色给人一种购买的冲动和欲望
2. 下降标志更给人一种降价的视觉感
3. 产品图:左边商品图和模特突出了卖 场的主题和内容
4. 噱头足:任意2双 119包邮,捆绑销 售也可以提高客单价
好的构图可以提升商品的品质感,亦可以利用各种构图方法,突出你想要表达的内容,传达 出该banner的真正目的,吸引用户的点击,产生购买欲望。

界面设计——平面设计的构图原理与规律

界面设计——平面设计的构图原理与规律

界面设计——平面设计的构图原理与规律前言:黄金分割黄金分割最早见于古希腊和古埃及。

黄金分割又称黄金率、中外比,即把一根线段分为长短不等的a、b两段,使其中长线段的比(即a+b)等于短线段b对长线段a的比,列式即为a:(a+b)=b:a,其比值为0.6180339……这种比例在造型上比较悦目,因此,0.618又被称为黄金分割率。

黄金分割长方形的本身是由一个正方形和一个黄金分割的长方形组成,你可以将这两个基本形状进行无限的分割。

由于它自身的比例能对人的视觉产生适度的刺激,他的长短比例正好符合人的视觉习惯,因此,使人感到悦目。

黄金分割被广泛地应用于建筑、设计、绘画等各方面。

在摄影技术的发展过程中,曾不同程度地借鉴并融汇了其他艺术门类的精华,黄金分割也因此成为摄影构图中最神圣的观念。

应用在摄影上最简单的方法就是按照黄金分割率0.618排列出数列2、3、5、8、13、21……并由此可得出2:3、3:5、5:8、8:13、13:21等无数组数的比,这些数的比值均为0.618的近似值,这些比值主要适用于:画面长宽比的确定(如135相机的底片幅面24mmX36mm就是由黄金比得来的)、地平线位置的选择、光影色调的分配、画面空间的分割以及画面视觉中心的确立。

摄影构图通常运用的三分法(又称井字形分割法)就是黄金分割的演变,把上方形画面的长、宽各分成三等分,整个画面承井字形分割,井字形分割的交叉点便是画面主体(视觉中心)的最佳位置,是最容易诱导人们视觉兴趣的视觉美点。

摄影构图的许多基本规律是在黄金分割基础上演变而来的。

但值得提醒的是,每幅照片无需也不可能完全按照黄金分割去构图。

千篇一律会使人感到单调和乏味。

关于黄金分割,重要的是掌握它的规律后加以灵活运用。

一、平面设计的构图原理1.平面设计构图最初是由绘画构图发展来的遵循绘画的构图法则,关心绘画的美学价值,不重视构图的视觉传达效果,这适应当时经济不发达,信息量小的特点.在市场经济发达的今天,各种媒体信息充斥人们视野的今天,平面设计必须把视觉传达效果放在第一位,从视觉信息传达的立场出发,研究构图与视觉\心理的关系,处理好美与传达效果的关系, 在摄影中,构图被人们理解为经营位置,是解决形象与空间的关系,他的任务和目的是为了创造美德形式.显然这不符和现代平面设计的第一原则的,这也是我们必须从摄影构图的思维中走出来的原因和必要性. 美与信息传达之间存在辩证关系,即有利于传达的形式必须是美的,然而美的形式不一定是有利于信息传达的.如调和是一种美,但调和的形与色在调和的环境里就必然丧失视觉冲击力.因此,只有构成视觉冲击力,又有为受众所接受的形式,才是平面设计的内涵.2.平面设计构图与视觉构图要诉诸视觉,必须遵循视觉认识的规律.视觉注意在没有心理需求的情况下是不易引起人们的注意的.视觉注意一般有两种形式:主动注意和被动注意被动注意是人们尚无主观意识,没有内在的生理和心理需求,在外界刺激下产生的..平面设计大多情况下属于被动注意.所以在这样的刺激中,需要注意以下几方面:(1) 足够的面积同一构图中,主要信息的面积要大于次要信息的面积(2) 适度的对比把握对比的度,,也要避免过激(3) 简练简练的形式易被感知,切忌画蛇添足.(4) 新颖适应与视觉特点,新颖的构图易引起人们的注意,切忌墨守成规.3.构图与心理不同的受众有不同的心理需求,如青少年喜欢生动活泼的形式,女性喜欢优雅的形式,而老年人喜欢稳重平和的形式,因此平面设计要对不同的特定受众和信息内容,寻求最佳的表达方式,易引起受众的感情共鸣. 4.构图与创造设计是一门创造的艺术.独特的个性是视觉传达设计的生命.克服思维惰式,开发创造思维的能力是现代设计师的基本素质.二、平面设计构图的构成要素平面设计是将各种信息通过适当的形式转化为视觉语言进行传播,从这一意义上将讲,其构成要素是由信息内容和表现形式两类构成1.内容要素(1)内容包括文字、插图、标志文字文字一般可分为标题、内容、落款三部分,构图时处理好主次,引导视觉有序阅读插图形象生动,通俗易懂,不受文化背景限制,有利于提高兴趣和注意力. 标志商标,如企业的形象标志、注册码、会议标志、防伪标志等(2).内容要素的形态转化内容要素必须转化为点线面等形态要素,才能按照平面构成的原理构成画面..在形态化的过程中,以准确传达信息为第一要素,切忌不能一味的追求形式的美感.文字的形态化点线面的字母的形象组合状态表现,重要的信息文字,如商品的品名牌名等,为了增强其视觉冲击力,可以设计成不同的形形态。

画册设计的版面构成的形式原理

画册设计的版面构成的形式原理

画册设计的版面构成的形式原理标签:版面设计版面构成平面设计构成原理版面构成离不开艺术表现。

美的形式原理是规范形式美感的基本法则。

它是通过重复与交错、节奏与韵律、对称与均衡、对比与调和、比例与适度、变异与秩序、虚实与留白、力场与网格、变化与统一等形式美构成法则来规划版面,把抽象美的观点及涵养诉诸于观者,并从中获得美的教育和感受。

它们之间是相辅相成、互为因果的,统一地共存于一个版面之中。

一、重交与交错在版面构成中,不断重复使用相同的基本形或线,它们的形状、大小方向都是相同的。

重复使设计产生安定、整齐、规律的统一。

但重复构成后的视觉感受有时容易显得板、平淡、缺乏趣味性的变化。

故此,我们在版面中可安排一些交错与重叠,打破版面呆板、平淡的格局。

二、节奏与韵律节奏与韵律来自于音乐概念,正如歌德所言:“美丽属于韵律。

”韵律被现代版面构成所吸收。

节奏是按照一定的条理、秩序、重复连续地排列,形成一种律动形式。

它有等距离的连续,也有渐变、大小、长短、明暗、形状、高低等的排列构成。

在节奏中注人哭的因书和情感——个性化,就有了韵律。

韵律就好比是音乐中的旋律,不但有节奏更有情调,它能增强版面的感染力,开阔艺术的表现力。

三、对称与均衡两个同一形的并列与均齐,实际上就是最简单的对称形式。

对称是同等同量的平衡。

对称的形式有以中轴线为轴心的左右对称;以水平线为基准的上下对称和以对称点为源的放射对称;还有以对称面出发的反转形式。

其特点是稳定严、整齐、秩序、安宁、沉静。

均衡是一种有变化的平衡。

它运用等量不等形的方式来表现矛盾的统一性,揭示内在的,含蓄的铁序和平衡,达到一种静中有动成动中有静的条理美和动态美。

均衡的形式富于变化、趣味,具有灵巧、生动、活泼、轻快的特点。

四、对比与调和对比是差异性的强调。

对比的因素存在于相同或相异的性质之间。

也就是把相对的两要索互相比较之下,产生大小、明暗、黑白、强弱、粗细、疏密、高低、远近、硬软、直曲、浓淡、动静、锐钝、轻重的对比。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

五大步骤!细说Banner图设计之平面构成的奥秘在讲之前,我先给大家列一个内容大纲:一、平面构成的含义是什么?二、电商Banner图是由什么组成的?三、我们该如何在Banner图设计中运用平面构成呢?四、平面构成之于电商Banner图的意义是什么?五、总结注:前半部分是给大家讲解的基础知识,后半部分是运用这些基础知识结合实例讲解,所以建议从头到位耐心看完哦,需要些时间消化(经济基础决定上层建筑嘛,前面不看后面也就看不懂了),接下来我们一个个问题来解剖:一、平面构成的含义是什么?百度百科的解释是:平面构成是视觉元素在二次元的平面上,按照美的视觉效果,力学的原理,进行编排和组合,它是以理性和逻辑推理来创造形象、研究形象与形象之间的排列的方法,是理性与感性相结合的产物。

而我的理解是:平面构成主要是在二维空间运用点、线、面结合一定的规律所形成的一种视觉语言,他可以是抽象的,也可以是具象的,可以是感性的,也可以是理性的,同时它也不是独立存在的,而是伴随着色彩/肌理/光影等而存在的。

基本上世间万物,所有我们接触到的或无法接触到的,看得见的或看不见的事物里都有平面构成的运用和身影。

二、电商Banner图是由什么组成的?Banner组成要素包含4个方面:文案、商品/模特、背景、点缀物(可有可无)。

而我在之前反复强调过的,Banner的作用是:宣传/展示/广而告之/准确传达信息。

三、我们该如何在Banner图设计中运用平面构成呢?在前面我们提到,平面构成主要是在二维空间运用点、线、面结合一定的规律所形成的一种视觉语言,而Banner中的所有元素(文案/商品或模特/背景/点缀物)其实都可以看作是平面构成里的点线面这些构成元素。

那么,接下来我们就需要了解3个有关平面构成的概念了:1、元素与元素之间的排列关系2、所有元素在一起所体现的构成形式3、了解几个常用的平面术语接下来,我们分别了解下这几个概念:1、元素与元素之间的排列关系它们之间的排列有下面这么几种:分离/相切/重叠/透叠/结合/减缺/差叠/重叠。

分离:形与形之间不接触,有一定距离。

相切:形与形之间的边缘正好相切。

重叠:形与形之间覆叠关系,由此产生上下前后的空间关系。

透叠:形与形有透明性的相互交叠,但不产生上下前后的空间关系。

结合:形与形相互结合成较大的新形状。

减缺:形与形相互覆叠,覆叠的形状被剪掉。

差叠:形与形相互交叠,交叠的部分产生一个新的形。

重合:形与形相互重合,变为一体。

举几个例子:2、所有元素在一起所体现的构成形式从所有元素(点线面)整体看,其构成形式主要有重复、近似、渐变、变异、对比、集结、发射、特异、空间与矛盾空间、分割、肌理及错视等等。

下面我们分别来举例说明:(1)重复,指在同一设计中,相同的形象出现过两次以上,重复是设计中比较常用的手法,以加强给人的印象,造成有规律的节奏感,使画面统一。

所谓相同,在重复的构成中主要是指形状、颜色、大小等方面的相同。

比如:1.形状的重复2.骨骼的重复3.大小的重复4.色彩的重复5.肌理的重复6.方向的重复重复举例:电影《满城尽带黄金甲》剧照:Banner举例:模特重复排列叠加到北京里,既是一种纹理也是一种模特展示的方式。

(2)近似,近似指的是在形状、大小、色彩、肌理等方面有着共同特征,它表现了在统一中呈现生动变化的效果。

近似的程度可大可小,如果近似的程度大就产生了重复感。

近似程度小就会破坏统一。

比如:1.形状的近似2.骨骼的近似近视举例:台湾的一对双胞胎姐妹Banner举例:相同款式不同颜色的鞋子,大小不一的波点。

(3)渐变,是我常常听说的一种效果,在自然界中能亲身体验到,在行驶的道路上我们会感到树木由近到远、由大到小的渐变。

比如:1.形状的渐变2.方向的渐变3.位置的渐变4.大小的渐变5.色彩的渐变6.骨骼的渐变7.光影的渐变大小渐变举例:故宫淘宝前段时间的表情包(重复+大小渐变)举个例子:鞋子的排列方式。

背景的纹理形状。

(4)对比,有时候是形态上的对比,有时是色彩和质感的对比。

对比可产生明朗、肯定、强烈的视觉效果,给人深刻的印象。

比如:1.形状的对比2.大小的对比3.色彩的对比4.肌理的对比5.位置的对比6.重心的对比7.空间的对比8.虚实的对比对比举例:买家秀和买家秀。

开玩笑了,我们举个正经的例子吧:照片ps前后Banner举例:(5)密集,密集在设计中是一种常用的组织图面的手法,基本形在整个构图中可自由散布,有疏有密。

最疏或最密的地方常常成为整个设计的视觉焦点,他其实也是对比的一种情况,越密集的地方给人感觉距离越远,反之越近。

1.点的密集2.线的密集3.面的密集密集举例:日本波点女王草间弥生的作品Banner举例:(6)发射,是一种常见的自然现象,太阳四射的光芒就是发射的。

发射具有方向的规律性,发射中心为最重要的视觉焦点,所有的形象均向中心集中,或由中心散开,有时可造成光学动感,会产生爆炸的感觉,有强烈的视觉效果。

1.中心点的发射2.螺旋式的发射3.同心式的发射发射举例:星轨/水波/观世音菩萨背后自带的光环△ 水波△ 星轨(摄影)△ 每次观世音菩萨出场总是会自带光环(大家小时候应该都比较熟悉这些画风了吧)Banner举例:放射线,使得画面聚焦到中间部分内容。

(7)特异,是指构成要素在有次序的关系里,有意违反次序,使少数个别的要素显得突出,以打破规律性。

1.形状的特异2.大小的特异3.色彩的特异4.方向的特异5.肌理的特异特异举例:其实各种类似于连连看的游戏,就是这么个原理:Banner举例:一家人站成一排,个头比较小的那一个就给人一种特异和俏皮的感觉,使画面不那么单调。

(8)空间利用大小:比如近大远小。

利用重叠:前后/上下等关系。

利用阴影:使物体具有立体感/空间感。

利用疏密:比如间隔越小,越密集,感觉就越远。

利用透视:平行线由宽到窄。

利用色彩:冷色远离,暖色靠近。

利用肌理:越粗糙越近,越细腻越远。

矛盾空间:真实不存在的空间,假想的。

虚实关系:远景/中景/近景。

矛盾空间举例:前段时间非常流行的一款游戏《纪念碑谷》空间感Banner举例:画面中的元素可以假想为一些有大有小的点,然后按一定透视空间规律摆放(近大远小)。

(9)分割,把整体分成小的部分。

比如:1.等形分割2.自由分割3.比例与数量分割举例:来自大自然的梯田分割Banner举例:不同比例大小的色块组成Banner的背景。

商品的排列也可以起到分割画面的作用。

(10)肌理,又称质感,由于物体的材料不同,表面的排列、组织、构造等不同,因而产生粗糙感、光滑、软硬感。

比如:1.笔触的变化2.凹凸不平的肌理3.喷绘/染4.自带的纹理效果肌理举例:木材等肌理Banner举例:背景采用喷墨+涂色的方式形成了一种很时尚的纹理。

(11)错视,因空间距离或周围环境所造成的视觉差。

主要有下面几种:1. 缪勒—莱依尔错视图中两条线是等长的,由于上下线段两端的箭头方向相反,上线段的箭头占据的空间大,所以上面的线显的较长。

2. 垂直线与水平线的错视大多数人往往把垂直线看的比水平线要长,这是高估的错觉。

在水平线长度为8-10mm时,这种错觉最大。

3. 透视错视图中的两条线是相等的。

看起来下面的要短,是因为透视的错觉。

4. 正方形的错视标准的正方形左右的边看上去大于上下的边。

5. 黑白错视图中黑白线段,由于白线段明度大,具有膨胀的现象,所以看以来比黑线段长。

6. 由于图形结构的影响而产生的错视图中组成三、四、五边形的边长都相等,但由于周长和面积的不同,产生边长的不同。

7. 对比错视高个子和矮个子在一起,高的会显的越高,矮的会显的越矮。

错视举例:比如虚实手绘拼接,比如有些摄影作品:这里要说明的是,错视在一些视差动画的网页页面里运用的会比较多一些,还有一些app的引导页,这里Banner举例的话可能也不太合适,不过也可以给大家看一下:比如这个画面里的黄色圆点,同样的黄色圆点,在暗色背景上是很突出的,但在同样是黄色的背景上就几乎看不见了,但其实原点是没变的,只是背景的颜色变了,就导致我们看到了不一样的结果。

3、了解几个常用的平面术语和谐统一/对比突出/对称/画面平衡/视觉重心/节奏韵律和谐统一:元素与元素之间,或所有元素构成的整体是一种协调的关系,比如大小/颜色风格等的协调。

Banner举例:整体的明亮色彩,搭配的雨滴小元素,以及雨伞产品和模特装扮,左中右排版方式都看起来很协调统一。

对比突出:即把2个质或者量反差很大的元素放在一起,使人感觉主体鲜明突出,整体又活跃而统一,比如大小/数量/色彩/形状的对比。

Banner举例:红色模特部分面积比较大,无论是色彩还是面积优势,都使得它在柠檬黄背景上特别突出。

对称:假设在一个图形中间画一条垂直或水平线后,画面的左右或上下2边是可以完全重合的,则我们称之为对称。

Banner举例:典型的对称构图咯,Bra就是一个对称的形状。

画面平衡:即元素与元素之间,元素与整体之间的大小/形状/数量/色彩/材质等的分布与视觉上的平衡。

Banner举例:左右两边色彩面积上是平衡的,但是数量和形状上的略微差异,使得画面不那么单调。

视觉重心:通过对画面中元素的数量/颜色/位置/大小/材质等进行处理,画面中所出现的视觉焦点。

Banner举例:模拟撕纸效果形成的破洞,有一种视觉聚焦的效果。

节奏韵律画面中的一种或多种元素按一定的规律排列,会产生音乐一般的旋律感。

Banner举例:鞋子摆放姿势不一样,产生了一种动律感,使画面不单调不呆板。

重点(高潮部分)来了以上讲了这么多知识点,那么结合这些知识点,我总结绘制了一些比较实用的Banner排版样式,如下图所示:以上呢,我就先总结这么多,其实所有的Banner版式都是大同小异的,因为我们前面提到,Banner是由文案/模特或商品/背景/点缀物组成的,而所有这些元素就相当于我们平面构成里的点线面,当我们改变这些元素的角度/距离/大小/数量/样式/颜色等,新的版式也就产生了,所以,大家不妨也试试看哦。

四、平面构成之于电商Banner图的意义是什么?Banner中的所有元素其实都相当于平面构成里的点或线或面,而所有元素所组成的Banner画面其实又是一种情绪和信息的表达,所以我们可以从下面4个方面去理解这个问题:(1)从活动主题的角度:(2)从信息层级的角度:(3)从品牌调性的角度(4)从视觉美感的角度:(1)从活动主题的角度:当我们拿到一个设计需求的时候,都会需要确定他的设计风格,而这个风格怎么来确定呢?就是要明白他的定位以及服务的人群是谁,了解他们的兴趣爱好,同时我们脑袋里会出现下面这几个关键词:热闹促销/年轻活力/高冷大牌/时尚个性/规矩保守等我们先看几个Banner实例:低价热闹促销:画面中会有有比较多的点缀物,也喜欢用大面积的暖色,其目的就是为了营造热闹的氛围,给人热情有亲和力的感觉,板式以上下或者居中排版的方式多点,这种方式的视觉也更聚焦一些。

相关文档
最新文档