您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設(shè)計(jì)教程 >> 設(shè)計(jì)理論 >> 瀏覽設(shè)計(jì)教程

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

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

資訊|17085285173|387x566像素

資訊|17085311304|454x466像素

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

 從矢量格式圖片開始:

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

 有兩種圖片格式: 

資訊|17085346892|481x282像素

柵格格式:

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

 矢量格式:

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

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

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

資訊|17085426394|504x325像素

資訊|17085463234|384x363像素

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

資訊|17085478002|468x418像素

資訊|17085532598|500x414像素

資訊|17085671559|475x519像素

資訊|17085686821|257x247像素

放置并裁剪圖案:

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

資訊|17085767181|504x460像素資訊|17085728676|498x448像素

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

資訊|17085777173|476x352像素

資訊|17085729374|334x150像素

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

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

資訊|17085843527|510x205像素

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

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

 開始填色

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

第一種:

資訊|17085866063|510x297像素

 第二種:

資訊|17085885423|510x308像素

 第三種:

資訊|05344253247|510x311像素

 第四種:

資訊|05344297591|510x301像素

第五種:

資訊|05344313383|510x301像素

第六種:

資訊|05344330239|510x318像素

第七種:

資訊|05344343612|510x312像素

第八種:

資訊|05344431082|510x307像素

第九種: 

資訊|05344452552|510x316像素

第十種: 

資訊|05344465500|510x312像素

第十一種:

資訊|05344452552|510x316像素

第十二種:

資訊|05344465500|510x312像素

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

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

資訊|05344531027|498x455像素

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

資訊|05344529690|469x453像素

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

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

[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://irelandcustomcontracting.com/tutorial/di1590.html
從2012年看網(wǎng)站體驗(yàn)的五大趨勢
網(wǎng)頁設(shè)計(jì)不同元素與頁面轉(zhuǎn)換中的技巧
圖趣網(wǎng)微信
建議反饋
×