征集网锐志网络淘途找素材上91
创意在线首页
平面设计交互设计CG动漫工业设计建筑环境数码影像创意搜
 首页大赛征集资讯教程画廊访谈作品集创企同盟设计招聘人才专区竞赛台专题论吧 找素材看酷站设计网址库
交互设计首页
当前位置:首页 > 交互设计 > 观点 > 正文
网页颜色论:创建属于自己的网站配色方案
作者:北纬二十五度 来源:译言 发表时间:2010-3-2 16:48:51 浏览:

上文我们已经介绍了不同种类的配色方案。现在,让我们开始尝试建立自己配色方案的一部分。有大量的在线工具可以用来协助创建一个配色方案,但是从现在开始我们暂时摒弃这些工具,仅使用Photoshop来完成这项工作。

让我们试着脱离上我已经提到的配色方案,并创建了一些自定义的方案。虽然了解不同颜色之间相互作用的方式,以及传统的配色方案是如何创建的是非常重要的,但是对于你有可能去创建自定义配色方案的大多数设计项目而言,无需严格遵循任何预定义的模式。

因此,为了我们的项目目标,我们将创建三个配色方案,每一个用于两个不同的网站。我们的虚拟客户是一个现代建筑设计的博客和一个深受维多利亚时代风格影响的高档女性服装零售商。

为了对每一种方案都有一个感性认识,我们先从最基础的单色配色方案开始。虽然我曾提到传统的配色方案模式在设计中不常用到,但是单色配色方案确实这一规则的例外。你将可能发现所使用的单色方案是相当常用的基础原理。

对于我们的服装店来说,将加入的白色作为中和色是一个传统的配色方案。

对于我们的设计博客,我们配以由阴影色和浅灰色组成的的配色方案。

上图可以看作类比配色方案,但我们省略了一个颜色。它深紫色和红紫色组成。在色轮上这两个颜色彼此相邻,看起来效果很好,特别是当它们使用不同级别的明度和饱和度时。

在灰色配色方案中添加两个红色色调可以引起视觉上的关注,同时也为你设计中的特定部分增添了潜在的特别强调。

在上图中,我们不再使用紫色色相,转而使用酒红色。酒红色也是在色轮上与红紫色相邻的颜色。我们还增加在色轮上位于紫色对角上的浅黄色调。它充当我们的中和色,并且和我们的其他色相相比,看起来更像是白色。

虽然这个配色方案乍眼看上去像另一个标准的灰色和红色调色板,但是如果更仔细的研究一下,你将会发现灰色其实是蓝色调。蓝色和红色构成了四阶配色方案的三分之二,但在没有黄色的时候看起来也很好,特别是在当红色保持高纯度而蓝色色调淡化到几乎变为灰色的点时。

为什么阴影色、色调和浅色都很重要

正如在上文的配色方案中看到的那样,在你的配色方案中使用浅色、色调和阴影色是至关重要的。纯色相都有类似于明度和饱和度的等级。这导致了配色方案既具有不可替代的压倒性,同时却又很枯燥。

当将色调、阴影色和浅色这些概念混合在一起时,原来12辐色轮的概念在你的设计中可以使用的颜色数量将扩大为无限。创建具有专业外观配色方案的最简单方法是为某一非纯色相的特定颜色选用一些色调、浅色和阴影色,加入到另一个纯的、或者接近纯的色相中,这些色相是在色轮中至少间隔三个颜色(是三维、四维或分列互补配色方案)用于强调色。这种方法为你的配色方案增添了视觉冲击力,同时仍不失平衡感。

加入一些中性色

中和色是创建一个配色方案的另一个重要组成部分。灰色,黑色,白色,棕色,棕褐色和灰白色通常被认为是中性色。褐色,棕褐色,和灰白色往往使配色方案在视觉上有温暖的感觉(由于它们其实都是橙色和黄色的色调,阴影色和浅色)。灰色根据周边的颜色呈现出暖色或者冷色的效果。黑色与白色的同样可以是暖色或冷色,这取决于周围的颜色而定。

黑色和白色是最简单的,几乎可以加入任何一个配色方案中的中性色。 然而为了加入更多的视觉冲击力,可以考虑使用稍亮或者稍暗的灰色置于白色或黑色的位置。

添加褐色,棕褐色,和灰白色色调更具技巧一些,但通过一些练习你将会发现渐渐变得容易了。对于褐色来说,可以考虑在黑色的位置使用一种非常暗的巧克力棕色。灰淡白色在很多情况下可以替代白色或者浅灰色。和棕褐色也可以取代灰色的位置(通过添加以小额灰色来创建色调会更容易些)。

配色方案中使用照片

我个人最喜欢的创建配色方案的方法是使用照片。在线的自动化工具可以为你自动完成这项工作(Adobe Kuler是这些工具中我个人最喜欢的一种),或者也可以使用Photoshop来完成制作。

使用Adobe Kuler,不仅可以搜索Flickr上的照片,也可以上传自己本机上的图片。如果你正在为在网站设计中使用什么颜色而绞尽脑汁的话,可以尝试在Flickr中搜索相关的词。有时,这种方法可以找到也许你自己都根本没有想到的配色方案。

让我们尝试这种使用Kuler和Photoshop两种方法。在Flickr中找到你喜欢的,可以激发出你希望创造出的设计感觉的照片。我选择了这一张:


1 2 3 4 5
在线编辑:xudf
本文链接:


推荐阅读:
·2021第十五届“创意中国”设计大奖 征稿章程
·2021第七届“学院派奖”全国艺术与设计大赛征集公告
·青春唯美插画培训网络远程班正在招生
·第八届中国高等院校设计作品大赛启动
·第十二届中国高校美术作品学年展获奖名单公布
·2021第七届“学院派奖”全国艺术与设计大赛征集公告
·第六届“包豪斯奖”国际设计大赛获奖名单揭晓
免责声明:本站刊载此文不代表同意其说法或描述,仅为提供更多信息。对本文有异议,请联络本站!
转载要求:文章作者及来源信息必需保留。转载之图片、文件请不要盗链本站地址,且不准打上各自站点的水印!

近期推荐报道 返回首页更多精彩等着你!

Illustrator| 用AI创建精细矢量插图徽章Photoshop| PS经典合成张开血盆大嘴樱桃
Photoshop| Photoshop自制个性的黑色翅膀摄影佳作| 德国Thomas Wuhrer长腿女郎性
Photoshop| Photoshop制作超酷的边缘发光的荧CorelDraw| CorelDRAW制作编织效果详细教程
Illustrator| illustrator制作潮流海报字体摄影佳作| 惊艳的Francesco Marconi
Photoshop| 利用画笔及图层样式制作方格子艺术纹理背景Photoshop| Photoshop制作简单时尚的彩色放射
关于本站 | 联系方式 | 商业服务 | 合作伙伴 | 站点地图 | 免责声明 | 版权声明 | 在线投稿