當前位置:首頁>ps入門教程>ps基礎教程>設計知識>教程內容

配色方案,使用LESS color函數(shù)創(chuàng)建配色方案(3)

來源:站酷 作者:謝爾魚 學習:5795人次

飽和度

或者,我們可以調整顏色飽和度來代替明暗度。飽和度定義了一種顏色的深度。飽和度越大,顏色越亮麗,最低飽和度則會使顏色趨于灰色。

拿上面的例子來說,我們可以用saturate() 和 desaturate()函數(shù)來替換明暗度的函數(shù),此外,還可以定義未激活狀態(tài)的顏色。

配色方案,使用LESS color函數(shù)創(chuàng)建配色方案

進一步調整顏色的不飽和度,直到認為它在你的設計背景中合適為止。

 

現(xiàn)在當我們自定義按鈕樣式的時候,我們的變量色都是與基準色緊密聯(lián)系的;當基準色改變的時候,它們都會進行相應的變化。

配色方案,使用LESS color函數(shù)創(chuàng)建配色方案

智能色彩輸出

LESS讓我們的樣式變得更智能。舉例來說,我們能讓我們的樣式自己“思考”并決定什么顏色在什么條件下適用。假設我們正在創(chuàng)建一個網站模板,這是按鈕的基本樣式,你打算用不同的顏色和風格來擴展它。但是我們怎樣控制顏色的輸出呢?我們當然不希望深色的文字在深色的背景上,反之亦然。我們需要確保文本保留對比,以便于閱讀,這樣,contrast()函數(shù)就派上用場了。

配色方案,使用LESS color函數(shù)創(chuàng)建配色方案

在上面的例子中,我們通過contrast()函數(shù)來設置顏色。這樣確保文本顏色與背景顏色有足夠的反差。在這種情況下,由于背景顏色是#000,文本顏色應該返回#fff。如果你設置背景色為淺色,比如說白色,煙白,或者天藍色,文本顏色應該返回#000。

配色方案,使用LESS color函數(shù)創(chuàng)建配色方案

你也可以自定義顏色的明暗。在下面的例子中,顏色值將返回#999或#777,而不是#fff,或者#000。

配色方案,使用LESS color函數(shù)創(chuàng)建配色方案

通常情況下,如果顏色是透明的,尤其是背景顏色,我也不想輸出顏色聲明。對此,我們可以在LESS 混合閉包內封裝background聲明。

配色方案,使用LESS color函數(shù)創(chuàng)建配色方案

你也可以為border屬性和color屬性作同樣的聲明,并通過刪除不必要的規(guī)則在你的樣式表里只保留幾行代碼。你同樣可以在聲明border與color屬性時做同樣的事,并只保留一些必要的代碼。

 

結束語

我希望我介紹的某些函數(shù)能幫助你在設計中提升配色能力。你可以在LESS官網上上找到完整的函數(shù)清單,并試驗它。我非常同意Kezz Bracey的說法。配色的唯一方法就是反復的試驗。

 

“直到我通過反復試驗來開始創(chuàng)建可靠的配色方案,我所看過的所有色彩理論才開始變得有意義

 

學習 · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學就能學:ps_bbs,或掃右側二維碼!
  • 關注我們學更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
暫無評論,交個作業(yè)支持一下吧~

關注大神微博加入>>

網友求助,請回答!