人气 185

平面设计视觉要素个人心得-作者: chickengo123 [复制链接]

九艺网 2017-4-25 14:00:51

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?注册

x
大家好,我是计算机科学与技术专业毕业的,平面设计自学时间多多少少加起来有3、4年时间了,不断地总结和积累多少也有点心得体会,现在我将在这个帖子里把我总结出来的心得精华毫无保留的献给大家,大师们觉得雕虫小技的话也不要喷(毕竟要给小弟留点面子嘛,实在想喷就给我发消息吧
2c2731fa885cb485a3214ab416267b06.gif
),谢过 。

(声明:本帖仅代表个人观点,欢迎批评指出,一起讨论共同进步;欢迎转载做教学用途,严禁商用。)

         我要讲的,是纯视觉要素方面的,而不是设计其他方面(例如文化内涵、构图等等),就是人看到作品后的第一反应,就像男人看到美女之后眼前一亮,至于美女道德、生活习惯好不好都不去管。以下要素是我们的眼睛在几十年的生活中培养出来的“本领”,我们的眼睛无时无刻在捕捉这些要素,要素丰富时,就满足了视觉需求,眼睛觉得“爽”、“眼前一亮”,达不到要求时,就觉得“总觉得缺点什么”,但大多数人都“说不出来”到底缺什么,不是吗?有时候我想,人的进化似乎还没达到完美,以至于人的眼睛和大脑是脱节的,眼睛爽的时候大脑不知道为什么爽。现在我就把眼睛为什么爽告诉你。

1、颜色三要素
         也就是HSB模式里的明度、色相、纯度,这大家都知道。其中明度是重中之重,明度太重要了,以至于黑白色盲平日生活里光靠明度就能活的很好,以至于列宾靠素描就能成为大师。上面说的眼睛在捕捉的很大一部分就是明度,准确的说,是明度对比,即“高光”和“暗调”的对比,再通俗点就是白和黑的对比。高光告诉我们物体的形状和质感,暗调告诉我们物体在空间的位置关系(也就是物体上光照不到的黑暗部分和它在其他物体上的投影)。掌握了这两点(对,只有这两点),我们就能在生活中生活了。我们走路,眼睛捕捉地面的高光,知道地面是水泥的还是大理石的要用什么力度去走以避免滑倒,看到前面那个坑凹进去形成的阴影知道那个坑有多深我们跨过去;看见苹果洗过后水反光的晶莹高光我们就大概判定它很干净可以吃了,看见它在桌面上黑实的投影知道它放在桌面上(如果它悬浮在桌面上投影就会虚化)然后我们伸手去抓它。等等,简单地说,你就是靠明暗混呢!

            至于色相和纯度,它们都没明度重要。曾在哪个地方看过这么一句话:“明度是色彩的骨骼,是色彩的关键;色相是色彩的华美肌肤,是色彩的灵魂;纯度体现色彩内向的品质,是色彩的精神。”要我说嘛,我认为:“明度是精神(明暗对比会让你眼前一亮);色相是表情(暖色或冷色对应高兴或静谧);纯度是态度、情绪(热情洋溢或者含蓄腼腆). ”

         所以我们看到一副作品时,我们的眼睛会努力以我们在生活中的习惯去在作品里寻找要素,即明度、色相和纯度。当眼睛觉得明度对比不够时,就像我们无法分清物体的形状和位置,眼睛就觉得不舒服,也就是我们平常说的“说不出来哪不对”。当明暗对比强烈时,能够充满满足视觉需求,我们就觉得眼前一亮,很爽“爽”、“眼前一亮”。无图无真相,你能看出下面这些图,设计者玩了怎样的把戏吗?
风景类:
调整前
a6c64ee36256c6543c3dc522c6337bd6.jpg



调整后
b524afebd5763c1df5914bb1ff9c8dcf.jpg



调整前
c14d1a3e84b6f3721da287abec2c7ac6.jpg



调整后
3f94d6c34509e407362a92dbda6e3f4a.jpg




网页设计类(蓝圈内为暗调合并部分)
41115b2ae6fb6591bbea7d72e5039f0e.jpg



b09745fdecb410586352302bb44369cb.jpg



电影海报类
c7a927e6ea24adcfcd05a4a2e4e9b11f.jpg




54e67f21c211142ebe829730483dce12.jpg



是不是很爽?呵呵,还有好莱坞电影,全部是这种效果。那问题来了,请看下面几幅图:
af7732450d33aa8c83b6a7923f06341b.jpg



29f9d3cc07598ba41c129cb369545e7d.jpg



ffc7352e5ac15c8cc3710d15fc715be5.jpg



这样的图片当然是首选,为什么?——因为我们就需要表现出这样朦胧的感觉。而明暗对比越弱,朦胧、童话感越强;明暗对比越强,越立体、现实。

下面来看两个强对比暖色调高饱和和弱对比冷色调低保和的例子
730add7a336e307e6673e60711dce045.jpg



c946b5d8a3453c582d31f74b03008e70.jpg



但生活中大部分的设计需求都不会太童话,所以一定的明暗对比是必须的,我们的眼睛也需要一点明暗加以视觉刺激来满足需求。。
明暗就像一个人的“精气神”,这个“神”就是明暗对比对你视觉的刺激。而强明暗对比,低保和比做人来说,就像一个衣着端庄,冲你微笑,双眼有神而坚定的小伙子。看下图:
06ec9195d9b4323c7ef12c93e7bd5de5.jpg



下面是个低明度对比,暖色高饱和的例子
6e44455249d30fec441ce78cc2401884.jpg



4e1a816b27ae3feafdef213b38280eea.jpg



出自一个所谓经典配色表,旁边也放了很多提取的颜色块,但不要被作者蒙蔽了,我觉得这个颜色不太好看,把绿色改成蓝色,冷暖对比我更喜欢
d2729c1f4b9bf5e27fca971dbe219c39.jpg



甚至再把蓝色调艳,画面立刻又多了个亮点,显得欢快起来
51cdde911aad74f7c414e20acb1fa2d1.jpg




再看下面一个例子
原图
2281111ae60e92b1e766caf84fa481c9.jpg



我觉得红绿的小伞更醒目
17fa0f9d1be80ad0fb53b15e4f0e83a7.jpg



原图
e9c94905c8bb7940243a0007189f55de.jpg



换色
a4b468b63bc90c725e76a1a00ab9fd12.jpg



大家没事可以调着玩玩,试一下不同感觉。
配色是要无拘无束,但乱配也不行。
首先当然要符合情感基调需求,制造热情洋溢的气氛当然暖色是首选,企业类网站配色当然蓝色是首选,儿童网站要颜色欢快的五彩缤纷的,婴儿的要明度高些的柔和的色彩,雍容华贵的我喜欢选紫色、玫瑰红和暗淡的金色等等,这些颜色的表情还是要知道的。但能不能用其他颜色,当然可以,就看配色的功底了,这就要求多练,培养配色的感觉。
还有一个规律是:“[b]统一和对比并存”。即一个作品如果是有色的,就要定一个主色调,想再添加活力的就再加以其他色彩辅助对比,这里注意一下中性色(即绿色、紫色、青色)相比冷色和暖色可以多加。但是辅助色毕竟是辅助,一定不能强了主色的风头。就像艾弗尔铁塔周围的建筑都不能高过它,它的突出就是对比,其他建筑不抢它的风头就是统一。题外话:为什么统一对比并存就觉得舒服呢?我想可能我们人都喜欢安定、安全的生活(统一),而安定的生活中又不能缺乏活力(对比),整个人类就是在这样的环境中一代代繁衍生息;或者是因为大自然的万物的色调都不是很饱和的,而视觉上又需要一些对比加以刺激,有时真感叹自然造物主的伟大,啊。说远了
e6e5d88ea171330afa44ed0df5c980df.gif

那么当辅助色过于抢眼怎么办?降低明度或饱和度,或缩小它的面积,即把它弱化;还有个方法就是改变辅助色的色相,把它改到靠近主色调的颜色(这个相当于同色系配色了,只要调整明度和饱和度就行了,下面就不举例了)。看下面两个例子
饱和度弱化(蓝色)
6b2ccc5dd7b64e0cdf7cf344fc5d70c9.gif


220851d8f15a66be207438d9ec908432.jpg



面积弱化(黄色面积大于蓝色)
e287473bcbc5eb303382abb114e3a062.jpg



降低背景的明度突出前景色
a3a65aec2e76a999a50739265cefc176.jpg



除此之外还有几条配色小技巧:
*白色会“冲淡”其他颜色,黑色会“加深”其他颜色。例如当用到大面积高饱和的绿色这样比较“跳”的颜色时,可以加白色块冲淡;当色相太散,主题色不突出时,可以加黑色块加重明度对比以补充色相上的不足
*注意色相对比的同时当然不能忘了明度的对比
*其他。想到了再补充

总之配色是一个感性的过程,把你那一瞬间脑海的色彩表现出来的配色就是好配色,因为它能还原一种真实的生活中的情感,不管是高兴或痛苦,兴奋或颓废,设计源于生活。希望大家也不要被我上面讲的那么多拘束了,多练,多想多体会才能提高,也许将来你也能发现一套你自己的心得。


还有一点,关于设计其他方面的,我研究了半天不得不说。:英文比汉字的确更好看些。这个可以喷,呵呵。
补充下:我说的是在排版上英文比汉字好看。可能是汉字高度一样,而英文上中下分了三档,有些空间上的对比。但要是纯汉字和纯英文设计比的话,汉字更震撼。我很喜欢日本的设计,纯亚洲的设计。我觉得用纯本国文字设计才更见功底!
6352ef3a3a29582891b2a3e91e829307.jpg(0 Bytes, 下载次数: 0)
下载附件
2011-3-30 17:04 上传
91fb15176a80c188a25fadab88c1ce16.gif
268008944652412c1c264ac729984cbb.gif





6352ef3a3a29582891b2a3e91e829307.jpg

6352ef3a3a29582891b2a3e91e829307.jpg

56dbb47d9ce982cf4795355627e245e3.jpg(0 Bytes, 下载次数: 0)
下载附件
2011-3-30 17:04 上传
29daa39f4fdaf9176e9bb520720ecfcc.gif
4aaecee6544ff2d8d9142034b5fa88e1.gif





56dbb47d9ce982cf4795355627e245e3.jpg

56dbb47d9ce982cf4795355627e245e3.jpg
回复

使用道具 举报

stoner 2017-4-25 14:00:51
楼主辛苦了 分享是快乐的
好贴!
回复 支持 反对

使用道具 举报

白云祥云 2017-4-25 14:00:51
好贴!!
回复 支持 反对

使用道具 举报

qishipeng 2017-4-25 14:00:51
很受教   很有见地  不错
回复 支持 反对

使用道具 举报

Snallolla 2017-4-25 14:00:51
好教程~支持一下!
回复 支持 反对

使用道具 举报

BrendaGacy 2017-4-25 14:00:51
归纳的挺好!谢谢!
c8a0e67458d04262466ae7435a550fc0.gif
回复 支持 反对

使用道具 举报

sheensc 2017-4-25 14:00:51
楼主辛苦了 分享是快乐的
回复 支持 反对

使用道具 举报

BLYS 2017-4-25 14:00:51
感谢无私分享!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

QQ|手机版|小黑屋|九艺游戏动画论坛 ( 津ICP备2022000452号-1 )

GMT+8, 2024-5-2 09:51 , Processed in 0.136161 second(s), 26 queries .

Powered by Discuz! X3.4  © 2001-2017 Discuz Team.