首页
杂侃
前端开发
Vue.js
Node.js
Angular
JavaScript
jQuery
Node.js
React.JS
Sass/Less
Typescript
WebApp
小程序
HTML/CSS
Bootstrap
后端开发
PHP
Python
Nginx
MySQL
移动开发
iOS
Android
UI设计&多媒体
硬件开发
树莓派
ESP8266
游戏开发
云计算&大数据
运维&测试
实验室
当前位置:
首 页
>
设计教程
>
网页设计
> 查看文章
16
2017-10
不会配色没关系,以风格制胜
网页设计
,
设计教程
你是第1488个围观者
0条评论
供稿者:
陈 建鑫
标签:
页面设计
自从我们研习设微信订阅号开通以来已经陆续发布了几篇关于色彩的文章,在众多的评论留言当中有一位同学提出了这样一个问题,大概的意思是说他本人对色彩不是很敏感,虽然也有学习过一些关于色彩方面的知识和理论,但是在具体的设计实战过程中总是感觉用不上或是不会用,想请问有没有类似“一招制敌”的配色方法。
我想说的是无论是设计中的色彩学还是其他任何设计知识都不可能有“一招制敌”的方法,如果有的话那身为设计师的我们也就失业了。然而换个角度想虽然没有“一招制敌”的方法,但这其中却是有规律和捷径可循的,那就是我们本篇文章所要探讨的,以风格定位去配色。
如果你没有良好的色彩基础对色彩不敏感或者对配色感到茫然,那么这时你可以从设计的主题或者情感属性出发,以预想的设计风格对作品进行定位。在大多数情况下一个设计作品通常都能确定其特有的风格,而这种风格虽然是由画面的各个因素综合起来决定的,但是色彩在其中起到了很重要的作用和影响。只要能够确定设计所要传达的风格和意向,通过学习掌握不同风格所具有的色彩规律,就可以游刃有余地直接用在你所设计的作品当中,而不是吹毛求疵的去专研色彩的每一个细节,当然如果你有时间和精力还是有必要深入学习色彩的。
如果提到简洁素雅的风格相信很多人会自然而然的联想到极简主义或者留白设计,的确它们有共通之处但却略有差异。相信很多人都是通过日本的设计了解的留白和极简,但是这并不代表其他国家或民族没有留白和极简。其实留白的美学早在我国古代就已经出现了,最主要的表现就是在山水画以及建筑当中。我们民族一直以来深受儒家思想的影响,讲究礼让、谦逊、克制,也讲究中庸之道和盈满则溢,强调凡事需要留有余地,因此疏而不空是中国美学的一大特点。
留白和极简是现在比较流行的设计趋势之一,恰到好处的使用留白可以强调出设计作品的印象,迅速的传递出作品的风格。留白和极简并不是相等的关系,并且我们也不是在讲纯粹的极简主义或留白设计,而是从中提取出二者的特性加以综合,最终从色彩的角度总结出以简洁和素雅为主题的色彩搭配方式。这种风格往往使用较少的元素和大量的留白,因此想要做好也并非易事,并且这种简洁素雅的风格与留白极简一样会受到设计主题及客户喜好的影响,这是设计之前需要谨慎考虑的。
那么究竟什么样的配色才具有简洁素雅的风格呢?我们可以从以下三个角度来分析,分别是色彩的数量、色彩的种类、色彩的色调。
首先在色彩的数量上不宜过多(这里的色彩数量主要是指色相),使用的色彩越多画面就越难把控,也就越难保持简洁素雅的风格。虽然在色调统一的情况下能够调和色彩之间的冲突,但是使用数量过多的色彩仍不及使用少量色彩所呈现的效果好。
如果在一个画面中色彩的使用数量过多,自然就很难达到简洁,即使不是简洁素雅风格的设计,也应该控制色彩的数量。
无印良品的设计是极简和留白的代表,虽然前文中我们说过极简和留白并不能和简洁素雅划等号,但是针对这个海报作品还是具有简洁和素雅的特性的。从画面中吸取具有倾向性的颜色,不难看出基本就是以灰色调为主。
这个作品上半部分使用的是淡蓝色与淡黄色的冷暖渐变,下半部分使用的是灰色,在色彩的数量上使用的并不多。
在色彩的种类选择上以无彩色中的白色系和有彩色中的冷色系为最佳选择,而中间色系和暖色系的效果次之。这也是简洁素雅与留白极简的一个不同之处,可以说留白极简的设计只要满足留白和极简这两大特性就可以,但是简洁素雅的风格会对色彩的冷暖有所要求。
在无彩色中主要以白色为最佳选择,其次是浅灰色,而深灰色和黑色并不具有简洁素雅的特质。
由于冷色系及中间色系带给人的情感刺激不及暖色系强烈,因此更适合表现简洁素雅的那种中庸、冷漠或冷淡的感觉。这并不是说暖色系的色彩完全不能使用,而是在选取正确的色调之后,如果想让整体的配色带有一些温度可以适当加入,只不过整体简洁雅致的效果不及冷色系和中间色系。
这个作品整体为偏暖的灰色调,印证了前文所讲解的并不是完全不能使用暖色,只要不过于暖即可。
这个作品以冷色调的淡蓝色为主色并且四周留有余白,简洁的同时又略带素雅的气质。
在色调上淡色调、淡浊色调、白色调都可以用来表现简洁素雅的风格,具体可以参看我们之前关于色调的文章。如果不了解色调的话也没关系,可以在色彩的饱和度和明度上做选择,饱和度在中间和较低区域而明度在中间或中高区域的色彩都可以使用。
如果你不了解色调那么可以使用软件中的HSB色板滑块来选取色彩,H代表色相,用来确定色彩的冷暖;S代表饱和度,需要保持在较低的百分比范围;B代表明度,通常需要在较高百分比的位置。
这个作品以偏暖的灰色作为底色,通过大量留白以及添加冷色系的蓝色图片来调和画面的整体平衡,以淡浊色调为主,简洁素雅的风格昭然若揭。
这个作品以淡色调和淡浊色调为主,用来填充文字的蓝色起到的点缀和定调效果,整个海报风格偏向文艺和雅致。
虽然色彩对于画面的整体风格有很大影响,但是要想完全达到特定的风格还有考虑版面当中的其他因素,比如在字体的选择和编排上以及图片的选择和处理上,都是需要慎重考虑的。
在常用的字形中,宋体字在体现简洁素雅上要优于黑体,虽然黑体具有简洁的特征,但是简洁素雅风格的设计多用于表现文化、文艺等主题,因此要根据不同主题来综合考虑。
由于简洁素雅的风格常用在文化领域,因此除了宋体和黑体以外也会用到书法体,其中楷书具有文化属性同时又带有雅致感,而草书或行书由于自身笔画张力的原因并不具有简洁素雅的气质,因此并不适用。
在图片的选择上,画面元素简单的图片要优于复杂的图片,因为元素越少越能体现简洁的特性,元素过多会造成凌乱的印象。
此外,在选择图片时除了要考虑主体之外还要将色彩的因素考虑在内,色调淡雅的图片要优于色调浓厚的图片。
简洁素雅的风格并不适用于所有设计领域,因为该风格自身色彩的因素造成了在视觉效果上往往不够具有吸引力,所以通常比较适合表现文化、文艺或与此相关的产品类主题,除此之外如果单纯的想表现简洁素雅的风格也可以使用。如果使用在商业产品推广上但产品本身不具备简洁素雅的特质,那么这种情况下不建议使用这种配色风格。
接下来我们提出一个设计方案,要求是为某经营花卉植物的品牌设计一款海报,所提供的文案信息包括主题、活动日期、简要描述等等,可以看出它并不是一个纯商业海报,更多的需要是传递品牌的定位和风格。
Step 01
该品牌的定位是偏向年轻、文艺又带些小清新这样的风格,所以首先我们从画面整体的角度对风格进行定位,显然简洁素雅的风格是符合该品牌气质特征的。确定了整体的风格之后根据信息层级对文字进行编排,根据定位选择符合气质的字体,大致的编排到版面当中。
Step 02
简洁素雅的风格本身视觉效果就比较弱,如果使用纯文字的版式编排会更加单调,并且该海报的主题也具有一些商业属性,因此我们还需要为画面添加图片素材,然后调整文字的字号和位置。
Step 03
这里我们将使用的图片作黑白处理的意思是说虽然图片上的色彩并非是我们填充的,但是在做设计时寻找图片素材的过程其实也是配色的过程。为了契合简洁素雅的主题,除了图片本身要与主题相关之外图片的色彩也要具备一定的条件。提取图片的色彩信息,均符合之前我们所总结的规律。
Step 04
将图片置入到版面当中预先留好的位置,然后创建8×8的模块网格,根据网格约束文字和图片的具体位置。
Step 05
最后为背景填充偏冷的灰色,调整图片使得图片与背景相融合,整个海报就设计完成了。最后吸取画面的背景色来查看HSB色值,饱和度和明度也与理论相符合,整体的海报风格呈现出我们预期想要达到的的简洁与素雅。
浪漫指为所爱的人和物而感动或开心等正面意义,以及能被记住很久的人或者所做的行为和语言。浪漫,代表着纵情富有诗意和充满幻想甚至不拘小节。浪漫一词来自于西方词语Romantic音译的演变而成,其作用就是为了翻译Romantic。
而浪漫在如今的社会观念中多指男女之间的一种关系,并且不同的人对浪漫的解读也会不同。比如对于情窦初开的少男少女来说浪漫代表着柔情或羞涩;对于处于热恋期的情侣来说浪漫可能是浓烈和热情;对于已结白发的夫妇来说浪漫可能是一个淡淡的微笑和温馨的眼神。
那么浪漫情调体现在配色上应该是怎样的呢?我们从色彩的角度出发将浪漫情调划分出具体的三大类:柔情羞涩、热情浓烈、温馨舒适。
柔情羞涩也代表着温柔含蓄,那么体现在色彩上也应该具有这种情感属性。因此所使用的色彩饱和度不应过高,暖色系中红色和粉色更倾向于浪漫中的柔情;而绿色、青色、黄色常常代表着未成熟,所以更倾向于体现浪漫中的羞涩感,可以根据具体的喜好和倾向调整色彩所占的面积。
在色彩的种类上红色与紫色是表现浪漫的首选,如果想让整体的配色带有一些羞涩感也可以适当加入绿色、青色或黄色。
在色调的选择上饱和度中等的明色调、淡色调以及淡浊色调都可以表现柔情的浪漫。如果从色彩的饱和度和明度上来选择最好将色彩的饱和度保持在中等偏低的范围,明度保持在中等较高的范围。
这个海报的色彩虽然使用的数量较多,但是整体保持在明色调与淡色调的范围之间,淡黄色背景之上添加暖色会为画面增加一些温暖和柔情,添加冷色会带来青涩与对比。
这个海报以暖色为主,同时又带有绿色和黄色,整体色调为淡浊色调,结合画面的主体呈现出一种柔情又略带青涩的甜美。如果加深红色和黄色就会变成我们之后要讲的温馨舒适的浪漫。
热情最佳的色彩选择当属暖色系中最暖的红色,浓烈就是在红色的基础上增加饱和度。这种浪漫通常都是比较强烈无所畏惧的,也有着青春、正当年的意味,并且这种浪漫也代表着激情,因此在色彩的选择上可以大胆的使用高饱和度的色彩,同时也可以通过加大反差来突出主体。
在色彩的种类上红色为最佳选择,其次也可以与橙色、紫色搭配,与蓝色配合使用会增加画面的对比从而增加冲突性。
在色调的选择上饱和度中等偏高的明色调和纯色调以及黑度值偏低的浊色调都可以用来表现热情浓烈的浪漫。如果从色彩的饱和度和明度上来选择的话二者都应该保持在中等偏高的色彩范围之内。
这个电影海报中以大面积暖色调为主,黄色与红色相互搭配,紫色起到了很好的点缀效果,营造出的浪漫氛围是热情而浓烈的。
这是法国电影《两小无猜》的一款海报,影片讲述了小男孩朱利与小女孩苏菲从年少到成人,彼此相爱却不敢说出来的爱情悲剧。海报中使用了较纯的色彩,通过紫红色和蓝色的冷暖对比更加突显了热情而浓烈的浪漫印象。
温馨而舒适的浪漫少了一些热情多了一些安逸,它既不是初恋的那种青涩也不是热恋的那种热情,更多的如家一般的温暖。在色彩当中红色、橙色、黄色最能表现出浪漫中的温馨和甜美,如果单独使用其中一种颜色那么整体的风格会更倾向于该色彩的属性,除此之外也可以将它们结合使用。
在色彩的种类选择上暖色系中的红色、橙色、黄色最能体现出浪漫中温馨和舒适感。
在色调的选择上明色调、淡浊色调和浊色调都可以用来表现浪漫的温馨和舒适。如果从饱和度和明度的角度来选择,整体的色彩饱和度需要控制在中等偏低的范围内,而色彩明度值只要不是过于低就可以。
这个电影海报主要讲述了一个男孩和父母离散,花了20年时间去寻找自己的父母的故事。画面整体的色调以暖黄色为主同时又带有少许蓝紫色光晕,色彩的饱和度均控制在中等位置。浪漫不是爱情所独有的,也可以是亲情,只不过是温馨而舒适的。
这个作品同样是电影海报,主要讲述了一对美国跨种族夫妻的真实爱情经历。海报以浊色调为主,并且使用了大量的暖黄色,纵使经历了再多的风雨,当两人相互拥抱的那一刻是温馨而浪漫的。
色彩带给人的印象通常会因为依附载体的不同而变化,浪漫情调也同样如此。如果只遵循浪漫的配色规律而画面中并没有表现浪漫的元素,那么这种气质和风格是很难让受众感受到的,因此在字体和图片甚至其他画面元素的选择上也需要仔细斟酌。
通常情况下表现浪漫的设计其主题都偏向现代、年轻、时尚,商业属性比较多,因此黑体比较适用;而设计主题具有文化属性时也可以使用宋体。
如果不使用黑体或宋体等“常规”字形,那么具有手写风格的字体也是一种选择,但需要注意不要将手写体与卡通体混淆。手写体飘逸、流畅的笔势具有文艺和优雅的特性,适用于表现浪漫情调,而卡通体更多是表现儿童的可爱气质,除非是针对儿童的浪漫时可用。
由于是浪漫情调所以男女二人的主体更适合,而单人的主体即使在色彩上完全符合最终所呈现出的浪漫意味也较弱,因为一个人更多的是孤独。
虽然浪漫的氛围有时也需要场景的烘托,但是有人物主体的图片要优于风景图片,同时也可以将二者结合使用。
案例演示部分我们模拟的是一款话剧演出的宣传海报,以“青春禁忌”为主题,主要讲述了青年男女之间的爱情故事。
Step 01
不难看出话剧的主题是与爱情相关,在大多数人的印象中,爱情都是一种幸福而美妙的浪漫,这也符合该海报的风格定位。接下来需要从前文讲述的三种浪漫风格中选出合适的一种,这里我们希望以柔情羞涩的浪漫来表现海报的主题。
Step 02
新建版面以上下结构的形式置入与话剧主题相关的图片,参考前文我们总结出的用色标准可以看出图片的色彩并不符合,因此我们可以通过统一画面色调和反差式配色来强调柔情又带有羞涩的浪漫。
Step 03
根据我们总结的用色标准调整图片的色彩,使得最终整体效果以紫红色作为案例的主色,以淡浊色调为案例的主色调。而从色彩的关系上来分析,蓝色与红色的互补关系会造成反差效果,因此为画面添加少量的蓝紫色。
Step 04
接下来将文字信息依次编排到版面当中,通过不断调整使版面达到平衡。这里中文我们使用的是黑体而英文使用的是无衬线体主要是考虑到海报的主题更加偏向年轻和现代。
Step 05
接着还需要为版面创建网格,这里我们设置的网格竖向为六栏,横向也为六栏但是没有栏间距,通过网格大致约束下各个元素的位置。
Step 06
最后为了给画面增加一些青涩感和艺术性,我们为文字填充黄绿色,在紫红色与黄绿色的碰撞之下,整个海报的版面具有一种柔情羞涩并且带着淡淡忧伤的浪漫气息,到此整个案例就设计完成了。
本期文章我们以简约素雅和浪漫情调这两个风格为切入点,通多对色彩的数量、色彩的种类、色彩的色调总结出它们各自所具有的特点。我们不难发现以风格定位的配色思路简单易操作,只要掌握了不同风格所具有的色彩规律然后套用这个规律运用到自己的设计当中,那么整体的设计风格就不会出现太大的问题,这就是我们所说的正确的配色,最后再通过对细节部分的调整就可以达到美观的配色。简约素雅和浪漫情调这两种风格虽然具有局限性,不是所有主题的设计都能用到,但是我们可以学习这种配色的思路。本期文章是以风格配色的第一篇,后续我们还会推出其他具有代表性的配色风格,如果你喜欢这个系列就请点赞支持下,我们下期再见。
说说梦想,谈谈感悟 ,聊聊技术,有啥要说的来github留言吧
https://github.com/cjx2328
—— 陈 建鑫
你可能也喜欢
Related Posts
用PS制作动感激爽水花文字
《迷彩渐变》 -iPhone8壁纸技术
用一张封面聊聊画面中的层次
极简设计那么受欢迎,为什么我做的客户不要?
原来搜索功能设计还有这些门道!
30个漂亮的企业官方网站欣赏
随机文章
如何写出一个完美的错误消息
iPhone 12 页面卷动逐行滑入效果
为你增加工作经验——Tab的小短线
Oracle 数据库常用操作语句大全
程序员的基础生存技能:高效用Google
Python 数据分析:Numpy 介绍
Android自动更新框架
Docker ps 命令
女朋友问我的网站能下雪吗?我立马打开电脑撸代码…
iOS 团队编程规范
标签云集
APP设计参考
electron开发
php
分布式
页面设计
mysql优化
android
react
docker的使用
iphone x
JavaScript小技巧
linux
webpack
python插件
交互设计
nginx
数据库
adobe
大数据可视化
移动端识别
docker
PHP小技巧
python
docker命令
swoole
mysql
Java
图标设计
logo
docker小技巧
ios
设计灵感
golang小技巧
APP UI设计
MySQL小知识
css
k8s
前端开发
设计教程
vue
树莓派
app设计
前端技术
javascript
jupyter
Redis
网页设计
zabbix
ui设计
vue小技巧
未经许可请勿自行使用、转载、修改、复制、发行、出售、发表或以其它方式利用本网站之内容。站长联系:cjx2328#126.com(修改#为@)
Copyright ©
ziao
Studio All Rights Reserved. E-mail:cjx2328#126.com(#号改成@)
沪ICP备14052271号-3