很多設(shè)計(jì)師小伙伴都喜歡用漸變色來(lái)進(jìn)行設(shè)計(jì)，但是漸變色可以說(shuō)是用起來(lái)比較有難度的一種配色方式。用不好會(huì)直接翻車(chē)。期間存在的最大問(wèn)題就是色彩臟，老舊。而好的漸變色則給人更有設(shè)計(jì)感的印象。今天咱們來(lái)看看這篇文章，看看如何能更好的設(shè)計(jì)出漂亮的漸變色。

漸變無(wú)處不在。這不再是90年代的一種趨勢(shì)，設(shè)計(jì)師們傾向于在現(xiàn)代簡(jiǎn)約的UI中使用漸變。背景、按鈕、開(kāi)關(guān)、卡片、甚至是陰影，你所有能夠想到的地方都有漸變的存在。漸變已經(jīng)橫掃了數(shù)碼產(chǎn)品和Dribbble/Behance這樣的設(shè)計(jì)平臺(tái)。

什么是漸變呢？

漸變是從一種顏色過(guò)渡到另一種顏色，是由很多種顏色組成的混合（一個(gè)漸變可以有無(wú)限多的陰影）。

我們可以在很多方面使用漸變。例如在背景和前景的漸變?cè)?，可以做出微妙或者是極端大膽的顏色組合。

因?yàn)闈u變是通用的，我們可以用他們來(lái)傳達(dá)獨(dú)特的設(shè)計(jì)或者品牌理念。

在這篇文章中，我想要分享一些實(shí)用的技巧，讓你的漸變?cè)O(shè)計(jì)脫穎而出。

找到正確的靈感

首先，我們需要找到源頭。

漸變最好的靈感來(lái)源就是大自然。因此，最開(kāi)始的設(shè)計(jì)過(guò)程就是花時(shí)間去觀察現(xiàn)實(shí)世界。尋找風(fēng)景、環(huán)境或者植物的照片作為你的顏色來(lái)源，并且和你的項(xiàng)目建立起聯(lián)系。

創(chuàng)造自己的調(diào)色板

使用“顏色選擇器”找到合適的部分。從一張照片/圖片中選擇2-3種醒目的原色來(lái)構(gòu)建你的調(diào)色板。

建議一開(kāi)始只選擇少量的幾種顏色。因?yàn)镽NG顏色模型只有三個(gè)變量，這意味著你可以混合紅（R）、綠（G）、藍(lán)（B）來(lái)構(gòu)建出任何的漸變。RGB的值通常是在0-255之間。

此外，為了使得構(gòu)建出來(lái)的漸變看起來(lái)比較柔和平滑，在構(gòu)建調(diào)色板的時(shí)候考慮值的變化在50-150之間。

混合調(diào)色板的顏色

在選好的調(diào)色板上創(chuàng)建一個(gè)新的圖層，并通過(guò)添加“背景模糊”的效果來(lái)實(shí)現(xiàn)平滑的過(guò)渡。

創(chuàng)建一個(gè)新的圖層，用獲得的模糊的路徑重新創(chuàng)建線性漸變。

在線性漸變中使用徑向漸變以增加深度

徑向漸變用于模擬光照，而光照并不總是線性的。你可以將徑向漸變應(yīng)用到預(yù)先設(shè)計(jì)好的線性漸變上，并配置光源的方向，使它看起來(lái)效果更好。

使用有意義的漸變方向

在有需要的地方使用漸變方向。例如，使用發(fā)射光源以突出特定的元素，通過(guò)將文本放置在彩色區(qū)域使其更具可讀性，或者通過(guò)具有平滑的漸變路徑的UI引導(dǎo)用戶。

增加顆粒噪點(diǎn)使其具有沖擊力

在Figma或Sketch中，可以在漸變上添加一層紋理，使其看起來(lái)有復(fù)古風(fēng)。在網(wǎng)頁(yè)端你可以通過(guò)在漸變上放置圖片來(lái)應(yīng)用顆粒噪點(diǎn)效果。

在這里你可以學(xué)到如何用CSS添加噪點(diǎn)。

注意：你通常只需要0.1%到0.5%的噪點(diǎn)圖像透明度。

將漸變和抽象形狀結(jié)合起來(lái)

為了使你的漸變效果更酷炫，甚至可以使用抽象的半透明形狀。使用“蒙版”工具在漸變層之外或之上嵌套斑點(diǎn)或波浪形狀。