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

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

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