網頁配色簡略適用方式
網頁配色簡略適用方式
網頁配色的在網絡上良多,甚至有些泛濫,略微關注過的同窗應當都曉得 色輪、 色卡等幫助性配色工具,但那更多都是從印刷介質上的色彩體系延伸出來的,不完整適用于網頁,甚至造成很大的局限,比如你會較真的通過色輪來選用網頁色彩嗎再比如通過下面供給的配色組合,你能自由的應答一個又一個的類型相若的網頁設計需求嗎
因為cmyk與rgb色彩模式不同,網頁的色彩浮現數目要宏大的多,選用也應當更自由,但在配色上卻常遇到設計作品偏臟、發灰、花哨等大問題,這事兒得解決。
網頁案例分析
網頁配色不宜超過三種。
真諦,這沒錯,但更多是從色相(赤橙黃綠青藍紫等不同顏色)上來說的。
色相差別顯著,重要色彩的選取就比擬好辦,常見的有對照色、鄰近色、冷暖色調互補等方法,可以簡略設定,或直接從勝利作品中鑒戒主輔色配比都可以,比方常見的朱紅裝點深藍、明黃裝點深綠等。
但通常,咱們須要面對的設計需要在色彩調配上會有更多的問題呈現:
(因為自己從事游戲網頁視覺設計工作,故案例均以游戲網頁做示意闡明,其余網頁類型可以做延長思考或僅作參閱)
如上所示,依據網頁信息的多寡,會有更多顏色區域的層級劃分和文字信息層級辨別需要,那么在守住 網頁色彩(相)不超過三種的準則下,只能尋找更多同色系的顏色來完美設計,也就是在 飽跟度和 明度上做。
這也就是本文為解決這一問題所要分享的 自然配色技能:疊柔配色法。
疊柔配色技巧分享(這里才是注釋,上面都是空話)
這個方法十分簡略,無需曉得三角函數、四則運算,無需懂得色彩指數和直方圖,甚至不必色階曲線和亮度強弱.甚至,你可以對色彩毫無知覺。
★只要要清楚三個癥結詞:疊加、柔光和透明度(填充)。
假如連這三個要害詞都不甚明了,那就記住他們所在的地位(下圖):
留神:透明度與填充略有不同,填充不會影響到 混合選項的效果,而透明度則是作用于全部圖層。
順便,花多少分鐘時光懂得一下這個配色技巧的原理:
即:用純白色(#ffffff)和純玄色(#000000)通過 疊加和 柔光的混雜模式(效果相似調整飽和度和明度),在任意一個色彩上得到最匹配的色彩(而后通過調整透明度選取最合適的輔色)。
(上圖示例中,調劑疊/柔模式的黑白色塊的不同透明度(取10%到100%整數值為例)就可以得到差別較顯明的40種配色,通過這種技能,實踐上每一種色彩都能夠容易取得無限盡的 自然配色;并且是 0失誤)
★ 因為疊加和柔光模式對圖像內的最高亮局部和最陰影部門無調整,因而該配色方式對純玄色和純白色不起作用。
設計實戰演示:
要不要像上面圖示看起來的那樣龐雜
不必,只須要懂得了上面的方式,就能夠忘卻圖示,在你的設計工作中自在施展
簡單三步:
1 一個黑或白色,或黑白漸變(可。網頁設計根據企業希望向瀏覽者傳遞的信息,進行網站功能策劃,然后進行的頁面設計美化工作。以是點、線、面.甚至字體)
2 混合模式取舍疊加或柔光
3 調劑透明度(1%-100%隨便,費心的做法是直接鍵入一個整數值,好比:輕質感類頁面可以抉擇20%-40%,重質感感類可以鍵入60%或以上)
如下圖:
(無論你采取何種主色,用黑白色彩疊加或柔光,你都可以輕松自若的失掉完善匹配的整套色系,附件有psd源文件)
這并不僅僅實用于色域劃分或提取多少個輔色,如下圖:字體顏色、細節線條、按鈕漸變、邊角高光、描邊暗影.都可以用黑白色肆意揮灑
辦法。傳單設計從事設計制作,彩色印刷,包裝,后道加工一條龍服務。延長(細節篇)
如果將該應用到一個按鈕上.
通過混雜選項中的 陰影、外發光、描邊(不實用疊柔法)、內暗影、內發光可以自在的描繪5層像素級細節(當然,通常在實際的應用中描繪1到3層即可)。
且無論外形、色彩如何變更,這些細節都如影隨形、色彩都隨變而變~可節儉大批重調細節或盲目選取配色的時光
細節、品德跟效力,一石三鳥,兼而得之
(近期看到設計圈有探討 網頁雕花不可取的課題,如果讓細節成為習慣,讓美感成為直覺,雕花也便只是一般設計行動罷了。)
案例歷練:
后記:
疊柔配色法:無招勝有招~把抓不住的感到交給精細的盤算機,迷信化進行你的設計。
掃一掃在手機打開當前頁
微信公眾號
上一篇:老網站怎么做seo優化
下一篇:紅松流脂潰瘍病如何防治
相關文章