怎樣使用色輪進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)配色

利用色輪，圖趣加一句，這里指一般用到的配色軟件ColorImpact，網(wǎng)上可以下載到，我們可以將一張度假酒店的宣傳卡片輕易變成一系列不同顏色搭配的設(shè)計(jì)。

你是否曾經(jīng)想過(guò)，要如何才能讓你付出越少，收獲更多？在本文中，我們將討論一個(gè)系列卡片的設(shè)計(jì)，每一張卡片色調(diào)完全不一樣，但卻讓人感覺是一個(gè)系列的設(shè)計(jì)，這種設(shè)計(jì)我們可以輕易完成，設(shè)計(jì)起來(lái)所花的時(shí)間和精力都不多。我們利用了一張矢量圖片來(lái)產(chǎn)生不同視覺效果的設(shè)計(jì)，看一下我們是如何實(shí)現(xiàn)的。

 從矢量格式圖片開始：

矢量圖片是利用繪制的程序產(chǎn)生而成，它與照片不一樣，矢量格式的線條及形狀是對(duì)象，而不是象素。

 有兩種圖片格式： 

柵格格式：

一般的照片是由柵格中的微小象素構(gòu)成，其優(yōu)點(diǎn)是它色澤豐富逼真，而且漸變豐富。而缺點(diǎn)則是圖片修改起來(lái)非常麻煩。Raster一詞來(lái)源于德語(yǔ)，意思就是柵格。

 矢量格式：

矢量格式是利用定位點(diǎn)將直線及曲線連接起來(lái)，象Adobe Illustrator軟件，就是處理矢量格式的軟件。矢量格式的優(yōu)點(diǎn)是對(duì)圖片的修整非常輕松，而且你可以任意放大縮小都不會(huì)降低圖片質(zhì)量，而且存儲(chǔ)的文件也非常小。“矢量”是一個(gè)數(shù)學(xué)術(shù)語(yǔ)，意思是空間中的一個(gè)點(diǎn)與其它對(duì)象的關(guān)系。

 矢量格式非常容易調(diào)整：

矢量格式的特點(diǎn)使它非常容易進(jìn)行移動(dòng)元素、改變形狀、填充顏色等操作。

仔細(xì)觀察：在你開始工作前，讓我們先花些時(shí)間來(lái)看一下我們所要面對(duì)的這個(gè)圖案的構(gòu)成及各個(gè)元素之間的關(guān)系。

放置并裁剪圖案：

在開始時(shí)我們要處理好構(gòu)圖，在這個(gè)設(shè)計(jì)中，為了傳達(dá)一種茂盛及花園氣息，我們的花朵圖案大概占了設(shè)計(jì)版面的60%，超出的部分，我們可以不要。

觀察顏色：為了使我們對(duì)這張卡片的上色能夠輕松達(dá)到漂亮的效果，我們不能隨隨便便地挑選一些顏色。我們需要明白顏色之間的關(guān)系，為此，我們需要利用到色輪，色輪是將無(wú)數(shù)種顏色簡(jiǎn)化為12種基本色相。

12種基本色相，再加上明色及暗色。中間的色環(huán)是12種基色，而上方：（1）黃紅藍(lán)，是三原色，只有這三種顏色不是由其它的顏色調(diào)合而成。（2）二次色是三原色中間的顏色，每一種二次色都是由相鄰的兩種原色等量調(diào)合而成的顏色。（3）剩余的顏色中，則是三次色。他們是由相鄰的原色及二次色調(diào)合而成。而內(nèi)環(huán)及外環(huán)則是明色及暗色，是通過(guò)增加白色及黑色調(diào)合而成。

選擇色域：真實(shí)世界中有無(wú)數(shù)中漂亮的顏色變化，但為了使設(shè)計(jì)變得簡(jiǎn)單，我們只選擇色輪中已有的顏色。我們將會(huì)用到類比色來(lái)達(dá)到和諧的效果，然后用補(bǔ)色來(lái)產(chǎn)生對(duì)比及差異。

相同/相反：上圖中，相鄰色（即類比色）搭配總是能夠產(chǎn)生和諧的視覺效果，因?yàn)樗麄兌己写罅肯嗤念伾?。在上面示意圖所示區(qū)域中，每一種顏色都是黃色作為主導(dǎo)。而與其相對(duì)的另一邊，則是補(bǔ)色，互為補(bǔ)色的兩種顏色意味著它們沒有共同的顏色，所以補(bǔ)色搭配能夠產(chǎn)生強(qiáng)烈的對(duì)比。

 明色及暗色：為了使我們?cè)谠O(shè)計(jì)中所選擇的色域范圍更廣，我們將整個(gè)色輪通過(guò)增加白色或黑色來(lái)變亮或變暗。這些就是不飽和顏色，不飽和顏色通常給人一種柔和、低調(diào)、朦朧及更意味深長(zhǎng)的感覺。有趣的是，雖然我們是從三個(gè)色輪中取色，但所選擇的顏色都可以互相交換，因?yàn)樗鼈兌季哂邢嗤幕?/p>

 開始填色

現(xiàn)在我們要做的是，利用色輪分成十二個(gè)步驟及明暗兩種色調(diào)來(lái)設(shè)計(jì)卡片。花紋圖案將會(huì)采用類比色搭配，而文字則采用與其相對(duì)的補(bǔ)色，看一下效果如何：

第一種：

 第二種：

 第三種：

 第四種：

第五種：

第六種：

第七種：

第八種：

第九種： 

第十種： 

第十一種：

第十二種：

內(nèi)頁(yè)設(shè)計(jì)：

一般來(lái)說(shuō)，內(nèi)頁(yè)的設(shè)計(jì)應(yīng)該比外頁(yè)更簡(jiǎn)潔，我們從原圖案中采用一至兩個(gè)元素，調(diào)整好大小，改變位置即可。

相同的背景及圖案：在上面這個(gè)內(nèi)頁(yè)設(shè)計(jì)中，我們從原圖案中采用其中兩個(gè)元素來(lái)設(shè)計(jì)，并且放大；其中一個(gè)元素將其鏡像翻轉(zhuǎn)并且旋轉(zhuǎn)。最簡(jiǎn)單的上色辦法就是直接采用外頁(yè)的顏色用在內(nèi)頁(yè)上，這使到內(nèi)外兩頁(yè)的顏色自然形成良好的搭配效果。

使用同一種字體：內(nèi)頁(yè)的正文與外頁(yè)的標(biāo)題內(nèi)容并不一樣，但我們還要是要遵從延續(xù)性的原則，內(nèi)頁(yè)的文字應(yīng)該要與外頁(yè)的文字形成和諧搭配。在這個(gè)例子中，下沉字母我們采用了外頁(yè)的大標(biāo)題字體（Didot HTF 24 Light Roman字體），而正文則采用了外頁(yè)“Siganus Island”所使用的字體（Mrs Eaves Italic字體）。

（本文轉(zhuǎn)自logosky）