文档详情

网站配色方案实例

公****
实名认证
店铺
DOCX
625.45KB
约12页
文档ID:406469676
网站配色方案实例_第1页
1/12

网站配色方案实例颜色的利用在网页制作中起着超级关键的作用,有很多网站以其成功的色彩搭配令人过目成诵可是 对于刚开始学习制作网页的人来讲,往往不容易驾驭好网页的颜色搭配除学习各类色彩理论和方式之外, 笔者以为多学习一些著名网站的用色方式,对于咱们制作美丽的网页能够起到事半功倍的作用所以,笔 者总结了一些著名网站的颜色搭配方式,这些方式能够让咱们的学习少走弯路,快速提高咱们的网页制作 水平一、网页颜色原理和象征意义咱们所有网页上颜色,在HTML下看到的是以颜色英文单词或十六进制的表示方式(如#000000表示 为黑色)不同的颜色有着不同的含义,给人各类丰硕的感觉和联想红色:热情、奔放、喜悦、庄重黄色:高贵、富有、灿烂、活泼黑色:严肃、夜晚、沉着白色:纯洁、简单、干净蓝色:天空、清爽、科技绿色:植物、生命、生机灰色:庄重、沉稳紫色:浪漫、富贵棕色:大地、厚朴二、网页颜色的利用风格不同的网站有着自己不同的风格,也有着自己不同的颜色网站利用颜色可能分为几种类型:一、公司色在此刻企业中,公司的CI形象显得尤其重要,每一个公司的CI设计必然要有标准的颜色比如新 浪网的主色调是一种介于浅黄和深黄之间的颜色,同时形象宣传、海报、广告利用的颜色都和网站的颜色 一致。

再比如国富投资公司的主色调是C: 100%, M: 60%, Y: 0%, K: 0%如此的颜色利用到网站上显得 色调自然、底蕴深厚二、风格色许多网站利用颜色秉承的是公司的风格比如海尔利用的颜色是一种中性的绿色,即充满朝气有不 失自己的创新精神女性网站利用粉红色的较多,大公司利用蓝色的较多……这些都是在突出自己的风格3、适应色这些网站的颜色利用专门大一部份是凭自己的个人爱好,以个人网站较多利用,比如自己喜欢红色、 紫色、黑色等,在做网站的时候就偏向于这种颜色每一个人都有自己喜欢的颜色,因此这种类型称为适 应色三、设计用色十例以下我将别离介绍十个配色较好的网站,大家能够学习和借鉴一下,培育对色彩的敏感和独到的审 美能力1)这是个大型的NBA网站通常咱们常常看到的此类网站以白色为背景,可是那个网站却用灰黑色 RGB为(48,48,48/#333333)(以下颜色都用RGB表示),文章题目用色为RGB为(203,201,153/#CC CC99),菜单利用的RGB为(112,119,112/#707770)如此的配色能够显示独特的个性,又不失大型网 站的风度如图1IMIH FW IBi FhI.TV •图12)下面是一个娱乐类的综合性网站UGO,他的配色方案是背景色为黑色RGB为(0,0,0)中嵌套R GB(0,0,82),字体白色RGB(255,255,255),菜单为RGB(77,114,159)。

如此的虽以黑蓝为主色调, 可是配以漂亮的图片,给人的感觉是生机盎然,充满了互动色彩和青春气息3)下面的那个网站是赫赫出名的微软公司网站,微软不仅软件做的好,连网页制作也是世界一流 他的每一个网页都是制作的样板从网页咱们就可以够看出微软公司的风格、作风,和雄厚的实力背景 颜色利用蓝色RGB为(0,151,254),菜单为黑色RGB(0,0,11),菜单为灰色RGB(200,200,200), 字体为黑色RGB(0,0,0),如图34)此刻介绍的网站相对简单,可是她的用色也别具匠心,此刻咱们来看一看,整体上利用的是白色R GB(255,255,255),辅助色为 RGB(79,88,95),菜单色为 RGB(48,64,64)和 RGB(0,81,111) 字体利用的是RGB(83, 86, 91)虽然简单,但颜色搭配超级的科学合理如图4图45)下面的网站采用黄色调为主,很表现公司的个性,此刻咱们就来看一看她的颜色搭配主色调为 黄色 RGB 为(255,199,48/#FFC730),辅助色调为RGB(49,102,46)字体为棕色 RGB(153,103,0), 中间再配以抽象的图片,显得个性十足但又不单调。

如图5图56)橘红色若是运用适当的话是一种超级利用于网页上的颜色下面的那个网站就是一个超级著名的 例子他的主色调为RGB(255,151,0)辅助色调为RGB(255,103,4),菜单RGB为(252,200,0) 字体利用黑色RGB为(0,0,0)此种配色显得主人较为前卫,色彩烈火,给人的震慑力较强如图67)鲜红色也是一种震撼感很强的颜色,若是搭配不妥,也可能使网站没有风格和特点下面的那个 网站就是利用红色比较好的网站咱们来看看他的颜色搭配他利用的主色调是RGB(200,9, 0),配以 抽象的图形,文字利用的是RGB(213,229,167)显得美观而不失独特,大气而不逼人如图7图78)下面介绍的这种色调是咱们制作网页的时候不会经常常利用到的颜色,若是利用到你的网页中, 肯定会给人线人一新的感觉他的主色调为RGB(144,151,97)辅助色调为RGB(173,168,112)边饰 为黑色RGB(0,0,0)字体为黑色RGB(0,0,0)如此的搭配显得风格独特,颜色和谐而庄重如图8图89)下面的设计加倍的简单化,可是颜色的利用使网页并非呆板,反而让人感觉到一股浓浓的生活和 家庭气氛,令人置身于美丽和爱中。

他的主体是由两种颜色组成,别离是RGB(239, 200,161)和RGB(2 01,254, 200)如此简单,可是却栩栩如生,跃然网上如图9图910)下面举出那个例子是想证明一个道理一一只要你有足够的想象力,你就可以够设计出漂亮的网 页目前在网上超级流行一句话就是网页的搭配不要超过四种主要颜色,不然就有杂乱之感下面的那个 网站远远的超过了三种颜色,可是她并非失美丽因此重要的仍是色彩的驾驭能力下面那个例子的菜单 就利用了 7种颜色,可是咱们看到的网页并非杂乱,相反感觉作者很有创意如图10朗拈设计图10网站设计中配色方案的利用不论你做什么样的设计,色彩都是一个不容轻忽的问题色彩以一种“隐蔽”的方式转达的 各类信息,这些信息会影响观看者的心理和感受,左右他们的判断和选择,色彩对于设计而 言实在过重要这篇文章就要比较系统地介绍一些在网页设计中如何利用色彩的入门知识色彩是设计者的得力助手,前提是应用适当对于网站设计而言,色彩的重要性尤其突 出,不过常常被粗心的站长轻忽咱们常常说“第一映像最重要”,于是设计网站时,设计 者常常会花很多精力制作一个“富于冲击力”的LOGO或BANNER,固然,它们很重要。

可是, 访问者访问网站时的第一映像实际上并非来自这些LOGO或BANNER,而是一一色彩!好了,在了解了色彩对于网站设计的重要性以后,咱们开始探访色彩的奥秘色彩入门第一让咱们熟悉一下色彩的一些大体概念三原色一切颜色都来自三原色:红、黄、蓝在那个圆环中,相邻的两个原色相混合能够取得另外三个比较重要的颜色(下文将其称 为二级原色):红+黄二橙,红+蓝二紫,蓝+黄二绿措色圈也择前景色:r只百微eb瑾邑让咱们再深切一步,三原色和三种二级原色能够进一步混合取得更多的颜色,别离是橙 红色、紫红色、蓝紫色、蓝绿色、橘黄色和黄绿色这六种颜色能够称为三级原色踏 搦黄 磴依照一样的方式不断进行下去,那个圆环中颜色之间的分隔线就会消失,取得下图所示的“色彩圆环”,在一些画图程序的调色板中咱们能够看到如此的色彩圆环可是那个圆环仍然没有涵盖所有的颜色,对于圆环中的每一种颜色还有饱和度、亮度和 灰度等的转变也就是说,将上述圆环中的任意一种颜色和黑色、白色、灰色依照不同比例 混合就可以够取得更多的颜色,下面将详细介绍常用的色彩术语饱和度某种颜色的饱和度是指这种颜色所包括的大体颜色的多少例如RGB值为(0,0,255) 的蓝色是纯蓝色,他的饱和度是100%。

随着饱和度的降低,颜色会愈来愈接近灰色口 口耳曰口口0% 30% 40K 60% 809. 100K灰度大体色彩和黑色进行不同程度的混合能够取得不同的灰度,例如亮度大体颜色和白色进行不同程度的混合能够取得不同的亮度,例如::0% 30% 40% 604t SOK 100%色调大体颜色和灰色进行不同程度的混合能够取得不同的色调,例如:色彩方案的种类不同网站应当利用不同的色彩方案,与站点的主题相吻合的色彩方案决不单单能够让网 站“加倍好看”,更重要的是在访问者心目中成立对那个网站的感性熟悉所以,色彩方案 的选择决不能轻率,而且色彩方案绝对是网站建设的第一个步骤若是选择色彩方案时过于 轻率,乃至根本不对网站进行色彩方案的整体计划,你将不可能制作出一个真正优秀的网站例如,一个销售婴儿用品的网站应当利用比较活泼的色彩方案,而一个艺术网站则应当 利用比较执重的方案依照色彩方案中色彩利用方式的不同,咱们能够将色彩方案划分成多种类型,单色方案、 相似色方案、补色方案和三合一色方案单色方案单色方案是指在网站设计中终止利用一种大体颜色,为避免单调,咱们能够通过调整这 种大体颜色的灰度和亮度来取得更多的颜色,由于整个颜色方案中事实上只有一种基色,因 此这种方案称为单色方案。

例如:在Photoshop的色彩选择窗口中,咱们能够如此进行成立单色方案第一调整H (也就 是Hue的缩写)后面的值来调整色调注意,H的单位是度,也就是大体颜色在颜色环上所 处位置的角度设置好H的值以后,再调整B后面的数字调整亮度和S后面的数字调整饱和度注意, 其中B和S的单位是百分比,也就是向大体颜色中添加白色和黑色的百分比如此就可以够 取得一个单色方案了下面来看两个利用单色方案的成功实例单色方案实例之一:这是一个女性网站,因此其大体颜色为粉红色,并通过调整粉红色的饱和度取得了其余 几种颜色整体颜色趋于淡雅,访问者的注意力会很自然地被吸引到几幅展示其产品的图片 上单色方案实例之二:那个色彩方案利用的基色颜色较深,并通过修改其亮度取得其他两种颜色,并用最浅的 颜色作为主体部份的背景,使其突出出来总的来讲,单色方案是一种比较稳重的方案,或说比较保守的方案单色方案给人整洁、 经典的感觉,最适合于内容比较严肃的网站,比如政府网站,学术网站,企业网站,高雅艺 术网站特别值得一提的是,商业网站也比较适合利用此种颜色方案,因为这种方案能够给人一 种稳固感,使访问者容易成立对网站的信赖感固然,这种方案也有其灵活的一面,当利用 较浅的基色时,这种颜色方案也能够用于时尚类网站,转达简约清雅的观念。

相似色方案在色彩圆环上选择彼此相邻的几种颜色组成的配色方案就是相似色方案例如橙色、橙 红色和橙黄色就可以够组成一个相似色方案由于相似色方案中包括了多种基色,若是再加 上亮度和饱和度的转变,能够组成的颜色就超级多□□ssnn■ KQS□ I I■■■园口口下面是相似色方案的实例相似色方案实例一:那个网站利用了由橙黄色、橙红色和橙色组成的配色方案Bullseye是一家ISP服务 商,面向普通客户选用这种方案和行业内惯用的蓝色系形成鲜明对照,个性凸现相似色方案实例之二:那个网站利用了绿色和黄色这两种相似色组成配色方案页面上很多绿色植物,因此文 字利用了绿色,整个页面看上去自然清新,和网站的内容相得益彰通常,相似色配色方案能够给人超级协调的感觉,因此在网站设。

下载提示
相似文档
正为您匹配相似的精品文档