配色弱有救了!教你利用图片创建独有的色彩方案!

转载:http://www.uisdc.com/use-picture-create-swatches

配色弱有救了!教你利用图片创建独有的色彩方案!
编者按:@飞屋睿UIdesign 这篇文章所讲述的配色方法和之前我们发布的《设计师必备取色技巧!教你在PS里通过照片创建色板》基本是相同的,素材处理和细节考量稍有差异,两篇文章互为补充,可以为纠结于配色的你点亮一盏灯。
我们开始设计手机网页时,总是需要先确定好网页的配色方案。那么,这时,除非是客户提出色彩方案,我们大部分要面对的情况的是,根据客户的需求创建出一个色彩方案。在此,我想教大家如何从“图片”这一来源中获取灵感并创建出色彩方案。
一、选择图片
首先,去各大网站搜索你喜欢的图片,图片的选择应该尽量选择色调有变化且明暗对比也较为明显的。因为黑白或低对比度的色调只会让你最后的色彩方案看起来不够鲜明。
选择图片去下面这几个网站是不错的:
http://500px.com/flow/curate
https://www.flickr.com/explore/
http://wallbase.cc/

(以上网站自备梯子 ^ ^)不够的话右戳:设计师网址导航,要嘛有嘛
要从配色方面吸引自己的图片上进行选择。

配色弱有救了!教你利用图片创建独有的色彩方案!
二、吸取色彩
在PS里打开这张图片,吸取色彩。吸取色彩并不是任意选取自己喜欢的颜色就可以,根据整个图片的色彩分布,先找到图片的主色调。
主色调的选择和使用
主色调的选择依据整个图像当中分布最广的一种颜色,在这张图片中,我们可以看出分布最广的为蓝色,这些蓝色呈现明暗层次深浅的不同,因此,在深蓝到浅蓝中我选择了过渡最为均衡的一种中度灰的蓝色。这种蓝色在图片上表现的是一团团云雾和湖泊的颜色。
三、建立自己的色彩方案
选择新建一个文件,白色底背景,图片中选好的色彩作为前景色画一个圆形。这个圆形也就是你的色彩方案中的第一个色彩:主色调。
配色弱有救了!教你利用图片创建独有的色彩方案!
主色调的运用范围
在网页设计的时候,主色调的使用范围在整个网页的色彩面积较大的地方,例如用于网页背景或形状元素上。当然,一种色彩是无法开始设计的,因此接下来我们会选择第二种颜色。
辅助色的选择
辅助色通常是一个能烘托、能与之产生呼应的颜色,如果主色调是一个冷色调,那么辅助色就偏向为一个暖色调。因为一张色彩丰富的图片必定是具备冷暖两种倾向的色彩,因此,你这时会在主色调的另外相反色温的色调上进行选择。
在这里我选择了红色屋顶的暖橙色,和蓝色的冷感进行了均衡。
配色弱有救了!教你利用图片创建独有的色彩方案!
辅助色的运用范围
辅助色通常会使用在网页设计中的字体、小面积的元素上。辅助色如果和主色形成了互补色就会产生一种强烈的对比,这时对比色还会有强调的作用。当你想要凸显网页中某个元素时就可以试用上强调色。
那么什么是对比色呢?就是在色环上位置刚好相对的颜色,例如:红色和绿色,紫色和橙色,蓝色和黄色。
如果你觉得你选择辅助色强调不够强烈,你可以另外在主色基础上,从色环里选择主色的对比色,作为第三种色彩方案。
配色弱有救了!教你利用图片创建独有的色彩方案!
高光和阴影
这里通常是指主色调在图片上展示出来的高光和阴影部分。这时,已经无需完全依靠图片了。我们的色彩方案里已经备选了三种颜色,而剩下的色彩就在主色调基础上调整变化。
主色调增加白色就变作高光部分,作为第四种颜色。
配色弱有救了!教你利用图片创建独有的色彩方案!
如果你的设计配色色彩偏重,这时可以往主色调添加黑色,作为第五种色彩选择。
配色弱有救了!教你利用图片创建独有的色彩方案!
高光和阴影色在网页中也作为一种修饰的颜色选择,注意慎用。高光和阴影色可选其中一种作为中立色。因为这种利用黑白变幻出的颜色层次丰富,因此这里的选择会非常多。这就需要你在最终色彩方案中再根据实际情况进行调整。
确定色彩方案
色彩方案选择好以后,最好确保整体颜色不得超过3种颜色:主色、辅助色、高亮/阴影色。
即使是三种颜色,但是色调都不会偏离整体的蓝色基调。
配色弱有救了!教你利用图片创建独有的色彩方案!
色彩方案的运用
在进行色彩运用的时候,也会出现黑白灰的灵活运用,但要确保这些颜色的出现不会干扰整体画面色彩的和谐感(左)。
大多数时候,我们未必希望纯白色作为我们的底色调。要想让整体看起来优雅,添加一点透明度非常低的主色调作背景是必不可少的(右)。
配色弱有救了!教你利用图片创建独有的色彩方案!
除了找现成的图片来配色之外,你还可以试试「彩通配色」:《大开眼界!那些巧用「彩通配色」的醒目设计》
取色工具多不胜数,不过Kuler应该还是口碑最好的几个取色工具之一:《VC教程!教你使用最受欢迎的配色小工具KULER》
当然,行走江湖怎么可以没有备用方案!所以,这个时候不妨看看:《碉堡!配色神器第二代!COLOR CUBE免费开放下载

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,128评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,316评论 3 388
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,737评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,283评论 1 287
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,384评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,458评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,467评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,251评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,688评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,980评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,155评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,818评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,492评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,142评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,382评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,020评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,044评论 2 352

推荐阅读更多精彩内容

  • UI 设计知识库 [03] 色彩 · 配色 目 录 [隐藏] 1 色彩的特征 1.1 色轮 1.2 色彩关系 1....
    我是开水泡饭阅读 5,688评论 3 56
  • 混沌青浊一缕气,家住海拔六千一。 脚下东海波涛聚,隔壁彩霞云卷积。 青梅竹马颜小夕,云朵家族排行七。 天涯海角留踪...
    桃木仙人阅读 790评论 8 14
  • 2017年8月14日,京大三组值乘的G387次列车,列车运行至天津西站时,4号车厢一名旅客突然感到身体不适,蜷缩在...
    婷婷_57c2阅读 323评论 0 0
  • 鳄鱼让司诺把扑克牌找出来,准备玩双升打发时候。我和鳄鱼一拨,再我们把杜鹃他们杀的昏天黑地的时候。导游跑回来命令我们...
    美学儿阅读 324评论 0 0
  • 唐小宫·今天我们穿越到莎士比亚时代 2015年1月30日: 【唐小宫•今天】今天我们穿越到莎士比亚时代。 【历史上...
    唐小宫阅读 341评论 2 1