赞助商
立即赞助

如何巧用线条,让你的Banner 更有设计感?

Banner设计3年前 (2021)发布 流光
3.7K 0 0

在上两期整banner设计的过程中,我发现线框在banner设计中的应非广泛。仅够辅助一些元素的设计,还可为设计增色,增设计感。,我决定总结研究一番,发现这里面还是有点道道的。

为平面构成中三元素之一,具有非常泛的应用范围。

「线」在版式中的作用主要表现为:表示调、确隔、视觉引导、组织息、丰装饰画面等。

在banner设计,应用线框也起到强调、视觉引导,组织信息,丰富画层等作用。接下来,我们针些案例分析线框在banner设计应用体特,以及在应用时需要注意设计细节。线框在banner应用也样适用于在海报等其他设计范畴,举反三。

一. 应用情况分类

1. 大线框,辅助背景和整体版式

如何巧用线条,让你的Banner 更有设计感?

如何巧用线条,让你的Banner 更有设计感?

特点:在banner中线框整体形式感强,可起到较好的引导视觉的作,户在看到banner的第一眼会把注意集中在线框的区域。

2. 小线框,应用于局部文案

如何巧用线条,让你的Banner 更有设计感?

如何巧用线条,让你的Banner 更有设计感?

特:在banner文案处应用线框设计是最常见。文案作为传banner信息主要载体,在此处应用banner可以很好辅助设计,吸引关注,突出文案部分。在后,我将专分析线框如何应用在文案部分。

3. 小线框,应用于局部图像

如何巧用线条,让你的Banner 更有设计感?

如何巧用线条,让你的Banner 更有设计感?

特点:在图像周围添加框以通空间关系让图像更有立感,增加设计的次,到突出产品的用。

二. 应用细节

上面简单总结框的应用范围,接下来,我们结合应用场分析一下需要注意的细节与设计思路。

1. 封闭&不封闭

封闭的框透气差一,但在视上更规范、稳重。

如何巧用线条,让你的Banner 更有设计感?

如何巧用线条,让你的Banner 更有设计感?

封闭的线框最为见,透气,具有较强的设计感,够发挥的的设计空间很广。

在具设计时,有两种方式以打破框。

直接选择切断部位断开

如何巧用线条,让你的Banner 更有设计感?

线框轨迹叠加其它元素(文案、图片)断

此种方式较常见,可以利用文案、图与线框的空间关系塑造空间感,使线框与整体好的融合一起。

如何巧用线条,让你的Banner 更有设计感?

如何巧用线条,让你的Banner 更有设计感?

如何巧用线条,让你的Banner 更有设计感?

如何巧用线条,让你的Banner 更有设计感?

2. 粗线条&细线条

粗线条能够加引人注目,性十足

如何巧用线条,让你的Banner 更有设计感?

细线条显得细腻、柔美、轻盈

如何巧用线条,让你的Banner 更有设计感?

3. 虚&实

在线框的应中有虚实的区分。「虚」的线框在呈现形式上很灵,较容易结合自己的创意,若隐若现,没有实线那么强烈的空间存在感。

如何巧用线条,让你的Banner 更有设计感?

如何巧用线条,让你的Banner 更有设计感?

如何巧用线条,让你的Banner 更有设计感?

4. 线框形状

线框的形状比较灵活,可以根据计灵活调整,最常见的是矩形,可以衡画面,规整,方便排版。

如何巧用线条,让你的Banner 更有设计感?

三角形的线框辅助可以加视觉冲击力,营造个性、别致的觉。

如何巧用线条,让你的Banner 更有设计感?

圆形线框起聚焦视觉中心点的作用,通常应用在文案的化计中。

如何巧用线条,让你的Banner 更有设计感?

其它形状有更多的发挥空间和个性,但不要过于复杂。

如何巧用线条,让你的Banner 更有设计感?

5. 表现形式

框虽看似简单,但也以有很富的表现形式,通对框的「强化设计」,以富框的设计感。

巧用渐变

富画面、个绚丽。在深背中加框时,一般选用白,但果文字和框为白,往往感单,此时将框改为渐变是个不错的选择。

如何巧用线条,让你的Banner 更有设计感?

纹、质感

入特殊的纹、质感,可与他元素保持格统一,使画面更协调。

如何巧用线条,让你的Banner 更有设计感?

创意结合

结合主题的创意线框让人眼一亮。

如何巧用线条,让你的Banner 更有设计感?

不规则变化

不规则变形可以增加俏皮感觉,不死板。

如何巧用线条,让你的Banner 更有设计感?

利用背景素计

使线框整体搭配更统一、协调。

如何巧用线条,让你的Banner 更有设计感?

三. 排版方式探索

部分主要总结一下框在应用程与文案、图结合时常见的设计方式。

1. 与文案

如何巧用线条,让你的Banner 更有设计感?

图示中的案例是矩形作为基础,如果小伙伴们应了角形或它形状,在与案结合时基本类似,灵设计即可。

找一三角形案例:

如何巧用线条,让你的Banner 更有设计感?

如何巧用线条,让你的Banner 更有设计感?

如何巧用线条,让你的Banner 更有设计感?

2. 与图片

图片与线框结合可以丰富画,增强设计感。

如何巧用线条,让你的Banner 更有设计感?

好了,到这里结了在学习banner设计过程出现线框些用法与设计特,也希望在以后设计工作能够灵活运用这元素。不知大家看完有什么启发和议呢?欢迎留言。

通过这次总结使我认识到无论活还设,处处都存细节,且都一的规律可循,所以我也强烈推荐家设时留各种设形式自己觉得很棒的设计元素,做好结。虽然看起来现在没有什么用处,要相信厚积而薄发。

欢迎关注作者的微信公众:

如何巧用线条,让你的Banner 更有设计感?

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

Darren大人 :总结了一套引导页的设计思路,希望自己在新的一年能多学习总结,在这里和大家分享交流,大家也可以提出问题和建...
2.5D
编者按:在如今的互联网产品团队当中,很多问题都是「房间里的大象」,显而易见却常常被忽略。由于工作经常需要和许多互联网...
Eugen Eşanu
编者按:Google I/O 大会之后,Material Design 也好不意外地随之进行了更新,作为目前最主流也是对当前设计影响最大的一种设...
Google
编者按:UI中动效设计本没有那么玄乎,作为 Google 旗下 Material Design 团队中动效设计的负责人之一,Jonas Naimark 对于动...
AE动效
编者按:我们经常会推荐各式各样的工具,但是什么样的工具推荐最有意义呢?在我看来,除了工具本身各种显而易见的功能和属性...
UI设计工具
「空间陈列法」是说先构建一个空间,然后将主体元素用合适的形式陈列出来。 这是随着手机兴起而真正流行起来的一招,因为PC...
Banner设计
2018年,智能手机依然是我们主要的信息承载工具,更为有效且颇具趣味的响应式图标必将得到关注。同时,鲜艳丰富的色彩,精彩...
2018设计趋势
优步不允许你提前很早预订出租车,亚马逊最初只专注于卖书,谷歌最初只是一个搜索引擎。不知道从什么时候开始,我们开始认为...
Eugen Eşanu