使您的網(wǎng)站設(shè)計(jì)和配色更加自由. 另：死活的方法有色階、曲線、色彩平衡等。

網(wǎng)頁的視覺方面主要由形式（或布局）、顏色、圖片和文字信息組成，形式需要思考和發(fā)明。設(shè)計(jì)師通常更注重形式感，因?yàn)橐曈X沖擊、設(shè)計(jì)差異或創(chuàng)新大多依賴于形式，而色彩主要影響整體觀感、設(shè)計(jì)質(zhì)量和受眾情感。很多時(shí)候我設(shè)計(jì)了一個(gè)很好的表格，但是沒能做出這份稿件應(yīng)有的質(zhì)量，豈不是很可惜？

圖片素材需要學(xué)習(xí)加工，文字需要整理，但網(wǎng)頁的色彩是否一定要有自然的色感、豐富的理論和多年的經(jīng)驗(yàn)，才能運(yùn)用自如？

當(dāng)然不是！

關(guān)于網(wǎng)頁配色

甚至有些泛濫成災(zāi)，網(wǎng)上有很多網(wǎng)頁配色的文章。稍有注意的同學(xué)應(yīng)該知道“色輪”、“色卡”等輔助配色工具。比如，你真的會(huì)通過色輪來選擇網(wǎng)頁顏色嗎？例如，通過下面提供的顏色組合，你是否可以自如地應(yīng)對(duì)一個(gè)又一個(gè)類似類型的網(wǎng)頁設(shè)計(jì)需求？

網(wǎng)頁上顯示的顏色數(shù)量要多得多，因?yàn)镃MYK 和RGB 顏色模式不同。在選擇上也應(yīng)該有更多的自由度，但是在配色上，我們經(jīng)常會(huì)遇到設(shè)計(jì)作品臟、灰、花哨等重大問題，需要解決。

網(wǎng)頁案例分析

網(wǎng)頁的配色方案不應(yīng)超過三種。

沒錯(cuò)，真相。但多從色相上看（紅橙黃綠藍(lán)藍(lán)紫等不同顏色）

更容易選擇主色，色相差異明顯。稀有的有對(duì)比色、相鄰色、冷暖色互補(bǔ)等，可以簡(jiǎn)單設(shè)置，也可以直接借鑒勝利作品中的主輔色比例，如稀有的朱紅點(diǎn)綴深藍(lán)，亮黃點(diǎn)綴深綠色等

需要面對(duì)的設(shè)計(jì)要求在顏色分布上會(huì)有更多的問題：但通常。

由于本人從事游戲網(wǎng)頁視覺設(shè)計(jì)，所有案例均以游戲網(wǎng)頁為例。其他網(wǎng)頁類型可擴(kuò)展思考或僅供參考）

根據(jù)網(wǎng)頁的信息量，如上圖。對(duì)顏色區(qū)域和文字信息的層次劃分會(huì)有更多的要求，所以在“不超過三種網(wǎng)頁顏色（階段）”的原則下，我們只能找到更多相同顏色的顏色來改進(jìn)設(shè)計(jì)，即，飽和度”和“亮度”做文章。

這就是本文要分享的解決這個(gè)問題的“自然”配色技巧：重疊軟配色。

以上全是廢話）軟配色技巧分享（這里是正文。

不用懂三角函數(shù)，四個(gè)算術(shù)運(yùn)算，這個(gè)方法很簡(jiǎn)單。你不需要了解顏色指數(shù)和直方圖，甚至不需要了解色階曲線和亮度等級(jí)……甚至，你可以對(duì)顏色一無所知。

你只需要了解三個(gè)關(guān)鍵詞：疊加、柔光和透明度（填充）

如果連這三個(gè)關(guān)鍵詞都不懂，記住他的位置

填充不影響“混合選項(xiàng)”效果。注意：透明度與填充略有不同。透明度應(yīng)用于整個(gè)圖層。

花幾分鐘時(shí)間來理解這個(gè)配色技巧是如何工作的：順便說一下。

即：使用純白（#ffffff和純黑（#000000）通過“疊加”和“柔光”混合模式（效果類似于調(diào)整飽和度和亮度）在任何顏色上得到最佳匹配顏色（然后通過調(diào)整透明度選擇最佳顏色合適的二次色）

通過調(diào)整overlay/soft模式下黑白塊的不同透明度（以10%100%的整數(shù)值為例），可以得到40種具有明顯差異的配色方案，如上例所示。有了這種技術(shù)，理論上每種顏色都可以輕松“零失誤”地獲得無窮無盡的自然色組合！

所以這種配色方法對(duì)于純黑和純白是行不通的。由于疊加和柔光模式，圖像的最亮和最暗部分沒有調(diào)整。

設(shè)計(jì)實(shí)戰(zhàn)演示：

是不是像上圖這么復(fù)雜？

你只需要了解上面的方法，沒必要。可以忘掉插畫，在設(shè)計(jì)作品中盡情發(fā)揮吧！

三個(gè)簡(jiǎn)單的步驟：

或黑白漸變（可以是點(diǎn)、線、面……甚至字體）黑色或白色。

混合模式選擇疊加或柔光

省心的方法是直接輸入一個(gè)整數(shù)值，調(diào)整透明度（1%-100%隨意。比如：質(zhì)地輕的頁面可以選擇20%-40%，質(zhì)地重的頁面可以輸入60%以上）

無論您的主要顏色是什么，黑白疊加或柔光。您可以輕松獲得一整套完美搭配的顏色）

如下圖所示：字體顏色、細(xì)節(jié)線條、按鈕漸變、邊角高光、描邊陰影……都可以在黑白中自由揮灑。這不僅適用于色域劃分或幾種輔助色的提取。

方法擴(kuò)展（細(xì)節(jié)）

如果將此方法應(yīng)用于按鈕.

通常實(shí)際使用時(shí)可以描述13層）通過混合選項(xiàng)中的shadow、outer glow、stroke（不適用于soft layer方法）、inner shadow、inner glow rdq

這些細(xì)節(jié)都如影隨形、色彩都隨變而變~可節(jié)省大量重調(diào)細(xì)節(jié)或盲目選取配色的時(shí)間且無論形狀、色彩如何變化。!

一石三鳥，細(xì)節(jié)、品質(zhì)和效率。兼而得之!

假如讓細(xì)節(jié)成為習(xí)慣，近期看到設(shè)計(jì)圈有討論“網(wǎng)頁雕花不可取”課題。讓美感成為直覺，雕花也便只是普通設(shè)計(jì)行為而已。

案例歷練：

后記：

科學(xué)化進(jìn)行你設(shè)計(jì)。疊柔配色法：無招勝有招~把抓不住的感覺交給精密的計(jì)算機(jī)。

更高的品質(zhì)，更短的時(shí)間。值得擁有~......
本文發(fā)布于北京網(wǎng)站制作公司推來客http://www.tlkjt.com/

我們專注高端建站，小程序開發(fā)、軟件系統(tǒng)定制開發(fā)、BUG修復(fù)、物聯(lián)網(wǎng)開發(fā)、各類API接口對(duì)接開發(fā)等。十余年開發(fā)經(jīng)驗(yàn)，每一個(gè)項(xiàng)目承諾做到滿意為止，多一次對(duì)比，一定讓您多一份收獲！