工作ps設(shè)計(jì)顏色配比方案

1、色彩入門首先讓我們熟悉一下色彩的一些基本概念。三原色一切顏色都來(lái)自三原色：紅、黃、藍(lán)。在這個(gè)圓環(huán)中，相鄰的兩個(gè)原色相混合可以得到另外三個(gè)比較重要的顏色（下文將其稱為二級(jí)原色）：紅+黃=橙，紅+藍(lán)=紫，藍(lán)+黃=綠讓我們?cè)偕钊胍徊?，三原色和三種二級(jí)原色可以進(jìn)一步混合得到更多的顏色，分別是橙紅色、紫紅色、藍(lán)紫色、藍(lán)綠色、橘黃色和黃綠色。這六種顏色可以稱為三級(jí)原色。按照同樣的方式不斷進(jìn)行下去，這個(gè)圓環(huán)中顏色之間的分隔線就會(huì)消失，得到下圖所示的“色彩圓環(huán)”，在一些繪圖程序的調(diào)色板中我們可以看到這樣的色彩圓環(huán)。但是這個(gè)圓環(huán)仍然沒(méi)有涵蓋所有的顏色，對(duì)于圓環(huán)中的每一種顏色還有飽和度、亮度和灰度等的變化。也就是

2、說(shuō)，將上述圓環(huán)中的任意一種顏色和黑色、白色、灰色按照不同比例混合就可以得到更多的顏色，下面將詳細(xì)介紹。常用的色彩術(shù)語(yǔ)飽和度某種顏色的飽和度是指這種顏色所包含的基本顏色的多少。例如RGB值為（0，0，255）的藍(lán)色是純藍(lán)色，他的飽和度是100%。隨著飽和度的降低，顏色會(huì)越來(lái)越接近灰色?；叶然旧屎秃谏M(jìn)行不同程度的混合可以得到不同的灰度，例如亮度基本顏色和白色進(jìn)行不同程度的混合可以得到不同的亮度，例如：:色調(diào)基本顏色和灰色進(jìn)行不同程度的混合可以得到不同的色調(diào)，例如：色彩方案的種類不同網(wǎng)站應(yīng)當(dāng)使用不同的色彩方案，與站點(diǎn)的主題相吻合的色彩方案決不僅僅可以讓網(wǎng)站“更加好看”，更重要的是在訪問(wèn)者心目中

3、建立對(duì)這個(gè)網(wǎng)站的感性認(rèn)識(shí)。所以，色彩方案的選擇決不能草率，而且色彩方案絕對(duì)是網(wǎng)站建設(shè)的第一個(gè)步驟。如果選擇色彩方案時(shí)過(guò)于草率，甚至根本不對(duì)網(wǎng)站進(jìn)行色彩方案的整體規(guī)劃，你將不可能制作出一個(gè)真正優(yōu)秀的網(wǎng)站。例如，一個(gè)銷售嬰兒用品的網(wǎng)站應(yīng)當(dāng)使用比較活潑的色彩方案，而一個(gè)藝術(shù)網(wǎng)站則應(yīng)當(dāng)使用比較執(zhí)重的方案。按照色彩方案中色彩使用方式的不同，我們可以將色彩方案劃分成多種類型，單色方案、相似色方案、補(bǔ)色方案和三合一色方案。單色方案單色方案是指在網(wǎng)站設(shè)計(jì)中終止使用一種基本顏色，為避免單調(diào)，我們可以通過(guò)調(diào)整這種基本顏色的灰度和亮度來(lái)得到更多的顏色，由于整個(gè)顏色方案中事實(shí)上只有一種基色，因此這種方案稱為單色方案。

4、例如：在Photoshop的色彩選擇窗口中，我們可以這樣進(jìn)行建立單色方案。首先調(diào)整H（也就是Hue的縮寫）后面的值來(lái)調(diào)整色調(diào)。注意，H的單位是度，也就是基本顏色在顏色環(huán)上所處位置的角度。設(shè)置好H的值之后，再調(diào)整B后面的數(shù)字調(diào)整亮度以及S后面的數(shù)字調(diào)整飽和度。注意，其中B和S的單位是百分比，也就是向基本顏色中添加白色和黑色的百分比。這樣就可以得到一個(gè)單色方案了。下面來(lái)看兩個(gè)使用單色方案的成功實(shí)例。單色方案實(shí)例之一：這是一個(gè)女性網(wǎng)站，因此其基本顏色為粉紅色，并通過(guò)調(diào)整粉紅色的飽和度得到了其余幾種顏色?？傮w顏色趨于淡雅，訪問(wèn)者的注意力會(huì)很自然地被吸引到幾幅展示其產(chǎn)品的圖片上。tyslcs15.jpg

5、 (3.52 KB) 單色方案實(shí)例之二：這個(gè)色彩方案使用的基色顏色較深，并通過(guò)修改其亮度獲得其他兩種顏色，并用最淺的顏色作為主體部分的背景，使其突出出來(lái)?？偟膩?lái)說(shuō)，單色方案是一種比較穩(wěn)重的方案，或者說(shuō)比較保守的方案。單色方案給人整潔、經(jīng)典的感覺(jué)，最適合于內(nèi)容比較嚴(yán)肅的網(wǎng)站，比如政府網(wǎng)站，學(xué)術(shù)網(wǎng)站，企業(yè)網(wǎng)站，高雅藝術(shù)網(wǎng)站。特別值得一提的是，商業(yè)網(wǎng)站也比較適合使用此種顏色方案，因?yàn)檫@種方案可以給人一種穩(wěn)定感，使訪問(wèn)者容易建立對(duì)網(wǎng)站的信任感。當(dāng)然，這種方案也有其靈活的一面，當(dāng)使用較淺的基色時(shí)，這種顏色方案也可以用于時(shí)尚類網(wǎng)站，傳達(dá)簡(jiǎn)約清雅的觀念。相似色方案在色彩圓環(huán)上選擇彼此相鄰的幾種顏色構(gòu)成的配色

6、方案就是相似色方案。例如橙色、橙紅色以及橙黃色就可以組成一個(gè)相似色方案。由于相似色方案中包含了多種基色，如果再加上亮度和飽和度的變化，可以構(gòu)成的顏色就非常多。0031.jpg (8.5 KB) 0032.jpg (4.87 KB) 0033.jpg (4.75 KB) 2009-9-7 21:080034.jpg (4.98 KB) 下面是相似色方案的實(shí)例。0035.jpg (31.44 KB) 0036.jpg (3.67 KB) 相似色方案實(shí)例一：這個(gè)網(wǎng)站使用了由橙黃色、橙紅色和橙色組成的配色方案。Bullseye是一家ISP服務(wù)商，面向普通客戶。選用這種方案和行業(yè)內(nèi)慣用的藍(lán)色系形成鮮明對(duì)

7、照，個(gè)性凸現(xiàn)。0037.jpg (47.11 KB) 0038.jpg (3.54 KB) 相似色方案實(shí)例之二：這個(gè)網(wǎng)站使用了綠色和黃色這兩種相似色構(gòu)成配色方案。頁(yè)面上很多綠色植物，因此文字使用了綠色，整個(gè)頁(yè)面看上去自然清新，和網(wǎng)站的內(nèi)容相得益彰。通常，相似色配色方案可以給人非常協(xié)調(diào)的感覺(jué)，因此在網(wǎng)站設(shè)計(jì)中非常常用。典型的運(yùn)用方法就是，用一種顏色作為頁(yè)面背景，而另外一種在顏色環(huán)中與其相鄰的顏色作為前景色。除了上面介紹的綠色和黃色之外，藍(lán)色和綠色以及紅色和褐色也是比較常用的相似色配色方案。補(bǔ)充色補(bǔ)充色方案在色彩圓環(huán)上沿直徑相對(duì)應(yīng)的兩種顏色構(gòu)成一對(duì)互補(bǔ)色，下圖中小箭頭所指的黃色和藍(lán)色就互為互補(bǔ)色。

8、下圖是三組互補(bǔ)色，每組中含有兩對(duì)互補(bǔ)色。在了解了互補(bǔ)色是怎么回事之后，我們?cè)賮?lái)看雙重互補(bǔ)色。在色彩圓環(huán)上選擇一組互補(bǔ)色，然后分別在這兩個(gè)互補(bǔ)色的旁邊選擇兩個(gè)相似色就可以得到一個(gè)由四種顏色組成的雙重互補(bǔ)色。例如在下圖中，綠色和紅色為互補(bǔ)色，綠色旁邊的深綠色和藍(lán)綠色以及紅色旁邊的橙紅色以及深紅色就構(gòu)成了一組雙重互補(bǔ)色。與雙重互補(bǔ)色相類似的還有分割互補(bǔ)色，也就取是一組互補(bǔ)色中的某一種顏色的相似色得到三種顏色構(gòu)成一組分割互補(bǔ)色。例如下圖中的藍(lán)色和橙黃色是一組互補(bǔ)色，加上橙黃色旁邊的橙紅色就構(gòu)成了一個(gè)分割互補(bǔ)色方案。互補(bǔ)色方案的配置雖然略顯繁瑣，但是在現(xiàn)在的網(wǎng)站設(shè)計(jì)中非常流行，因?yàn)榛パa(bǔ)色適合于制作活潑時(shí)

9、尚的效果，讓你的網(wǎng)站魅力四射。 來(lái)看一個(gè)使用互補(bǔ)色的實(shí)例?；パa(bǔ)色配方案實(shí)例：這個(gè)網(wǎng)站使用了藍(lán)色（導(dǎo)航欄）和橙黃色（內(nèi)容背景）這樣一對(duì)互補(bǔ)色作為配色方案。由于互補(bǔ)色所具有天生的動(dòng)感，因此定位在時(shí)尚、青春、活力、動(dòng)感、新科技、新見(jiàn)解或者類似主題的網(wǎng)站可以采用這種配色方案。 互補(bǔ)色配方案還有一個(gè)妙用。前面介紹單色方案時(shí)曾提到，單色方案比較適合比較嚴(yán)肅、莊重或者清新淡雅的網(wǎng)站。但是如果你覺(jué)得這樣的配色方案顯得“穩(wěn)重有余，活力不足”，那么你不妨在網(wǎng)頁(yè)的適當(dāng)?shù)胤剑ū热鐦?biāo)題欄、導(dǎo)航欄）中使用互補(bǔ)色，這樣可以在不破壞整體穩(wěn)重清新的效果的同時(shí)，為頁(yè)面添加幾分動(dòng)感。三色三色方案三色方案是指在色彩圓環(huán)中選擇一個(gè)等邊

10、三角形三個(gè)頂點(diǎn)上的顏色構(gòu)成的配色方案。在Photoshop中，要想構(gòu)造一個(gè)三色方案是非常容易。首先選中一種顏色，記下他的H（Hue）值，然后為這個(gè)值加120（記住，H的單位是“度”，也就是沿色彩圓環(huán)旋轉(zhuǎn)120度），以此類推得到第三種顏色，構(gòu)成一個(gè)三色方案。 來(lái)看三色方案的實(shí)例。三色方案實(shí)例：這個(gè)網(wǎng)站使用藍(lán)色為底色，黃色和紅色為前景色，紅黃藍(lán)恰恰就是三原色，因此這是一個(gè)非常典型的三色方案。三色方案中使用了三種彼此之間差別明顯的顏色，因此頁(yè)面顯得相當(dāng)不穩(wěn)定，是一種可以帶來(lái)比較另類的感覺(jué)的配色方案，如果你要設(shè)計(jì)的網(wǎng)站是這種類型的，不妨使用這種配色方案。方案選擇配色方案的選擇色彩方案在網(wǎng)站設(shè)計(jì)中必須慎

11、重選擇，尤其對(duì)于企業(yè)網(wǎng)站而言，絕大多數(shù)企業(yè)網(wǎng)站都會(huì)不斷改版，但是在改版的過(guò)程中，色彩方案通常會(huì)保持穩(wěn)定。典型的例子是IBM公司的網(wǎng)站，作為聲名遐邇的“藍(lán)色巨人”，用藍(lán)色作為配色方案的主色是理所當(dāng)然事情，多年保持不變，為了使頁(yè)面不過(guò)于呆板。頁(yè)面中還使用了少量的黃色（藍(lán)色的補(bǔ)色）合綠色，來(lái)增加頁(yè)面的活力，更加符合IBM業(yè)界巨頭的身份。事實(shí)上，以藍(lán)色為主色的網(wǎng)站可以使用上面介紹的四種配色方案中的任何一種，如下圖。顯然IBM使用了第三種，也就是互補(bǔ)色方案。如果你設(shè)計(jì)的網(wǎng)站也打算使用藍(lán)色作為主色，那么你可以根據(jù)網(wǎng)站的內(nèi)容和定位在這四種配色方案中進(jìn)行選擇。如果主色多于一種，構(gòu)造配色方案時(shí)也很容易。假設(shè)有兩種主色，并且這兩種顏色在色彩圓環(huán)上是