Banner背景太单调？频道分组用的简单图案设计参考
01）Banner 5宝图案图形节奏感装饰碎屑气氛足分割背景更活跃背景颜色大色块终极宝 02）案例改稿分享
会不会你也碰到了以下这些情况。
画面显得比较脏, 页面也显得很空旷, 同时细节方面也不够充足, 这其中就包括图案以及图形所呈现出的那种节奏感。
图案指的什么
关于图案, 大多数人都是知晓的而且也在不同程度上进行过使用, 将图案进行放大处理的话是可以呈现出一种大气的效果的同时把图案缩小也能变得十分的精致。
而在Banner里面, 经常出现的那些图案, 大体上都是靠几何图形的反复重复或者旋转操作才得到的图形, 拿来作为背景的纹理用, 是为了把背景的这种细节上的感觉给丰富起来。
有时分有些人老会在嘴里念叨背景里头好像缺了点什么什么东西, 下一次你的时候你可以试着去使用一下这个方法。并不是说非得要用到这一招不可, 要是你恰好有那个需要的话, 可以试试看它起到的效果到底怎么样。
举个例子：
这种图案是通过一个几何形状, 然后不断地做平移并且重复操作从而得到的, 在将它应用到一个纯净颜色的背景上面的时候, 我是把这种东西称之为图案。
案例里的背景是用纯色来做搭配的, 并没有使用特别多颜色的东西。在这种情形下面, 想要让那个背景避免显得过于。
因为原来的设计过于单调, 所以特意添加了菱形图案, 目的是为了能够让背景的细节更加丰富, 同时也让整体层次感得到提升。
所谓图形, 它所指的是什么呢。
有人可能就会提出这样的质疑, 也就是图案以及图形之间究竟存在怎样的区别呢? 图案这种形式, 它是通过复制以及平移这些操作手段来得到的, 而图形这种形式, 它不仅可以通过复制和平移, 还可以通过针对某个特定形状进行循环放大的方式来构成最终的图形。
因为这一系列的原因, 所以图形所呈现出来的节奏感方面, 往往是要比图案更为强烈一些。在使用图形的时候, 需要进行手动调整以及复制的操作, 这样就可以实现更加多样化的差异化重复效果。相对而言, 图案在规律性方面则是表现得更好一些。
我们可以再拿出一个具体的实例来看看。
图1: 在案例里面, 那个图形是使用了一个个相同的圆角矩形进行组合的, 通过把长度和宽度做一些变化, 从而就形成了一种更加强烈的节奏感。并且这个图形在颜色方面可以是各种各样的变化多端, 也可以是在单一颜色基础上的深浅变化。
图2: 在这个案例里, designers运用了三角形元素进行的循环反复使用, 而且通过改变颜色的深浅对比来增强了空间感。实际上, 在上述图案的上面还添加了一组线条呈三角形状的纹样设计内容, 至于各位小伙伴们是否有注意到这个细节存在的情况呢?
看对比01-背景有图案和没有的区别：
我选取了一个三角形图案的Banner作为对比对象, 以此来展示添加了图案之前和添加之后在视觉感受上的具体差别, 在未添加该图案的初始状态下, 尽管我在本案的其他部分已经投入了较大的精力去进行多种多样的视觉呈现, 但是整体视觉上依然会让人产生缺失了一部分节奏规律以及细节层次的主观感觉, 而当我们为底层背景区域正式引入了对应的装饰性图案之后, 整个画面的构成显得更为充实和饱满, 与此同时也就顺理成章地增强了促销氛围所带来的心理冲击力。
大家来看一个对比, 这个对比是看看背景有图案的情况和没有图案的情况之间有什么区别。
同样是把有图案的情况和无图案的情况拿来做一个对比, 为了让大家能够看得更加清楚一点, 我把图案的颜色加深了一些, 因为如果是线条样式的图案的话, 在图片被缩小以后看起来就不是那么的清晰了, 图案这个东西不仅仅是说可以是一些形状的存在, 它也可以表现为线条的形式, 我们能够非常明确地感觉到在第一张图当中所营造出来的那个促销氛围已经达到了满足需求的效果, 但是在实际使用的时候我们一般会让背景拥有更多的细节内容然后就去添加了相关的一些图案这个只是我个人的观点仅供参考。
图案的应用
在第一个案例里面, 一共用到了三种图案, 圆、星、竖条这些元素都是用来烘托页面背景的, 其中竖条这种设计手法属于图形重复。
在第二个案例中, 应用了类似于波浪线的图形元素, 这类图案经常能够让观者产生一种仿佛是与生俱来般的对于节奏感的感知。
图形的应用
在该案例里, 呈现出的这种由多边星形从中心开始、向四周微小范围发散出去的图形样式, 难道说并不具备非常强的节奏感吗?
这个图案并不是仅仅依靠平铺以及重复的方式来获得的, 它还能够通过一种特定的循环步骤来生成, 具体而言就是先把一个基本图形进行放大处理, 接着执行复制操作, 随后再次将其放大, 如此这般地反复循环下去, 从而得到最终的图形形态, 这种方式也完全能够被称作放射性构成。
背景是纯白色的, 在这个视觉环境里, 我们大胆地使用了单个倾斜长条复制得到的背景图形，把这些图形和模特姿态进行组合, 还融合了五彩缤纷的元素, 结果巧妙地产生了有节奏感的效果。
二、装饰碎屑气氛足
在banner的设计里面, 经常会用一些装饰品, 这些装饰品包括彩带、矩形、三角形、红包的外形以及横条等等。
这几个案例里面都有图案, 也有图形。那些密集的点点组成的图案能让背景显得更有细节感。那种圆形的、被复制了很多次的图案, 会让整个画面看起来更饱满一些。还有那种飘起来的装饰品, 它们的尺寸是不是也有大有小呢。
三个需要注意的方面
1）有大有小
这是最基本的基础工作, 因为大小的不同能够产生空间感以及节奏感, 具体内容可以参考下图中的左第1个部分。
2）别克隆
不要克隆这个意思, 就是说不能够把所有的元素都一直反复地使用, 在那个案例里面的三角形有带有描边的样式, 也有进行填充的情况, 还有说是几何体的一部分, 这些元素的种类算是变得更加丰富多了, 但是在使用的时候也要懂得适可而止, 比如说就像中间那个图片所显示的那样。
3）有深有浅
大家可以清楚地看到这个案例里的三角形颜色有的深有的浅, 这样做的目的是为了使得整个画面不至于显得太过平坦, 从而避免出现没有前景与背景距离感的状况, 大家可以参考图中右侧标号为1的图片。
三、在背景里做分割, 会让整体显得更活泼。
有人询问我, 在制作这个Banner的时候, 究竟应当使用什么样的形状来进行分割, 是选用圆形呢, 还是选用矩形。听到这个问题之后, 我当下便感到有些愕然, 心里只想让自己稍微安静一会儿。
事实上, 关于选择哪种图形进行分割, 你完全可以根据自己的具体需要来做出决定。因为不同的分割方式会给人带来截然不同的视觉感受。只要你明确了自身所希望达成的目标效果, 自然就知道应该采用哪种形状的分割方案了。
因为它在
我们可以用一个具体的例子来进行展示, 这同一个主题在不同情况下的分割应用。
矩形的分割应用
无分割
有分割
在此处对矩形进行分割的举例说明, 倾斜的处理方式在效果上会显得更加利落清晰, 至于其他不同的方法, 因为篇幅和内容的限制, 我没办法将所有情况都逐一进行详细的列举和展示, 请大家。
你要多去留意和观察, 还要多收集一些东西, 这里举的案例仅仅是用来举例分割的, 至于其他的方面, 我就没有再进行调整了。
圆形、三角形的分割应用
圆形
三角形
看到圆形的话, 人们会有种感觉, 那就是圆滑以及包容的那种感觉, 而看到三角形的话, 给人带来的感受则是那种干净并且非常利落的到底的感觉, 至于形状的各个地方, 比如它的大小状况, 还有它具体的位置摆放情况, 在文案的后面或者是在模特还有商品的后面, 都是可以发生变动的, 那么出现在不同的地方的话, 给人的感觉肯定也是会觉得不是一样的。
背景的分割作用, 是能够让你的画面呈现出一种层次感效果的, 只要你多去进行操作尝试这个过程的话, 你就能够渐渐地对于这种背景分割手法拥有一定的个人认知和直观感受的。
四、那个背景是由大面积的色块构成的, 而第四块色块就是其中的一部分。
大面积的色块应用, 在 Banner 设计里面是特别明显的。这也是非常有效的一种做法, 像天猫、淘宝、京东这些国内电商平台的活动, 经常是以色块背景为主的。
色块在很久之前就已经很流行了, 它是一种风格。在大色块背景上面, 白色的文案或者是图案, 自然而然就成了视觉焦点。如果在色块背景上, 去应用类似那种时尚的波普元素的话, 画面的节奏感就出来了。
下面是具体的这个示例情况。
在这个案例里, 背景是那种一整块的蓝色大色块。在这样的情况之下, 白色的文案就显得特别突出了。它直接就成了视觉焦点。所以我们经常会看到天猫、淘宝、京东这些电商平台在促销活动的时候, 它们的会场
原因主要有两个。第一个原因是让主题文案成为视觉焦点。第二个原因是可以延展其它会场, 方便套用。因为这里没有做太多额外的特效处理。所以这样就大大地节约了时间成本。
当你在进行颜色块背景设置的时候, 你应当去关注一些必要的注意点。
大家认为最关键之处就在于色彩的搭配, 建议颜色数量尽最大努力不要超出三种之多。作为展示主体的模特或者是产品本身所呈现的色彩状态, 千万不要与背后背景板的色调存在过于剧烈的反差情况出现。
就比如说上面提到的那个具体案例来说一下, 它的背景主要是采用了蓝色系进行填充, 那么针对其余部分的色彩选择方面, 可以尝试利用青色、紫色以及黄色这三者来进行混合搭配, 这样操作下来整体视觉效果会觉得相对比较舒适自然一些。
或许此刻有人心中会产生疑问并且提出来说法, 即黄色这个颜色实际上跟蓝色在色环上的位置距离拉得非常遥远, 但是黄色这种特定色彩属性却是具备能够同世间几乎所有其它颜色都实现完美和谐兼容的能力的，正因为基于如此独特的性质原因, 所以人们会频繁地在官方制作的Banner大幅宣传海报视觉图中观察到大量使用黄色来构建利益点提示区域或是小面积色块装饰元素这样的常见设计手法现象。
如果说你没能把对比色、互补色以及近似色这样的一种种颜色的搭配的理论给用好, 那么咱们就干脆把这些内容往简单处变一变, 把它归纳成总共只有两个具体的要点。
01）暗色搭配亮色, 或者是亮色去搭配暗色。
02）把深色的搭配浅色的, 以及把浅色的搭配深色的。
暗色配亮色、亮色配暗色
其实, 关于哪一些颜色算作是暗色, 或者哪一些颜色算作是亮色, 这个并没有一个硬性的规定去说明白。如果非要给个说法的话, 那也就黑和白这两个极端的情况了。不过呢, 单个颜色的明暗程度其实是可控的, 这感觉就像是在调颜色的深浅一样。
但是如果我们把话说回来, 假设这些颜色的饱和度都已经处于最高的状态了, 那就从最基础的那些红色、橙色、黄色、绿色、青色、蓝色和紫色来进行比较看看, 这时候它们之间相互一对照, 就会体现出到底哪个更暗沉一些, 以及哪个更光亮一些的区分出来的。
这份分类所展示的概念, 并不是处于那种绝对不可改变的状态, 原因在于, 即便某一个蓝色呈现出来的光泽非常明亮, 可是, 当我们把它与黄色放在一起进行相互比较的时候, 难道就不能认为这个蓝色在对比之中显得相对较暗一点吗?
并且需要说明的是, 每一种颜色都存在其自身最亮的色值表现, 同时这一表现肯定是不会突破白色以及黑色所设定的界限的, 因为白色和黑色才是真正具备最亮以及最暗属性的存在。
这就好比是, 如果把这种情况类比到另外一个场景里, 假设在这个世界上根本就没有瘦子这个群体的话, 那么自然也就不可能会出现所谓瘦子这样的情况了。
因此, 我们是借助调整颜色饱和度的深浅程度, 来达到让画面变得更加暗淡或者明亮的效果。如果要想达到对配色原理的深度了解与掌握的话, 仍然需要去弄清楚对比色、互补色这类相关的概念知识, 只有这样去做, 才能获得更为透彻和深入的理解层面。
我在这里所说的这两个方法, 仅仅是为了提醒一下大众群体, 让他们能够尽可能少地犯下错误, 比如当你们如果选择使用了暗红色这种色调的时候, 到了这个具体的情况下, 大家就应该毫不犹豫地将亮色或者是白色作为首选进行搭配使用。
举例说明：
在上面提到的那些被选定的颜色当中, 黄色的亮度是要比蓝色更高的, 这样的一种情况就属于亮色再去搭配暗色, 而反过来就是暗色再去搭配亮色了, 这种分法主要是以背景色的那块区域作为主要颜色来看待的。
正如上文提到的, 那两种颜色都属于暗色系的范畴, 因此, 无论情况如何变化, 这都构成了一组错误的搭配示范。
从理论层面来讲, 即便是面对亮色或者是暗色的不同背景环境, 白色与黑色也都是允许进行组合的, 不过需要特别注意的是, 我们在实际操作的初始阶段, 应当将白色作为主要的考虑对象, 其原因在于白色与白色的结合方式能够更有效地形成视觉层面的焦点效果。
如上所述, 毫无疑问, 两个亮色互相配合并不是一种明智的做法。假如说, 非要把亮色和亮色进行搭配的话, 我个人建议去使用白色或者是黄色这2种具有特色的颜色。
如上白色和黄色去搭配亮色色块显然是可行的, 但是还是比较刺眼的哦, 从用户角度考虑还是要慎用。
因此呢, 色彩的搭配一定要让那种视觉感受变得非常舒适。有一部分人在这个问题上面会产生误解。他们觉得用亮色去搭配是不行的, 但是他们还是想要去尝试用亮色的方式来做搭配。下次你们可以换一种思路试试。比如说可以用偏暗一点的颜色来做个搭配实验看看效果如何。
让深色系的东西搭配上浅色的东西, 或者反过来, 用浅色去搭配深色。
从中间往上走的话, 颜色的深度是越来越深的, 反过来的话就是越来越浅。所谓的深浅配色就是指一个颜色是由明度和饱和度来控制颜色的, 然后接着再进行配色。
举个例子：
采用深绿色作为背景色的色块区域, 并使用该颜色的浅色部分来进行搭配, 这点可以从上面的图片里清楚地看出来。
或者也可以反过来自行进行相应的组合搭配。
看一下这个实例的情况。
在这个案例当中学到的一个办法是, 背景颜色以及文案或者利益点所在的形状载体, 运用了深色的底色和浅色的内容相互搭配这样的思路。当然, 其中最主要的文字内容还是以白色为主要呈现方式。
在大多数情形下, 它们呈现出来的是色块的深浅之间的那种搭配关系, 而并非文字内容哦（不过你要记住, 如果那些色块的情况都掌握清楚了的话, 白色部分就是那个视觉上的焦点哦）
五、这简直就是Banner设计里的终极宝贝！也是设计师手里的终极绝招嘛。
一定要养成一个每隔10分钟就需要按一次Ctrl+S的组合键, 来保存当前文件的状态。
Banner5这类的回顾总结, 图案以及图形方面能够使得画面产生节奏感的效果, 对于背景的分割来说, 它并没有固定的形状要求, 具体的样子要依据你所需要的形状来做决定, 而在配色的时候, 千万不要把亮色和亮色放在一起搭配, 也不要把暗色和暗色混在一起搭配。
优秀的设计案例还有许多, 这应当需要大家于日常的搜集与观察之中进行积累, 而加以更多的思考, 则会使你发觉到更多的可能性空间。
接下来, 咱们一块儿来看一下那几个关于修改稿件的一些心得方面的分享情况。
六、案例改稿分享
案例一加粗的部分是修改之前的样子。
案例中的错误：
1. 背景白色线条和白色立体英文过于抢眼
2. 标题的细节表现程度是不够的, 同时也达不到那种很精致的要求。
案例一 ：修改后
解决方案：
1. 把线条弱化, 还要把立体英文部分也弱化，具体来说, 可以使用混合模式柔光这个方法来处理, 只需要调整它的透明度就好。
2. 需要在标题上方覆盖一层图案, 这个图案具体来说可能是由若干个点组成, 也有可能是由一些线条构成。
通过对修改之后结果的观察, 能够发现, 处于画面中间位置的主体部分, 呈现出一种更加突出的状态, 其在画面当中所处的位置也变得更加明显起来。另外需要提到的是, 标题的效果比起使用纯白色来进行呈现的时候来说, 显得相对更加精致一些。
这个是第二个案例, 是在修改之前的状态。
案例中的错误：
1. 字体上边的地方刮痕出现得比较多, 导致标题看起来有一些脏乎乎的情况。
2. 这个标题读起来的感觉, 让人觉得它有一点比较轻飘。
案例二：修改后
解决方案：
1. 将划痕的数量减少到让人感到最舒适的程度, 这里面的比例是重要的控制点。如果在某些时候, 发现素材的图片清晰度不够充足的情况之下, 可以使用一下锐化这个技术手段, 目的是让这张图片素材变得更加精致和细致一些。
2. 为这个标题增加一个层面的那种厚度, 并且再进一步地把力量感给提升上去。
线条缩小容易变粗, 大家可以看细节图。刮痕变得更精致, 也不会显得画面脏了。
这是案例三, 也就是进行修改之前的那个版本。
在该案例里, 存在着一个错误。
1. 两边的情况显得空泛, 并不是特别丰满的状态, 商品在进行推挤的时候所形成的高度顺序, 以及标题里的主体部分, 彼此之间联系的紧密度是不够的。
2. 尽管标题的形状发生了改变并且经过了若干种处理, 这难道是不是让它显得更加具有冲击力了一点点呢?
3. 那个关于飘絮的氛围, 在程度上减少了一些。
这个是案例三, 它经过了修改之后的状态。
解决方案：
1. 把两侧的商品和添加商品之间的高度进行放大处理。
2. 我们来绘制那些划痕, 目的是让文字拥有一种被刮破了的视觉效果, 接着需要在文字的周围增加一些碎屑, 以此来强调整体的气氛, 此外还可以增加字体的厚度, 从而突出力量感。
3. 为了使得画面的那个整体气氛显得变得更加热闹一些, 特意地增加了飘絮这个元素来作为辅助。
结果就是改过来之后两边的空间给撑起来了, 变得很丰盈, 然后上面的名字也搞得很有那种热闹的感觉和氛围。
到这里, 此次的分享内容就全部结束完毕了, 感谢各位一直以来的支持与聆听, 谢谢大家！
请小编喝杯咖啡吧！