颜色[教学设计]关于网页颜色搭配的技巧

前段时间在技术区看到有朋友提岀要做个配色方血的教程颜色方血自己过去只学过一些水粉和国画稍微貝备点颜色搭配能力在者后来学习的漫画几乎没有用到颜色全是黑白线稿到现在做的鼠绘配色也都是摸着石头过河今天在网络上搜集了一些资料仅提供给人家参考毕竟目前关于动画制作配色方而的教程真是少之又少啊不专业学过还真不晓得该说些什么呢让大家见笑了。

这里先根据我朋友LONE在闪客皇朝(http://www.fl ashkin g.cn)所做的配色教程开始讲。

依次演示

1、紫色系与黄色系

说明紫色占大部分呦面添加黄色就占少最画血这样看上去会比较协调。相反如果黄色占了人部分的画曲,紫色就必须占少量画面。

2、红色系与绿色系

3、红色系与黄色系

4、红色系与黑色系

说明

这里大家练习的同时偶要强调两种对比色不要在同个画面五五对分 比如图1紫色占大部分画面添加黄色就占少量MW,这样看上去会比较协调。相反如果黄色占了大部分的画面紫色就必须占少SiiniWo还冇一点建议大家在耍凸显的主体物加以口边或黑边因为在颜色很多的情况卜黑 白灰会起到屮间色的作川來给画面强烈的对比反差做协调。 比如要用黑色加边也不必用纯黑深色也町以黑偏蓝啊黑偏红啊黑偏黄啊依次类推看你自己的感觉了。

不过建议刚开始练习川色的朋友先从纯色练习着手把握好色彩感觉后在做比较深的研究。

颜色搭配并没冇一个固定的模式如果搞过绘画的人应该知道凡高的作品《向口葵》和《星空》 他的作品颜色搭配很人胆而且完全超出逻辑颜色反差很大使人视觉感受莫人的冲击力而以上LONE的配色方法他主要是以粉色调为主使颜色与颜色之间达到和谐和统一让人看起來很舒服的样子。

例图

通常为主色调决定你要搭配什么样的颜色才协调如上图主色调为暗绿色而人物黑白色作为中间色字体的色调就要做到相应调幣让人首先看到人物眼睛——首饰——闪客皇朝字体然后才会注意到背景色彩能引导一个人的视觉走向跟配色不无关系。

如果配色过于复杂多变那很难让人把握住中心我们称之为“记忆点”你要将什么中心明确的向大家展示那你就要让它在主背景色中突出表现出來。

如上图主背景色调为蓝色+部分黑色而白色是突出表现中心的一个色调那鸽子的造型就用白色表示如果用

其他色调如果是墨绿或者与背景色相似的颜色那就形成不了反差也就无法体现整幅图的中心点更不能烘托气

氛了。

以下的图是同样的道理大家可以参考下

图3的行景色为纯白那使用淡蓝色搭配能很好的体现主题。各种颜色的搭配能让我们产生共鸣和丰富的想彖空间:

鲍3热情、 奔族富喜悦.庄严灿

董色黑色高贲白色、 有、 夜烂、活泼沉着

蓝色绿色严肃灰色、 晩s简洁浄

紫色棕色纯洁、 单、 清科技

天空、 爽、 生生机

植物、 命、 沉

庄重.稳富贵

浪漫、 厚朴

大地、

谈到配色网站用色羡为考究一个配色好的站点首先吸引人的第一中心点就是它良好的颜色搭配然后才会让人注意内容。

不同的网站冇着自己不同的风格也冇着自己不同的颜色。 网站使川颜色大概分为几种类型

1、公司色

在现在企业屮公司的CI形象显得尤其重要每一个公司的C1设计必然要有标准的颜色。 比如新浪网的主色调是一种介于浅黄和深黄ZI'可的颜色 同时形象宣传、海报、广告使用的颜色都和网站的颜色一致。再比如国富投资公司的主色调是C 100%,M 60%,Y 0%,K 0%。这样的颜色使用到网站上显得色调口然底蕴深厚。

2、风格色

许多网站使用颜色继承的公司的风格。比如海尔使用的颜色是一种中性的绿色即充满朝气有不失自己的创新粕神。女性网站使用粉红色的较多大公司使用监色的较多……这些都是在突出自己的风格。

3、 习惯色

这些网站的颜色使用很大一部分是凭口己的个人爱好 以个人网站较多使用 比如口己喜欢红色、紫色、黑色等,在做网站的时候就倾向于这种颜色。每一个人都有口己喜欢的颜色 因此这种类型称为习惯色。

以下我分別介绍几个配色比较好的网站大家对以学习和借鉴下培养对色彩的頌感以及独到的审美能力。

1,这是个人型的NBA网站通常我们经常看到的此类网站以白色为背景但是这个网站却用灰黑色RGB(48, 48,48/#333333) 以下颜色都用RGB表示 ,文章标题用色为RGB为(203, 201, 153/#CCC99),菜单使用的RGB为(112, 119,112/#707770)o这样的配色可以显示独特的个性又不失大型网站的风采。

如图:

色系如下:

现在介绍的网站相対简单但是她的用心也别具匠心现在我们來看一看整体上使用的是白色RGB(255,255,255),辅助色为RGB(79,88,95),菜单色为RGB(48,64,64)和RGB(0,81, 111),字体使用的是RGB(83,86,91)。虽然简单但颜色搭配非常的科学合理。

例图:

橘红色如果运用得当的话是一-种非常适用于网页上的颜色。下而这个网站就是一个非常著名的例子。他的主色调为RGB(255, 151,0),辅助色调为RGB(255, 103,4),菜单RGB为(252,200,0),字体使用黑色RGB为(0,0,0)o此种配色显得主人较前卫色彩热烈给人的震撼力较强。

例图:

色系:

当然还有一些其他类网站配色比较不错人家只要掌握要领一样能做出好的颜色搭配来!

色系:

色系:

以上举的这个例子是想证明一个道理——只要你有足够的想象力你就能够设计出漂亮的网页。 目前网上非常流行一句话就是网页的搭配不要超过四种主要颜色否则就有杂乱之感。当然也有些站点高达7种以上颜色搭配的 那就要看你的颜色驾御能力如何了呵呵

以往以上所讲的对你有所帮助我也是刚学不长时间对色调的把握尚缺火候和信这里也有不少高手懂得一些配色的原理真诚希望大家能够多交流也希望这个帖子能起到抛砖引玉的作用让大家谈谈配色的经验这也対一些需要这方血知识的朋友有些帮助。

我自己的观点就是突出图的中心点颜色搭配和谐看起來舒服就行了。

以下提供一个S WF,人家动手白己配配颜色看看颜色与颜色之间的关系找找感觉吧

欢迎高手进来补充不胜感激

网页颜色搭配的技巧

颜色的使用在网页制作中起着非常关键的作用有很多网站以其成功的色彩搭配令人过F1不忘。但是对于刚开始学习制作网页的人來说往往不容易驾驭好网页的颜色搭配。除了学习各种色彩理论和方法Z外笔者认为多学习一些著名网站的用色方法对于我们制作美丽的网页可以起到事半功倍的作用。所以笔者总结了一些著名网站的颜色搭配方法这些方法可以让我们的学习少走弯路快速提高我们的网贝制作水平。

网页颜色原理和象征意义

我们所有网页上颜色在H TM L下看到的是以颜色英文单词或者十六进制的表示方法如#000000表示为黑色 。不同的颜色有着不同的含义给人各种丰富的感觉和联想。

红色热情、奔放、喜悦、庄严

黄色高贵、富有、灿烂、活泼

黑色严肃、夜晚、沉着

蓝色: 天空、清爽、科技

绿色: 植物、生命、生机

口色纯洁、简单、洁净

灰色庄重、沉稳

紫色浪漫、富贵

棕色大地、厚朴

网页颜色搭配的技巧

1、紫色系与黄色系

2、红色系与绿色系

3、红色系少黄色系

4、红色系与黑色系

5、红色系与白色系

建议刚开始练习川色的朋友先从纯色练习着手把握好色彩感觉后在做比较深的研究。

颜色搭配并没有一个固定的模式如果搞过绘画的人应该知道凡高的作品《向H葵》和《星空》 他的作品颜色搭配很大胆而冃完全超出逻辑颜色反差很大使人视觉感受莫大的冲击力

通常为主色调决定你要搭配什么样的颜色才协调如果配色过于复杂多变那很难让人把握住中心我们称之为“记忆点”你耍将什么中心明确的向大家展示那你就耍让它在主廿景色中突出表现出来。

配色 网站用色其为考究一个配色好的站点首先吸引人的第一中心点就是它良好的颜色搭配然后才会讣人注意内容。

最佳颜色搭配

一、色彩处理色彩是人的视觉最敏感的东西。主页的色彩处理得好对以锦上添花达到事半功倍的效果。色彩总的应用原则应该是“总体协调局部对比”也就是主页的整体色彩效果应该是和谐的只有局部的、小范围的地方可以有一些强烈色彩的对比。在色彩的运用上可以根据主页内容的需要分别采用不同的主色调。因为色彩具有彖征性例如嫩绿色、翠绿色、金黄色、灰褐色就对以分别彖征着春、夏、秋、冬。其次还有职业的标志色例如:军警的橄榄绿医疗卫生的白色等。色彩述具有明显的心理感觉例如冷、暖的感觉进、退的效果等。另外色彩还有民族性各个民族由于环境、文化、传统等因素的影响对于色彩的喜好也存在着较人的差异。充分运用色彩的这些特性可以使我们的主页具有深刻的艺术内涵从而提升主页的文化品位。下面介绍几种常用的配色方案

1•暖色调

即红色、橙色、黄色、赭色等色彩的搭配。这种色调的运川可使主页呈现温馨、和煦、热情的氛围。

2•冷色调

即青色、绿色、紫色等色彩的搭配。这种色调的运用可使主页呈现宁静、清凉、高雅的氛I韦I。

3•对比色调

即把色性完全相反的色彩搭配在同一个空间里。例如红与绿、黄与紫、橙与蓝等。这种色彩的搭配可以产生强烈的视觉效果给人亮丽、鳞艳、爲庆的感觉。当然对比色调如果用得不好会适得其反产生俗气、刺眼的不良效果。这就耍把握“大调和小对比”这一个重要原则 即总体的色调应该是统一和谐的局部的地方可以有一些小的强烈对比。

最后还要考虑主页底色背景色的深、浅这里借用摄影屮的一个术语就是“高调”和“低调”。底色浅的称为高调底色深的称为低调。底色深文字的颜色就耍浅 以深色的背景衬托浅色的内容文字或图片 反Z,底色淡的文字的颜色就要深些 以浅色的背景衬托深色的内容文字或图片 。这种深浅的变化在色彩学中称为“明度变化”。有些主页底色是黑的但文字也选用了较深的色彩 由于色彩的明度比较接近读者在阅览时眼睛就会感觉很吃力影响了阅读效果。当然色彩的明度也不能变化太大否则屏幕上的亮度反差太强 同样也会使读者的眼睛受不了。