<cite id="lf1nv"><span id="lf1nv"><var id="lf1nv"></var></span></cite>
<var id="lf1nv"><strike id="lf1nv"><listing id="lf1nv"></listing></strike></var><del id="lf1nv"><span id="lf1nv"></span></del>
<ins id="lf1nv"><span id="lf1nv"></span></ins>
<cite id="lf1nv"><video id="lf1nv"><menuitem id="lf1nv"></menuitem></video></cite><ins id="lf1nv"><span id="lf1nv"><menuitem id="lf1nv"></menuitem></span></ins><var id="lf1nv"></var><var id="lf1nv"></var>
<var id="lf1nv"></var>
<var id="lf1nv"></var>
<var id="lf1nv"><dl id="lf1nv"></dl></var><var id="lf1nv"><video id="lf1nv"></video></var>
<cite id="lf1nv"><span id="lf1nv"><menuitem id="lf1nv"></menuitem></span></cite><var id="lf1nv"></var>
<var id="lf1nv"></var>
<cite id="lf1nv"><span id="lf1nv"><menuitem id="lf1nv"></menuitem></span></cite>
<cite id="lf1nv"><strike id="lf1nv"></strike></cite><var id="lf1nv"></var>

配色的技巧流程及創意配色

來源:西瓜的設計    時間:2021-03-11    站內收藏

設計師的日常設計中,配色的調整也是關鍵的一部分,一個優質的配色對于用戶來說也有著不錯的用戶體驗,可能更加吸引用戶的眼光;本文作者分享了關于配色的技巧流程以及創意配色,我們一起來學習一下。


這是一篇關于如何配色的技巧流程,幫助大家更好的進行創意配色,并使用自己喜歡的色彩。

大家好,我是西瓜,這次和大家分享一個我之前多次使用的一種配色技巧,只要同學們跟著練習,并且多去嘗試與操練幾次,就會摸清這種技法的規律。

我在之前寫過一篇關于配色理論的文章《色彩設計的原理》,那篇文章里我主要講解的其實是關于色彩原理的東西,幾乎文章內容的90%都是在講最基礎的色彩知識,如果有同學沒看過的,我建議去瀏覽一遍;雖說不是什么實戰性的技法,但對于了解與理解色彩根本還是有根大用處的,那里面主要的色彩屬性定位就是HSL,也就是色相、純度、明度,這篇文章的技法也就是和HSL掛鉤的。

D012-教你一種我百試不厭的配色技法

我這簡單講之前HSL是什么,闡述一下,然后我們就開始實戰技巧。

  • H就是“色相”:所謂“色相”,指的就是像紅色或者藍色這些色調的稱呼,也就是它們的面相,在剛才我說的“曼塞爾色系”的理論(色輪)中,一共會有10種基礎色相;

  • S是“純度”:是指色彩鮮明的程度,比如:“鮮艷的顏色”、“暗沉的顏色”,這種表達方式就是純度的意思,按照邏輯那么就是越鮮艷的純度就越高,越暗沉的純度也就越低。色輪中,無論是哪種顏色,只要它純度越低,就一定越接近灰色;

  • L是“明度”:是指色彩的明亮程度,和純度一樣,也是以高和低表示。明度最高是白色,相反,最低是黑色;

好,知道了HSL是什么,我們就可以開始了。


01/

設置顏色的HSL


這里指的設置其實就是選定,我們接下來所有的軟件操作案例都使用Sketch為基礎,在你Sketch打開后,先畫一個圓形,然后打開你的圓形填充拾色器,你就看到當前圓形的基礎色了;然后你需要做的第一步就是修改拾色器下方的RGB改為HSL,修改完后,對應匹配的數值,就是當前圓形色彩的色相、純度、明度。

D012-教你一種我百試不厭的配色技法


02/

隨機選色,確定主色


接下來是隨機選色,這一步比較簡單,意思就是在拾色器里找一個你認為好看的顏色,就這樣;不過需要提點你的是,選定的顏色盡量不要是偏黑、偏灰的顏色,這是因為我們后期的色彩都是需要根據當前色彩去進行延伸的。

D012-教你一種我百試不厭的配色技法


03/

改變L數值,衍生橫向色值組合


當你選完基礎的顏色后,接下來,我們就要開始在L(色彩明度)身上做點文章了,你可以先將剛才畫好的圓復制10份,這樣我們就以一個一個的進行L(明度)修改了;這里需要開始注意了,我們10份圓形的顏色是不一樣的,在保持HS不變的基礎下,L是以正反“+”和“-”進行過度的。

舉例說明一下:當前色彩為藍色,L的明度為57,我們需要正反“+”、“-”各10下,“+”得出67、77、87、97,翻過來“-”得出47、37、27、17、7,這樣一來,我們就一共得到了10個色相和純度一樣,但明度不一樣的色卡了。

D012-教你一種我百試不厭的配色技法


04/

H值的延伸,尋找新的色相


接下來,我們開始改變H(色相)的值,我想到這里的同學應該有點感觸了是么,只要H(色相)這邊一修改,就會得到第二種新的色卡了;但是,隨意拖動H數值是錯誤的手法,正確做法是依然在色相數值的基礎上“+”“-”增加10或減少10下,也可累計,這里我+30,得出的色卡就是新的色彩基礎了。

D012-教你一種我百試不厭的配色技法


05/

提取色卡,主輔色定型


走到這一步,可以說是快要大功告成了,接下來我們要做的就是將剛才創建的兩個色彩卡組進行提取,第一次的色彩卡組提取兩個色彩卡片,第二次的色彩卡組也提取兩個色彩卡片。

這里需要注意一點的是,兩個卡組選取的色彩盡量相差較大一點,意思就是說,例如第一組選取的色彩明度較低,那就將第二組選擇的色卡選擇的明度高一些,這樣形成的反差,容易在界面中進行對比與強調。

D012-教你一種我百試不厭的配色技法


06/

創建文本色、背景色、強調色


接下來,我們在做最后一步,那就是選出最基礎的背景、文字、點綴色,三個基礎色卡,一般情況,文字色和背景色我多數采用黑和白的配比;當然,黑色也不是純粹的黑色,而是通過主色的加深得到的,當然你也可以在第一次的主色色組內最小數值的基礎上再加深一點點,得到新的文字色。

而點綴色,一般就是在非常小面積使用的色彩,一般別說一組文字內的一個關鍵詞使用了點綴色進行突出;總之,點綴色的面積是非常小的。

D012-教你一種我百試不厭的配色技法


07/

代入原型設計


最終,我們將以上七個色卡排成一列查看一下是否和諧,一般情況下嚴格按照上述計算得出的顏色是不會出現差錯的哈。

然后在設計界面時,代入這套顏色就可以了,當然,你也可以放入插畫使用,如果感覺當前色彩范圍有些狹窄,你還可以在第二步色彩延展的后面,繼續增加基礎色色相10位數,然后得出新的色卡,然后繼續“+”、“-”10就可以了。

D012-教你一種我百試不厭的配色技法


08/

最終呈現


最后,我拿上面熱乎乎的色彩組合代入界面并操作,給大家實際展現出來。

D012-教你一種我百試不厭的配色技法


09/

總結


這次的配色技巧就完成了,其實大家應該可以發現一個潛在的規律,不管在任何彩色范圍內,只要我們能把控好色彩的純度和明度,不管是任何色相,其實都是可以保正在一個區間內的;而往往大家沒有拿出好的配色,多數情況就是配有掌握好純度和明度的關系。

最后,希望大家都能學會這個方法并使用它,其實這套方法還可以延展出其他配色技法,帶我下次再給大家實際講解與操作。

 

作者:西瓜,公眾號:西瓜的設計

本文來源:西瓜的設計

關鍵詞: 配色 創意配色 
作者:西瓜
相關閱讀
    正在加載...
人妻好久没做被粗大迎合_我的冰山总裁老婆_孕妇怀孕高潮潮喷视频_校花自慰全过程冒白浆好爽_青青青青久久精品国产_午夜福利看片