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

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

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

前言:用LESS CSS框架進行編碼會簡化代碼結構,提高我們的工作效率,但是試驗后你會發(fā)現(xiàn),默認情況下,LESS在Firefox中能被正確編譯,實現(xiàn)效果,但IE和Chrome是無法解析LESS代碼的,必須對瀏覽器進行一些設置才行。如果希望對LESS有一個最基礎的了解,IBM 對LESS CSS框架的簡介會幫到你http://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/

 

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

 

LESS提供了一些函數(shù),使定義和操作顏色變得超級簡單。在本教程中,我們將使用其中的一些函數(shù)幫助你控制顏色,更好地配色并保持其組織性。

 

色輪

首先是spin()函數(shù),它可以讓我們在色輪上指定一種顏色。這個函數(shù)是非常有用的,比如說,在進行配色的時候。你可能已經看過一些常見的顏色結構,以一種和諧的方式進行組合,比如說互補色,三元色,混合色。使用一些工具,像Adobe Color CC(原名Kuler),你可以遵循這些結構快速的生成配色方案。但是如何使用LESS制定我們自己的配色方案呢?

 

互補色

我們將以生成最簡單地色彩結構——互補色開始。這種互補的顏色正好在色輪相反的位置。

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

 

首先,我們定義一種基準色,然后參照基準色定義第二種顏色。挑選一種你最喜歡的,或者是任意一種突然浮現(xiàn)在你腦海里的顏色。這里我們挑選了一種青藍色,#3bafdA,作為實例:

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

由于想要在色輪上得到基準色的補色,我們將度數(shù)值設為180。配色方案,使用LESS color函數(shù)創(chuàng)建配色方案

 

 

 

這讓我們得到兩個精確、可愛的顏色,它們是互補的。

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

以下是將這些顏色應用到網頁原型設計中的一個例子:

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

三元色

我們可以進一步探討顏色模型并且創(chuàng)建一個三元色結構。“三元”,顧名思義,是由三種顏色組成。因此,我們將色輪分成三部分,并且用函數(shù)spin()來設置旋轉的度數(shù):

學習 · 提示

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

關注大神微博加入>>

網友求助,請回答!