導(dǎo)讀漸變，是設(shè)計師最簡單的手法之一，也是移動端APP背景設(shè)計常用的設(shè)計技巧。所以今天我來教大家如何巧妙運用漸變，迅速提升界面的格調(diào)。我們都知道iOS7以后，界面....

漸變，是設(shè)計師最簡單的手法之一，也是移動端APP背景設(shè)計常用的設(shè)計技巧。所以今天我來教大家如何巧妙運用漸變，迅速提升界面的格調(diào)。

我們都知道iOS7以后，界面設(shè)計已經(jīng)趨于扁平化。實際界面設(shè)計中我們已經(jīng)很少繪制寫實圖標(biāo)。所以貌似現(xiàn)在的UI界面顯得千篇一律。比較有經(jīng)驗的設(shè)計師會熟練運用插畫設(shè)計還有動效設(shè)計，使自己的界面顯得與眾不同，然而這些技巧都是需要時間歷練，短時間并不容易掌握這些知識。

有沒有方法技巧簡單實用，迅速提升界面的格調(diào)了？

圖片來自于花瓣

不賣關(guān)子，給大家先上個圖，這是用下面的方法調(diào)出來的部分漸變色，毫無抵抗力啊，當(dāng)然還可以延展非常多。

打開Photoshop，拾色器默認情況都是下面這樣的，也都習(xí)慣的在這個模式下去選擇顏色，但今天會給大家介紹下其他模式的應(yīng)用。

先簡單介紹一下HSB,Lab,RGB,CMYK是什么功能，其實這是幾種不同的色彩模式。

- HSB模式中：H表示色相，S表示飽和度，B表示亮度。

- RGB模式中：是指的三原色，R紅色、G綠色、B藍色

- Lab模式中：L表示亮度，a表示從紅色至綠色范圍的顏色分量，b表示從黃色至藍色范圍的顏色分量。

- CMYK模式中：C青色、M洋紅（品紅）、Y黃色、K黑色

很多剛接觸Photoshop的這個軟件的同學(xué)，如果打開拾色器是下圖這樣，拾色器中間的豎條不是默認的多色情況，多數(shù)會以為軟件出問題了，然后搜索問題。

剛接觸PS的我也是如此，但前幾天的又一次鼠標(biāo)意外，發(fā)現(xiàn)拖動滑塊可以非常好的運用RGB模式去搭配顏色，尤其是臨近色和純色的的搭配（之前雖然知道類似的，但是這個能更直觀的看到）下面舉例紅綠藍顏色的搭配，當(dāng)然還可以延伸出更多的色彩搭配，更多可以打開ps實踐玩起來。

雖然得到了這些很棒的漸變色，可以幫助更好的進行選擇，但是在選擇的過程中依然要對飽和度、明度的細微調(diào)整才能使用。

除了用拾色器進行色彩的選擇，還有其他的很多方法可以進行顏色的搭配，下面在列舉一種純懶人方法，我們經(jīng)常會在電影中或者一些風(fēng)景中看到非常棒的顏色搭配，我頻繁使用的一個方法就是高斯模糊。

1、首先找到一張你滿意的圖片（網(wǎng)上搜的圖，沒有高清無碼的，老司機自行腦補細節(jié)）這個方法不要求圖片的大小，小圖一樣可以。

2、濾鏡-模糊-高斯模糊，半徑根據(jù)你選取的圖片去調(diào)整。

3、模糊之后還是會顯得畫面發(fā)灰，那這個時候就需要你用曲線和色彩飽和度配合去調(diào)整，通常情況下發(fā)灰都是對比度不夠，那就加對比，一個曲線解決不了，那就拉倆個。

4、最好一步，移動到合適的位置，也可以像我一樣截取某一塊進行拉伸，簡單幾步，你想要的顏色就出來了，初次用這個方法還可以用得到的圖片加上圖層混合模式去疊加在某張圖片上， 也會有意外效果，熟練幾次這個方法你一定會非常喜歡的，沒事多多舉一反三。

當(dāng)然網(wǎng)絡(luò)還有很多漸變色提取網(wǎng)站，也可以用用

快速提升設(shè)計格調(diào)幾個方法技巧

一、垂直線性漸變

拉漸變是Photoshop的基礎(chǔ)操作，那么如何運用的好看了？顏色選擇才是關(guān)鍵

我們把一個漸變顏色拆分成A B C三個顏色，每個顏色用HSB標(biāo)注顏色色值。

這是某App的一組引導(dǎo)畫面，運用了三組漸變顏色，分別標(biāo)注HSB的色值，通過這組色值的變化，分析如下。

A色 B值非常高，普遍50以上

從A色到B色，H值的變化范圍為正負30到70，S值減少10，說明B顏色略變淡。

從B色到C色，H值的變化范圍為正負30到40，S值增加15到50，說明C顏色開始變濃。

以上色值僅供參考，實際使用并非整數(shù)。根據(jù)以上規(guī)律去有規(guī)則的使用漸變色。

二、垂直線性漸變 球形漸變

Web界面面積比較大，在大面積使用漸變的時候。如果只是使用垂直的線性漸變是略顯單調(diào)的，這個時候我們需要加一個球形的漸變。

A B C色構(gòu)成一個漸變，這時候我們再補充一個D色的球形漸變并高斯模糊。D色的圓形矢量形狀要轉(zhuǎn)換為智能對象，這樣調(diào)節(jié)高斯模糊及大小的時候可以無損調(diào)整。如果界面上需要運用圖片，我們再補充一個80%透明度的E色，疊加在去色后的圖片上。這樣界面會層次會更加豐富。

三、多角度球形漸變

想讓界面更加絢麗，這時候我們可以考慮多組球形漸變搭配使用。例如最新改版的instagram就是一組線性漸變，加兩組球形漸變組成。球形漸變也是由多組顏色構(gòu)成。

四、色塊漸變

漸變的顏色不只可以運用在一個色塊上，還可以運用在一組色塊上。設(shè)計師運用一組近似性色彩，將每個菜單項清晰區(qū)分開，讓界面平衡在一個頻率上，這樣的畫面更有節(jié)奏感和舒適性。

如何選擇色塊的顏色了？一樣運用HSB，逐級加H色值，H色值越大，S相應(yīng)的色值也要逐漸變小。至于希望你的界面整體顏色跨度大還是小，取決你逐級H色值加的多少。

相信通過我的HSB調(diào)色分析，你可以熟練運用顏色創(chuàng)造各種高大上的漸變。

五：扁平化配色與漸變

漸變配色的回歸正巧是在扁平化大行其道的今天，所以它不可避免地同大量扁平化的元素搭配到了一起，而其中最值得考慮的因素，就是色彩。某些用色最大膽、跨度范圍最大的漸變色設(shè)計干脆直接就從扁平化配色中“借用”色彩。

六：雙色調(diào)的加入

雙色漸變是漸變設(shè)計中的很重要的組成部分。而雙色漸變同其他設(shè)計趨勢的結(jié)合效果拔群，這一點值得再三強調(diào)。

而雙色調(diào)漸變的唯一缺點，大概是……被用的太多了。如果你稍加注意就會發(fā)現(xiàn)，確確實實有一大堆網(wǎng)站采用了雙色漸變來作為背景或者主要視覺模塊，似乎沒有哪種雙色搭配沒人用過。藍綠和橙紅搭配是用的最多的。

謹慎使用這一趨勢，因為確實很容易與別的網(wǎng)站“撞衫”。

七：漸變背景圖

漸變的回歸，使得我們再次可以看到許多擁有景深或者縱深的背景圖。虛擬現(xiàn)實的流行讓越來越多的設(shè)計師嘗試更加現(xiàn)實、更加立體的網(wǎng)站設(shè)計，毫無疑問，你會在未來看到更多這樣的設(shè)計。

扁平化設(shè)計確實時尚而更易于接受，但是它缺少富有現(xiàn)實質(zhì)感的元素也是不爭的試試。試想一下自然中元素給人的感受和體驗。漸變色的使用很好地緩解了這個局面，畢竟自然界中很少有特別純粹特別單一的色彩。

不難想象，漸變色和陰影背后的概念和規(guī)則是相通的。它們?yōu)樵O(shè)計創(chuàng)造了深度和層次。

八：圖片上的漸變色疊加

作為一種設(shè)計趨勢，在圖片上疊加色彩已經(jīng)流行了相當(dāng)長的一段時間。而從圖片上的單色色彩疊加，到漸變色的疊加，是一個相當(dāng)自然的“推導(dǎo)”過程。

在頁面的背景、頭圖中加入漸變的色彩疊加，可以讓它們的整體感更強，從而讓用戶注意到其他的更加重要、關(guān)鍵的元素，強化頁面的可讀性。這種設(shè)計對于大圖的作用尤其明顯。

在圖片上疊加漸變色的技巧在于平衡色彩和圖片之間的關(guān)系。色調(diào)是否要同圖片的含義相匹配？疊加后能否看清圖片中的細節(jié)？不同的色彩搭配方式帶來的結(jié)果可能是截然相反的。

九、微妙的漸變與UI元素

和漸變色的流行做法不同，有些設(shè)計師選擇在UI元素中使用微妙的漸變色。在較小的UI元素中，色彩變化幅度更加微妙，并且通常使用的都是單色調(diào)。

欣賞案例

最后給大家看一下相關(guān)精彩案例，可臨摹學(xué)習(xí)。

～此文轉(zhuǎn)載，如有侵權(quán)，請聯(lián)系刪除