Ethan

小编:今天来聊一下设计中的“面”,它是我们设计时最常使用到的构成元素。感谢作者@飞屋睿的分享与讲解,“面”是多样的,它可以构建出不同的设计效果。文中作者为我们讲解了如何使用面来表达出主题、面与面的关系、面与空间的正负形关系等。正确的使用以及了解面可以实现出非常有意思的作品呦,赶快去试一下吧!

前言

我们说颜值,其实也是在说我们这张脸面。我们说面子,也是在说颜面。在设计里,面,也许是我们最常使用的构成元素了。有时候我们也把面称为“形”。形的丰富多样,虚实变换就能让你玩出各种不同风格的视觉效果。它是设计的颜值担当吗?好像也不能这么讲。

一、面也是一种轨迹

当我们说点是线的移动轨迹的同时,其实面也是线的移动轨迹。面拥有二维成像的特征,只有长度、宽度等,没有厚度。

直线的平行移动为方形,直线回旋移动成圆形,直线和弧线结合运动形成不规则形。

ifeiwutut80-01

二维平面也可以产生出三维的视觉效果,是我们利用了光线和透视的原理,也就是玩了一场小把戏。下面这个人物,其实就是由许多直线形的面所构成的。利用色彩来模拟光照,我们就能获得一种三维的立体效果。

ifeiwutut80-02

二、感性与理性

用线封闭成形且填充后就能成为一块面,这块面会有一种充实感,让你实际体会到它的存在。一块面与另一块面的区别就在于它的轮廓外形。

直线围绕而成的形,如方形、三角形、平行四边形等会给人一种踏实、平稳的感受,当然也会有城市建筑感。在这两年,直线型的插画设计非常流行,它提炼了事物的外形,获得一种抽象的理性美感。

ifeiwutut80-03

虽然是曲线形的面,但它必须为尺规数理所约束,也同样拥有直线形的面所有的理性和秩序。比较常见的是圆形,它与直线形有机联合,共同创造的形象,并非一丝不苟,而又充分演绎了这样一种理性审美风。

ifeiwutut80-04

就像曲线能表达出某种自由浪漫,曲线形也同样适用于所有类似的题材,例如女性、儿童等柔和活泼的主题。

ifeiwutut80-05

最后一类是不规则的形,它完全没有曲直的规律,似乎只是偶然形成,比如水纹、火苗、大理石纹理等,天下没有完全相同的两片叶子,同样解释也就是所有自然所形成的偶然形都不完全相同,因此它即使形成了纹理,也是有机纹理,运用偶然形就能设计出自然生机。通常这类形像是以群集的方式出现,比如下图中公鸡的羽毛。

ifeiwutut80-06

因此,我们可以这样说,如果这个世界上的氛围可以简化为理性和感性,把它们设定为两个极端,那么我们就有了这个认识。

ifeiwutut80-07

设计时,你就能参考这个滑块,根据设计的题材选用不同的形态来表现不同的氛围。比如你的题材涉及到男性,那么你所考虑选用的形就靠左,女性题材则设计时就以曲线居多。左边象征理性,右边象征感性,这也和我们左右脑的分工是一致的。

但是,我的个人体验就是纯感性或纯理性都不太理想,应该是相互杂糅在一起,有机结合,才能阴阳协调。

三、面与面

一个设计中往往只出现一个面的几率很小,通常我们会运用多个面来创建图形,而面与面之间会发生关系,概括起来,面与面会发生八种关系。

ifeiwutut80-08

这八种关系并非单一发生,也有可能是组合在一起共同发生,形成错综复杂的关系,共同营造整个平面的设计氛围。但是在实际操作中,如果面与面所发生关系过多,会让观众产生视觉判断的疲劳,从而放弃对设计的理解,因此我们要针对不同的目的进行关系编排。

也是利用面的关系,我们在矢量图形中进行创作时,就能利用不同图形间的关系进行编排创作。

四、虚实空间

除了面与面之间的关系,面与空间也有一定的关系,什么是空间呢?简单说,就是你的焦点图形外的背景。背景其实也是一块面,只是它的视觉影响力稍弱,处于退后的位置。于是,我们把一个画面简单概括为正负形,也有的称为前后景。背景其实是负形空间,正负形关系相互影响。

比如我曾经在文章《网页设计中的极简风格—无的力量》中提到,负空间其实也是设计的元素。现代的设计非常重视留白,是因为我们大量从正形的意义出发,最后导致正形占据压倒性的关注,然而这并不利于焦点的突出。

比较有趣的关系是让大家注意到负形,因此,我们可以利用正负形共同创作。例如下图中就是背景融入到前景中的一种最为简单的创作方式。

五、正负形插画实例:不小心很容易玩坏一个妹子

正负形都参与了主动造型的设计看起来非常奇妙,我们要学的并不是这个结果,而是如何思考正负形。

从摄影照片里找出正负形的关系来创建构图,非常重要的一个不可见的步骤是简化视觉。将高光阴影的关系精简到只剩下唯一线索。然后在软件中用钢笔工具勾画出主要的轮廓形。这里是将原图细节都模糊处理,全部提炼为扁平的形。采用曲线造型突出女性的柔和。

在AI中是用面的关系在组合你的图像,前期一定要认真分析清楚面面关系。不思考就开工,你真的很容易玩坏一个妹子。

ifeiwutut80-10

经过精炼后,你可以从正形中再考虑用哪一个形状去“融合”负形。因为这张图的负形其实很简单,就是白色背景。因此,最后面对的问题就是,你的背景色与哪一个负形的色彩相同?只要两个色块相互接触,其实就能发生融合的作用。

让我们先用头发试试。

ifeiwutut80-11

看上去感觉整个画面都是她的头发,这时,如果头发上没有任何的装饰,其实看上去略枯燥。因为你只是将头发隐藏在背景中了,只剩下脸。

再换成肤色,让脖子以下的部分融入负形。这里可以适当换一下配色。

ifeiwutut80-12

这个模特的形象依然是非常清晰的,因为有阴影的参与,我们仍然仿佛可以看到她的脖子。脑补成功出一个完整的人像。

最后试试采用衣服的颜色。

ifeiwutut80-13

衣服的粉色非常饱满突出。整个画面冲击力较强。

一个简单的矢量人像插画采用了三种负形融入正形,色彩作为其融合的手段,在此发挥了非常大的作用。

ifeiwutut80-14

但其实这幅插画看上去仍然显得呆板,因为太中规中矩,缺乏趣味性。这时,你也可以通过这样的方式增加插画的趣味性。

1、增加配饰

给衣服增加一些负形的花纹,再给一对耳环??瓷先ハ附诟岣涣?。

ifeiwutut80-15

2、重调构图

稍微调整对象的大小并改变聚焦的位置,残缺似乎更具有想象力。

ifeiwutut80-16

好了,既然大家都有兴趣继续玩下去,还等什么?找张不错的参考照片开始操作吧。

后记

这篇文章没有后记,真心推荐你看看我这一系列的另外两篇文章《平面构成之“点”睛的张力》 《平面构成之线的风格轨?!?/p>

文章来源:ifeiwu

作者:飞屋睿

转载请注明:学UI网—UI设计师学习教程平台 » 平面构成之颜面存在感

登录收藏

学UI就上学UI网!越努力,越幸运!

“学UI网www.ccopus.com?”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.ccopus.com” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.ccopus.com” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.ccopus.com” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

【学UI网 原创文章 投稿邮箱:tougao@ccopus.com,也可以找各个群的管理】

 
你可能喜欢的:
黄色在电商设计中的玩法与禁忌【设计干货】黄色在电商设计中的玩法与禁忌【设计干货】
不会C4D与手绘的设计师还有出路吗?不会C4D与手绘的设计师还有出路吗?
设计技巧如何融入“用户体验”?设计技巧如何融入“用户体验”?
视觉设计师如何向UX设计师转型?视觉设计师如何向UX设计师转型?
UI设计师设计思路的进阶之路UI设计师设计思路的进阶之路
移动端的长表单应该如何设计?移动端的长表单应该如何设计?
移动UI进化中!10种创新的导航菜单实例移动UI进化中!10种创新的导航菜单实例
如何在用户脑海中建立独特强有力的品牌形象?如何在用户脑海中建立独特强有力的品牌形象?
三分钟带你解析ios三种导航模式三分钟带你解析ios三种导航模式
版画语言在广告设计中的运用版画语言在广告设计中的运用
?