当前位置: 首页 > 新闻中心 > photoshop cc网页配色设计全程揭秘(第2版)/网页设计与开发殿堂之路

photoshop cc网页配色设计全程揭秘(第2版)/网页设计与开发殿堂之路

发布时间:2024-03-30 10:31:35

  1. 网站建设的常见的配色方案
  2. 网站建设的常见的配色方案
  3. 网页设计配色的用色十例

一、网站建设的常见的配色方案

南昌云端在网站建设过程中会经常运用到网页的配色方案,下面就介绍一下常见的配色方案有近似色、补充色、分离补色、组色等。

1.近似色 近似色是色环上已给定的颜色临近的任何一种颜色。如果从橙色开始,它的两种近似色应该选择红和黄。为近似色在色环上的位置。用近似色的颜色主题可以实现色彩的融洽与融合。如图 7-18 所示,列出了几种近似色的搭配方案。为使用了近似色搭配方式的商业网站。蓝色系的搭配,给人以清凉、专业的感觉。

2.补充色 补充色也叫对比色,是指在色环中的直接位置相对的颜色。如果想要使网站中的色彩强烈突出、富有冲击力的话,可选择对比色。为使用了补充色的网站。大块的橙色和蓝色用到一起,具有强烈的冲击力,达到了视觉上的震撼效果。

3.分离补色 分离补色可以由 2~3 种颜色组成。在色环上选择一种颜色,它的补色就在色环的另一面。可以使用补色旁边的一种或多种颜色。 这样的一组颜色叫做分离补色。分离补色的搭配可以起到类似补充色的强烈对比作用,但有近似色的缓冲,可以使页面效果更加柔和。我们南昌云端为使用了分离补色搭配方式的网站。这个网站给人的感觉是色彩鲜明,但是又不会过于突出。

4.组色 组色是色环上距离相等的任意 3 种颜色。为色环上的一组组色。因为 3 种颜色形成了对比关系,所以组色被用作一个色彩主题时,会对浏览者造成紧张的情绪。一般我们南昌云端在商业网站中,不采用组色的搭配。

一、网站建设的常见的配色方案

南昌云端在网站建设过程中,经常会使用到不同的网页配色方案。本文将详细介绍常见的配色方案,包括近似色、互补色、分离互补色和组色等。

1. 近似色

近似色是指在色轮上相邻的颜色。例如,以橙色为起点,其近似色可以选择红色和黄色。近似色的搭配能够实现色彩的和谐与统一。如图7-18所示,展示了几种近似色的搭配方案。这些方案应用于商业网站,如蓝色系的搭配,给人一种清凉和专业的感觉。

2. 互补色

互补色,也称为对比色,是指在色轮上直接相对的颜色。如果想要网站色彩具有强烈的视觉冲击力,可以选择互补色。如图所示,该网站使用了互补色,大块的橙色和蓝色相结合,产生了强烈的对比效果,给人带来视觉上的震撼。

3. 分离互补色

分离互补色由2-3种颜色组成。在色轮上选择一种颜色,其补色位于色轮的另一侧,同时可以选择补色旁边的颜色。这种颜色组合被称为分离互补色。分离互补色的搭配类似于互补色,但因为有近似色的中和,可以使页面效果更加柔和。南昌云端为某网站采用了分离互补色搭配方式,该网站色彩鲜明,但不过于突出。

4. 组色

组色是指在色轮上等距离的任意三种颜色。如图所示,这是色轮上的一组组色。由于三种颜色之间形成对比,当它们作为一个色彩主题时,可能会给浏览者带来紧张的情绪。通常,在商业网站设计中,南昌云端不推荐使用组色搭配。

三、网页设计配色的用色十例

以下将分别介绍十个配色较好的网站,大家可以学习和借鉴一下,培养对色彩的敏感以及独到的审美能力。

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

2)娱乐类的综合性网站ugo,他的配色方案是背景色为黑色rgb为(0,0,0)中嵌套rgb(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)。

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

5)黄色调为主网站,很体现公司的个性,现在我们就来看一看她的颜色搭配。主色调为黄色rgb为(255,199,48/#ffc730),辅助色调为rgb(49,102,46)字体为棕色rgb(153,103,0),中间再配以抽象的图片,显得个性十足但又不单调。

6)橘红色网页。下面的这个网站就是一个非常著名的例子。他的主色调为rgb(255,151,0)辅助色调为rgb(255,103,4),菜单rgb为(252,200,0)。字体使用黑色rgb为(0,0,0)。此种配色显得主人较为前卫,色彩热烈,给人的震慑力较强。

7)鲜红色也是一种震撼感很强的颜色,如果搭配不当,也可能使网站没有风格和特点。下面的这个网站就是使用红色比较好的网站。我们来看看他的颜色搭配。他使用的主色调是rgb(200,9,0),配以抽象的图形,文字使用的是rgb(213,229,167)显得美观而不失独特,大气而不逼人。

8)不经常用到的颜色色调,如果使用到你的网页中,肯定会给人耳目一新的感觉。他的主色调为rgb(144,151,97)辅助色调为rgb(173,168,112)边饰为黑色rgb(0,0,0)字体为黑色rgb(0,0,0)。这样的搭配显得风格独特,颜色和谐而庄重。

9)设计更加的简单化,但是颜色的使用使网页并不呆板,反而让人感觉到一股浓浓的生活和家庭气氛,使人置身于美丽和爱中。他的主体是由两种颜色构成,分别是rgb(239,200,161)和rgb(201,254,200)。如此简单,但是却栩栩如生,跃然网上。

10)下面举出这个例子是想证明一个道理——只要你有足够的想象力,你就能够设计出漂亮的网页。目前在网上非常流行一句话就是网页的搭配不要超过四种主要颜色,否则就有杂乱之感。下面的这个网站远远的超过了三种颜色,但是她并不失美丽。因此重要的还是色彩的驾驭能力。下面这个例子的菜单就使用了7种颜色,但是我们看到的网页并不杂乱,相反感觉作者很有创意。

网页设计的颜色搭配需要在实践中不断的摸索和不断的创新,认真学习别人的先进方法和经验,可以快速的提高我们的制作水平。

可以说。网页颜色搭配得当,成功也就走了一半。