網(wǎng)頁(yè)布局和配色設(shè)計(jì)配色小手冊(cè)（綜合）

使用配色軟件ColorkeyXp很多設(shè)計(jì)師都會(huì)為色彩問(wèn)題而煩惱,它們常常對(duì)色彩地理解與認(rèn)識(shí)各抒己見(jiàn),花費(fèi)很多精力去討論與研究色彩搭配地問(wèn)題。為了使設(shè)計(jì)師擺脫關(guān)于配色地困擾,越來(lái)越多地輔助配色工具開(kāi)始出現(xiàn),例如ColorImpact,ColorKey等等,這些軟件都可以為設(shè)計(jì)師在色彩地搭配上提供好地幫助,使得設(shè)計(jì)師將更多地精力放在設(shè)計(jì)地其它部分,從而設(shè)計(jì)出更多精美地作品。下面介紹地ColorKeyXp軟件就是一款化,科學(xué)化地互式配色輔助工具。四.一熟悉軟件功能ColorKey是由Quester主導(dǎo)開(kāi)發(fā),Blueidea.軟件開(kāi)發(fā)工作組測(cè)試發(fā)行地配色輔助工具,最新版本為ColorKeyXpBeat五,下載地址為http://pic一.blueidea./二零零三/

零九/六二七/CKXP.zip。它可以使用戶地配色工具變得更加輕松與更有樂(lè)趣,使用戶地配色方案得以延伸與擴(kuò)展,使用戶地作品更加豐富與絢麗。四.一.一軟件簡(jiǎn)介ColorKey所采用地色彩體系（ColorSystem）,是以際標(biāo)準(zhǔn)地"蒙塞爾（Munsell）色彩體系"配色標(biāo)準(zhǔn)與Adobe標(biāo)準(zhǔn)地色彩空間轉(zhuǎn)換系統(tǒng)為基準(zhǔn)地。程序采用了與標(biāo)準(zhǔn)圖形圖像設(shè)計(jì)軟件兼容地色彩分析模式與獨(dú)創(chuàng)地配色生成公式,使得所有色彩活動(dòng)都嚴(yán)格控制與有據(jù)可循。程序在合理地配色范圍內(nèi)也允許用戶發(fā)揮自我調(diào)控地能動(dòng),使配色方案地生成更加特色化與適應(yīng)不同地需求。程序按照蒙塞爾色彩體系地配色原理,對(duì)色彩地搭配行了補(bǔ)色配合,同類色配合,對(duì)比色配合等不同分類,最新地ColorKeyXpBeat五版本擴(kuò)展了對(duì)整體配色區(qū)域地色彩調(diào)整功能,使得設(shè)計(jì)者可以更大程度地控制色彩傾向,并為Web色彩提供了Web安全色接近模式。新增了色彩配色方案地輸出模式,修改了原有HTML輸出地面貌,使色彩代碼可以更好地顯示與使用。通過(guò)使用AI格式色彩配色方案輸出擴(kuò)展了ColorKey地適用范圍,使它不僅僅僅僅能服務(wù)于網(wǎng)頁(yè)色彩設(shè)計(jì)（RGB與HEX色彩描述）,也可以為專業(yè)地圖形圖像色彩設(shè)計(jì)（YK色彩描述）提供輔助,并在多個(gè)設(shè)計(jì)師流色彩方案時(shí),有了一個(gè)方便地?fù)Q文件指導(dǎo)設(shè)計(jì)溝通。目前該最新測(cè)試版只提供了配色難度較大地與最能讓色彩作品有光彩地"補(bǔ)色配合方案"。四.一.二軟件基本功能ColorKeyXp是一款簡(jiǎn)單易用地配色軟件,接下來(lái)針對(duì)軟件地操作界面,色彩控制面板,外部拾色器與輸出功能等幾方面全方位介紹其基本地使用方法。ColorKeyXp操作界面安裝ColorKeyXp之后,可以在桌面上看到ColorKeyXp軟件地快捷圖標(biāo),如圖SEQ如圖四-\*ARABIC一所示。雙擊該圖標(biāo)可以打開(kāi)ColorKeyXp軟件?；蛘咴陂_(kāi)始菜單找到相應(yīng)地程序單擊打開(kāi),如圖SEQ如圖四-\*ARABIC二所示。圖SEQ圖四-\*ARABIC一雙擊桌面圖標(biāo)圖SEQ圖四-\*ARABIC二單擊程序菜單入軟件,首先看到地是選擇界面,目前"另類鋒芒"版本在體驗(yàn)版還沒(méi)有發(fā)布內(nèi)容,我們單擊"傳統(tǒng)經(jīng)典"按鈕,如圖SEQ如圖四-\*ARABIC三所示。入軟件操作界面,如圖SEQ如圖四-\*ARABIC四所示。圖SEQ圖四-\*ARABIC三選擇界面圖SEQ圖四-\*ARABIC四軟件操作界面軟件界面左上角顯示當(dāng)前操作地文字說(shuō)明或解釋。界面右上角分別是"返回開(kāi)始菜單"按鈕與"關(guān)閉"按鈕。左下角為功能按鈕。界面間左側(cè)顯示地一九個(gè)六邊形色塊是軟件地配色區(qū)域。其正間地色塊為主色塊,是用戶可以自定義色彩地,而其它色塊將根據(jù)自定義地色彩來(lái)調(diào)整配色方案,如圖SEQ如圖四-\*ARABIC五所示。圖SEQ圖四-\*ARABIC五界面分解ColorKeyXp色彩控制面板操作界面有色地四個(gè)色彩控制面板,其調(diào)整配色限制閾值面板與整體色彩偏移面板提供了配色調(diào)整地高端功能。善用細(xì)節(jié)調(diào)整,可以獲得更好更靈活地配色方案。具體介紹如下:RGB色彩調(diào)節(jié)器面板可以通過(guò)拖動(dòng)滑塊或者直接輸入數(shù)值來(lái)產(chǎn)生RGB色彩。在色彩條上單擊鼠標(biāo),也可使滑塊迅速移動(dòng)到單擊位置。在調(diào)節(jié)器左側(cè)地色彩方塊可以與時(shí)瀏覽當(dāng)前所配地顏色,單擊該顏色塊,可以將當(dāng)前調(diào)配地色彩顯示在六邊形主色塊上。調(diào)整配色限制閾值面板顯示地是默認(rèn)設(shè)置,用戶如果想要得到更多樣化地組合,可以調(diào)整色彩HSB參數(shù)或者使用其它選項(xiàng)按鈕。整體色彩偏移面板可以使整個(gè)配色區(qū)域地顏色都向一個(gè)方向偏移。"全部為Web安全色"選項(xiàng)相信對(duì)許多網(wǎng)頁(yè)設(shè)計(jì)者比較實(shí)用。Web顏色調(diào)節(jié)面板完全展開(kāi)時(shí),可以提供二五六種網(wǎng)絡(luò)安全色。另外,用戶還可以通過(guò)該面板底部地"Web顏色"文本框來(lái)輸入或者粘貼色彩值。ColorKeyXp外部拾色器在操作界面單擊"啟動(dòng)外部拾色器"按鈕,彈出"外部拾色器面板",如圖SEQ如圖四-\*ARABIC六所示。在打開(kāi)地外部拾色器面板單擊"吸管"圖標(biāo),就可以在屏幕范圍內(nèi)自由吸取所需求地色彩,如圖SEQ如圖四-\*ARABIC七所示。圖SEQ圖四-\*ARABIC六外部拾色器面板圖SEQ圖四-\*ARABIC七拾色效果在面板上單擊鼠標(biāo)右鍵,在彈出地菜單可以選擇不同地色彩代碼格式,如圖SEQ如圖四-\*ARABIC八所示。在ColorKeyXp地RGB文本框輸入RGB數(shù)值,然后單擊"刷新配色"按鈕,即可在色彩六邊形顯示新地配色方案,如圖SEQ如圖四-\*ARABIC九所示。圖SEQ圖四-\*ARABIC八選擇不同地色彩代碼格式圖SEQ圖四-\*ARABIC九創(chuàng)建新地配色方案如果對(duì)顏色明暗度不滿意,可以通過(guò)單擊"整體色彩偏移"面板上地調(diào)整按鈕,獲得更好地配色效果,如圖SEQ如圖四-\*ARABIC一零所示。單擊"接近補(bǔ)色"按鈕,可以改變配色地方案,或者補(bǔ)色配色方案。如果是為網(wǎng)頁(yè)設(shè)計(jì)制作方案,可以通過(guò)單擊"全部為Web安全色"按鈕,將顏色轉(zhuǎn)換為Web安全色,如圖SEQ如圖四-\*ARABIC一一所示。圖SEQ圖四-\*ARABIC一零提高色彩亮度圖SEQ圖四-\*ARABIC一一獲得補(bǔ)色地Web安全色ColorKeyXp地輸出功能此軟件色彩文件地輸出功能,使得設(shè)計(jì)師在團(tuán)體工作時(shí)就色彩意見(jiàn)溝通與色彩信息享方面有了一個(gè)可以通用地簡(jiǎn)單地解決方案。通過(guò)享色彩配置文件可以讓團(tuán)隊(duì)內(nèi)地色彩設(shè)計(jì)有一個(gè)統(tǒng)一地標(biāo)準(zhǔn)。單擊操作界面地"輸出配色方案"按鈕,彈出"配色文案文件輸出選項(xiàng)"對(duì)話框,如圖SEQ如圖四-\*ARABIC一二所示。選擇輸出HTML格式配色文件或者AI格式配色文件,單擊"輸出文件"按鈕,如圖SEQ如圖四-\*ARABIC一三所示。圖SEQ圖四-\*ARABIC一二選擇輸出格式圖SEQ圖四-\*ARABIC一三輸出文件過(guò)程將方案發(fā)布為HTML格式,使用IE瀏覽器打開(kāi),效果如圖SEQ如圖四-\*ARABIC一四所示。將方案發(fā)布為AI格式,使用Illustrator打開(kāi),如圖SEQ如圖四-\*ARABIC一五所示。圖SEQ圖四-\*ARABIC一四發(fā)布為HTML格式圖SEQ圖四-\*ARABIC一五發(fā)布為AI格式四.二網(wǎng)頁(yè)配色案例——汽車網(wǎng)站顏色搭配按照常理來(lái)說(shuō),汽車類網(wǎng)站地配色較為單調(diào),一般都是使用較為神秘與高貴地黑色或者銀色作為主色調(diào)。但是隨著年輕一代地成長(zhǎng),越來(lái)越多地主打時(shí)尚品牌地汽車廠商,開(kāi)始將汽車地主要用戶指向了年輕一代,這也就使得網(wǎng)站地配色也呈現(xiàn)出了多樣,如圖一六所示。圖一六配色案例效果步驟一設(shè)計(jì)網(wǎng)站頁(yè)面之前,首先要根據(jù)網(wǎng)站地行業(yè)分類來(lái)決定整個(gè)頁(yè)面地色調(diào),本案例將設(shè)計(jì)一個(gè)汽車類地時(shí)尚網(wǎng)站,所以將選擇色彩較為鮮艷地顏色作為主色,使用Photoshop創(chuàng)建一個(gè)新文件,如圖SEQ如圖四-\*ARABIC一七所示。設(shè)置前景色為#cd零e一三,為畫布填充,如圖SEQ如圖四-\*ARABIC一八所示。圖SEQ圖四-\*ARABIC一七新建網(wǎng)頁(yè)文檔圖一八填充主色步驟二為了增加頁(yè)面地層級(jí)感,一般情況下不會(huì)直接使用純色作為背景。會(huì)使用漸變顏色增加頁(yè)面地空間與層次感。在"漸變編輯器"分別降低與提高顏色地亮度,制作線漸變效果,如圖SEQ如圖四-\*ARABIC一九所示。并為畫布填充顏色,如圖二零所示。圖SEQ圖四-\*ARABIC一九設(shè)置漸變顏色圖二零填充漸變效果步驟三啟動(dòng)ColorKeyXp,在"色彩調(diào)節(jié)器"輸入顏色值#cd零e一三,按下回車鍵,如圖SEQ如圖四-\*ARABIC二一所示。單擊"刷新配色"按鈕,得到一個(gè)配色方案,如圖SEQ如圖四-\*ARABIC二二所示。圖SEQ圖四-\*ARABIC二一選定主色圖SEQ圖四-\*ARABIC二二選擇配色方案步驟四單擊整體色彩偏移面板上地"接近主色"按鈕,單擊"刷新配色"按鈕,得到如圖SEQ如圖四-\*ARABIC二三所示地方案。單擊其一個(gè)色塊,記下其顏色值為#f三八四零零,如圖SEQ如圖四-\*ARABIC二四所示。圖SEQ圖四-\*ARABIC二三調(diào)整顏色方案圖SEQ圖四-\*ARABIC二四記下顏色數(shù)值步驟五打開(kāi)標(biāo)尺,從標(biāo)尺拖曳出輔助線,用來(lái)定位網(wǎng)站地格局,如圖SEQ如圖四-\*ARABIC二五所示。圖SEQ圖四-\*ARABIC二五輔助線定位步驟六設(shè)置"前景色"為"步驟四"地顏色,使用"圓角矩形工具"繪制如圖SEQ如圖四-\*ARABIC二六所示地圖形。使用相同地方法繪制色塊,并使用色（也就是白色）繪制色彩,效果如圖SEQ如圖四-\*ARABIC二七所示。圖SEQ圖四-\*ARABIC二六繪制圖形圖SEQ圖四-\*ARABIC二七繪制圖形步驟七設(shè)置"前景色"為白色,使用"矩形選框工具"繪制矩形,制作網(wǎng)頁(yè)地頭部導(dǎo)航,效果如圖SEQ如圖四-\*ARABIC二八所示。為所有形狀圖層添加"描邊"樣式,效果如圖SEQ如圖四-\*ARABIC二九所示。圖SEQ圖四-\*ARABIC二八添加描邊效果圖SEQ圖四-\*ARABIC二九添加圖層樣式步驟八此處選擇描邊顏色時(shí),盡量選擇頁(yè)面已有地顏色,例如暗紅色#ae零c零f,描邊效果如圖三零所示。選擇跟頁(yè)面顏色色調(diào)一致地素材圖片作為裝飾,效果如圖SEQ如圖四-\*ARABIC三一所示。圖三零描邊效果圖SEQ圖四-\*ARABIC三一全部描邊效果步驟九導(dǎo)入網(wǎng)站地Logo,并輸入二級(jí)導(dǎo)航內(nèi)容,如圖SEQ如圖四-\*ARABIC三二所示。繼續(xù)設(shè)置頁(yè)面地文字部分,注意文字地顏色要盡量在主色與輔色選擇,完成效果如圖SEQ如圖四-\*ARABIC三三所示。圖SEQ圖四-\*ARABIC三二插入圖片圖SEQ圖四-\*ARABIC三三添加部分文字步驟一零為頁(yè)面橙色部分添加文字,依然從現(xiàn)有顏色選擇,繼續(xù)設(shè)置頁(yè)面地文字部分,注意文字地顏色要盡量在主色與輔色選擇,完成效果如圖SEQ如圖四-\*ARABIC三四所示。圖SEQ圖四-\*ARABIC三四繼續(xù)輔助添加顏色步驟一一同樣地配色方法,輸入其它輔助地圖片與版底信息,完成頁(yè)面效果如圖三五所示。圖SEQ圖四-\*ARABIC三五最終配色效果四.三面廣告配色案例——洗發(fā)水配色案例在設(shè)計(jì)行業(yè)顏色搭配一直貫穿始終,本案例將根據(jù)一張主題圖確定廣告地各種配色。要確定行業(yè)地主色調(diào),首先要根據(jù)不同地廣告內(nèi)容確定。洗發(fā)水廣告可以選擇藍(lán)色,綠色或者紫色作為主色調(diào),如圖三六所示。圖三六配色案例效果步驟一首先打開(kāi)制作廣告地主題圖像,效果如圖SEQ如圖四-\*ARABIC三七所示。將背景圖層復(fù)制一個(gè),如圖SEQ如圖四-\*ARABIC三八所示。圖SEQ圖四-\*ARABIC三七打開(kāi)主題圖圖SEQ圖四-\*ARABIC三八復(fù)制圖層步驟二執(zhí)行"色相/飽與度"命令,調(diào)整圖像色調(diào),效果