如何从图片吸取灵感的网站配色方案

2016-02-16 22:31 11 1 收藏

今天天气好晴朗处处好风光,好天气好开始,图老师又来和大家分享啦。下面给大家推荐如何从图片吸取灵感的网站配色方案,希望大家看完后也有个好心情,快快行动吧!

【 tulaoshi.com - 平面设计 】

我们开始设计手机网页时,总是需要先确定好网页的配色方案。那么,这时,除非是客户提出色彩方案,我们大部分要面对的情况的是,根据客户的需求创建出一个色彩方案。在此,我想教大家如何从图片这一来源中获取灵感并创建出色彩方案。

一、选择图片

首先,去各大网站搜索你喜欢的图片,图片的选择应该尽量选择色调有变化且明暗对比也较为明显的。因为黑白或低对比度的色调只会让你最后的色彩方案看起来不够鲜明。

要从配色方面吸引自己的图片上进行选择。

如何从图片吸取灵感的网站配色方案,PS教程,图老师教程网

二、吸取色彩在PS里打开这张图片,吸取色彩。吸取色彩并不是任意选取自己喜欢的颜色就可以,根据整个图片的色彩分布,先找到图片的主色调。

主色调的选择和使用主色调的选择依据整个图像当中分布最广的一种颜色,在这张图片中,我们可以看出分布最广的为蓝色,这些蓝色呈现明暗层次深浅的不同,因此,在深蓝到浅蓝中我选择了过渡最为均衡的一种中度灰的蓝色。这种蓝色在图片上表现的是一团团云雾和湖泊的颜色。

三、建立自己的色彩方案选择新建一个文件,白色底背景,图片中选好的色彩作为前景色画一个圆形。这个圆形也就是你的色彩方案中的第一个色彩:主色调。

如何从图片吸取灵感的网站配色方案,PS教程,图老师教程网

主色调的运用范围

在网页设计的时候,主色调的使用范围在整个网页的色彩面积较大的地方,例如用于网页背景或形状元素上。当然,一种色彩是无法开始设计的,因此接下来我们会选择第二种颜色。

辅助色的选择

辅助色通常是一个能烘托、能与之产生呼应的颜色,如果主色调是一个冷色调,那么辅助色就偏向为一个暖色调。因为一张色彩丰富的图片必定是具备冷暖两种倾向的色彩,因此,你这时会在主色调的另外相反色温的色调上进行选择。

在这里我选择了红色屋顶的暖橙色,和蓝色的冷感进行了均衡。

如何从图片吸取灵感的网站配色方案,PS教程,图老师教程网

辅助色的运用范围

辅助色通常会使用在网页设计中的字体、小面积的元素上。辅助色如果和主色形成了互补色就会产生一种强烈的对比,这时对比色还会有强调的作用。当你想要凸显网页中某个元素时就可以试用上强调色。

那么什么是对比色呢?就是在色环上位置刚好相对的颜色,例如:红色和绿色,紫色和橙色,蓝色和黄色。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

如果你觉得你选择辅助色强调不够强烈,你可以另外在主色基础上,从色环里选择主色的对比色,作为第三种色彩方案。

如何从图片吸取灵感的网站配色方案,PS教程,图老师教程网

高光和阴影

这里通常是指主色调在图片上展示出来的高光和阴影部分。这时,已经无需完全依靠图片了。我们的色彩方案里已经备选了三种颜色,而剩下的色彩就在主色调基础上调整变化。

主色调增加白色就变作高光部分,作为第四种颜色。

如何从图片吸取灵感的网站配色方案,PS教程,图老师教程网

如果你的设计配色色彩偏重,这时可以往主色调添加黑色,作为第五种色彩选择。

如何从图片吸取灵感的网站配色方案,PS教程,图老师教程网

高光和阴影色在网页中也作为一种修饰的颜色选择,注意慎用。高光和阴影色可选其中一种作为中立色。因为这种利用黑白变幻出的颜色层次丰富,因此这里的选择会非常多。这就需要你在最终色彩方案中再根据实际情况进行调整。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

确定色彩方案

色彩方案选择好以后,最好确保整体颜色不得超过3种颜色:主色、辅助色、高亮/阴影色。

即使是三种颜色,但是色调都不会偏离整体的蓝色基调。

如何从图片吸取灵感的网站配色方案,PS教程,图老师教程网

色彩方案的运用

在进行色彩运用的时候,也会出现黑白灰的灵活运用,但要确保这些颜色的出现不会干扰整体画面色彩的和谐感(左)。

大多数时候,我们未必希望纯白色作为我们的底色调。要想让整体看起来优雅,添加一点透明度非常低的主色调作背景是必不可少的(右)。

如何从图片吸取灵感的网站配色方案,PS教程,图老师教程网

来源:http://www.tulaoshi.com/n/20160216/1575785.html

延伸阅读
不同于其它色彩展现柔和,低沉之美的灰紫色没有对比色。灰紫色调合了红紫色、灰色和白色,是个少见的彩色。 任何颜色加上少许的灰色或白色,能表达出的柔和之美,有许多种包括灰蓝色、灰绿色等。但若灰紫色本身被赋其它彩度或亮度,则可能掩盖了原颜色的原有意境。使用补色,或比原色更生动的颜色,可使这些展现柔和之美的颜色顿...
win7电脑如何修改配色方案?   画面对于人来说是最为直观的感受了,这也是为什么大家重视第一印象的原因。对人来说是这样,对于电脑来说也是这样的,win7旗舰版拥有自己的配色方案的,但是有的时候,我们却经常发现自己的电脑配色方案被修改,导致界面变得非常的不标准,至少对于习惯了win7界面的朋友来说,这种被更改过的配色方案是...
在国外很多企业喜欢用WordPress这个CMS系统来做企业网站,除了能降低开发成本外,WP自身的功能、SEO优化、模板设计都是很不错的。近期设计达人网收集了一些使用WordPress制作的优秀网页设计作品,细心点可以发现,这些WP主题都喜欢用扁平化设计风格,并使用新的HTML5和CSS3来实现前端交互,使用作品看起来动感而不花哨。 这些WordPress主题设...
标签: Web开发
综合网店系统基于asp+SqlServer开发,兼容各类商品的发布、展示和订购。除了具有完善的商品类型管理、商品管理、配送支付管理、订单管理、会员分组、会员管理、查询统计和多项商品促销功能,还具有完整的文章、图文、下载、单页、广告发布等网站内容管理功能。系统具有静态HTML生成、UTF-8等多语言支持、可视化模版引擎等技术特点,支持多...
创造一个Palette的过程中,色调和饱和度不一定是最重要的部分,颜色彼此之间如何相互作用,在我认为是更为重要的。 我不确定那是蓝色。你能把蓝色调的更‘正’一些吗?我听说蓝色体现了一种信任感。 设计师们在他们的职业生涯中无数次地听到这样的评论,而且这也确实是很好的交流。客户并不经常这样细致的对某个颜色做出评论。配色...

经验教程

314

收藏

60
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部

如果您有什么好的建议或者疑问,可以联系我们。 商务合作QQ:3272218541;3282258740。商务合作微信:13319608704;13319603564。

加好友请备注机构名称。让我们一起学习、一起进步tulaoshi.com 版权所有 © 2019 All Rights Reserved. 湘ICP备19009391号-3

微信公众号