漸變無(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è)兀梢宰龀鑫⒚罨蛘呤菢O端大膽的顏色組合。
因?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)用戶(hù)。
增加顆粒噪點(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)或波浪形狀。
感謝閱讀
原文：https://blog.prototypr.io/how-to-design-sexy-gradients-a897b42c245
翻譯：花火譯文小組
來(lái)源：靜Design（ID：JingDesign91）
01、以下幾種情況適合使用漸變色
? 想把背景當(dāng)作天空
如果你的背景有起到天空的作用，哪怕不是真實(shí)的天空，那么用漸變色都是比較合適的，通常是用單色漸變（色相一樣，只是明度和飽和度有變化，比如藍(lán)色到淺藍(lán)色）或類(lèi)比色漸變（比如藍(lán)色到青色）。并且，即使是類(lèi)比色漸變也是要有明度上的變化，因?yàn)檫@樣的漸變可以讓畫(huà)面更透氣、更有空間感。
▲漸變的方向通常是模擬真實(shí)天空的光感，即上暗下亮，或者中間亮四周暗。
? 想表現(xiàn)小清新的調(diào)性
小清新在平面設(shè)計(jì)中通常是指視覺(jué)感受是自然、淡雅、靜謐的畫(huà)面，這樣的畫(huà)面其色調(diào)應(yīng)該是柔和的，所以很適合使用漸變色，而且一般是使用明度比較高、飽和度比較低的單色漸變或類(lèi)比色漸變，在飲料、護(hù)膚品、家居等品牌的設(shè)計(jì)中比較常見(jiàn)。
? 想表現(xiàn)科技感
諸如3C產(chǎn)品，或與AI、互聯(lián)網(wǎng)相關(guān)的品牌、產(chǎn)品或者主題，其設(shè)計(jì)通常需要表現(xiàn)出科技感，而科技感是一種怎樣的視覺(jué)感受呢？這類(lèi)視覺(jué)有一個(gè)共同的特點(diǎn)就是光感很強(qiáng)，比如下面這些作品。
所以為了表現(xiàn)比較強(qiáng)的科技感，畫(huà)面中通常少不了使用漸變色，因?yàn)橹挥袧u變色才能呈現(xiàn)出鮮明的明暗對(duì)比、強(qiáng)烈的光感，而且這種漸變色的明暗跨度會(huì)比較大，色彩的飽和度會(huì)比較高。色相以冷色為主，比如藍(lán)色、青色、綠色、紫色。
? 想表現(xiàn)食欲
食品海報(bào)最基礎(chǔ)的要求就是要能表現(xiàn)出食物的食欲，讓人看了會(huì)有想吃、想喝的欲望。我們都知道，在色彩中，暖色是比較有食欲的，比如紅色、橙色、黃色、粉色等。另外，如果是夏季，藍(lán)色綠色會(huì)給人清爽的感覺(jué)，所以也能加強(qiáng)食欲（通常指飲料、雪糕類(lèi)產(chǎn)品）。
吃是人類(lèi)的生理需求，也是最基礎(chǔ)的需求，所以對(duì)于食欲的表現(xiàn)肯定要樸實(shí)有親和力，漸變色就具有這樣的特質(zhì)。而且食物的色彩通常也是漸變色，所以使用漸變色作為背景可以與實(shí)物圖片形成呼應(yīng)。
食欲強(qiáng)的漸變色具有以下特點(diǎn)：
a.明度不會(huì)太低；
b.飽和度不會(huì)太高；
c.明度對(duì)比不會(huì)太大；
d.以單色漸變和類(lèi)比色漸變?yōu)橹鳌?/p>
02、怎樣的漸變色更有高級(jí)感?
確實(shí)，很多視覺(jué)高大上的設(shè)計(jì)都喜歡用純色，但并不代表漸變色就表現(xiàn)不出高級(jí)感，蔥爺研究了大量奢侈品牌、中高端品牌的視覺(jué)設(shè)計(jì)，發(fā)現(xiàn)高端的漸變色通常具有以下幾個(gè)特點(diǎn)：
? 使用單色漸變
大家都知道高端的設(shè)計(jì)在色彩使用上是很克制的，即顏色的數(shù)量會(huì)比較少，而單色漸變相比多色漸變就要克制一些。
? 顏色明度較低
高端的設(shè)計(jì)喜歡用黑色作為背景，想必你也發(fā)現(xiàn)了，因?yàn)楹谏哂懈哔F、神秘、厚重的感覺(jué)，所以容易營(yíng)造出高端的氛圍，除了黑色，其他顏色的深色也具有這些特點(diǎn)，比如深藍(lán)、深紅、深綠等等。所以漸變色要想高端，整體的顏色也要偏暗，比如黑色到灰色漸變，深藍(lán)到藍(lán)色漸變等等。
? 顏色來(lái)源于畫(huà)面中的圖片
如果版面中是有圖片的，比如產(chǎn)品圖片或人物圖片，那么從圖片中吸取顏色用于填充背景，會(huì)使背景與圖片關(guān)聯(lián)性更強(qiáng)、更融合，畫(huà)面的效果會(huì)更和諧，否則容易出現(xiàn)生硬、拼湊的感覺(jué)。
03、時(shí)尚的漸變色有什么特點(diǎn)?
自從進(jìn)入數(shù)字營(yíng)銷(xiāo)時(shí)代，各個(gè)品類(lèi)的設(shè)計(jì)都在逐漸互聯(lián)網(wǎng)化，相比傳統(tǒng)營(yíng)銷(xiāo)，數(shù)字營(yíng)銷(xiāo)更講究年輕化和個(gè)性化，所以在視覺(jué)上通常也要求更潮、更時(shí)尚，特別是對(duì)于一些針對(duì)年輕人的品牌。時(shí)尚類(lèi)的視覺(jué)設(shè)計(jì)中也很喜歡用漸變色，其特點(diǎn)如下：
? 顏色的飽和度和亮度較高
注意，亮度不是明度，亮度高不代表明度高，但是明度肯定不會(huì)太低(在ps拾色器面板中觀看HSB模式中的B值)。飽和度和亮度較高的漸變色更鮮艷、更張揚(yáng)，更符合年輕人和互聯(lián)網(wǎng)的特性。
? 顏色對(duì)比較強(qiáng)
比如對(duì)比色和補(bǔ)色漸變是時(shí)尚類(lèi)設(shè)計(jì)很喜歡用的顏色，這樣的顏色反差比較大，視覺(jué)沖擊力也更強(qiáng)。
? 幾種效果比較時(shí)尚的漸變
a.炫彩漸變
b.鐳射漸變
c.彌散漸變
總結(jié)
最后，蔥爺有必要提醒一下，色彩只是影響設(shè)計(jì)調(diào)性的其中一個(gè)因素，調(diào)性不是一個(gè)漸變色就能左右的，想要表達(dá)出正確的調(diào)性，還需要有圖片素材、構(gòu)圖、字體、排版、設(shè)計(jì)風(fēng)格等多個(gè)因素的配合，否則你的色彩用得再好也起不了多大的作用。
感謝閱讀！
作者：蔥爺
來(lái)源：蔥爺（id:congyenanian）
]]>
前言：漸變是無(wú)處不的在。設(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è)兀梢宰龀鑫⒚罨蛘呤菢O端大膽的顏色組合。
因?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)用戶(hù)。
六、增加顆粒噪點(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)或波浪形狀。
感謝閱讀！
作者 | Buninux
翻譯 | 小阿田的設(shè)計(jì)筆記 （ID：tzwDesign）
原文 | https://blog.prototypr.io/how-to-design-sexy-gradients-a897b42c245
今天就和大家聊下漸變色風(fēng)格特點(diǎn)，以及如何在優(yōu)秀設(shè)計(jì)中學(xué)習(xí)漸變色的使用思路。
1.漸變色在設(shè)計(jì)中的價(jià)值
漸變色廣泛運(yùn)用在各行業(yè)設(shè)計(jì)中，它幫助很多產(chǎn)品有效的打造具有傳播性的品牌基因、增強(qiáng)品牌記憶、豐富設(shè)計(jì)細(xì)節(jié)。對(duì)設(shè)計(jì)師來(lái)說(shuō)，又多一種設(shè)計(jì)表達(dá)手法。
▲ spotify的漸變色更是讓人記憶尤新，通過(guò)漸變色打造獨(dú)有的產(chǎn)品調(diào)性。其封面設(shè)計(jì)最具記憶點(diǎn)。
▲ apple music因其獨(dú)特漸變色LOGO，吸引很多用戶(hù)和粉絲，其流動(dòng)的漸變色正好符合音樂(lè)律動(dòng)感，也最具記憶性。
2.漸變色直觀感受
當(dāng)我們說(shuō)起漸變色，我相信大家有不同的情感表達(dá)。最直觀的是強(qiáng)視覺(jué)感知、美觀性強(qiáng)、極具吸引力、記憶性等。
▲ 2016年5月知名產(chǎn)品instagram更換品牌后，其驚艷的漸變色吸引很多設(shè)計(jì)師和用戶(hù)的關(guān)注，有吐槽也有贊美的，其后近幾年諸多設(shè)計(jì)跟隨這樣的風(fēng)格。
▲ 融合幾何圖形的漸變色，帶來(lái)更加直觀的空間感和流動(dòng)感。
3.運(yùn)用場(chǎng)景
漸變色在設(shè)計(jì)中運(yùn)用范圍廣包括UI設(shè)計(jì)、Web、圖標(biāo)、LOGO、海報(bào)設(shè)計(jì)等下面來(lái)看看它運(yùn)用在這些設(shè)計(jì)中特征點(diǎn)。
▲ 在背景中可增加界面細(xì)膩度和品質(zhì)感，如果單純白色或者純色，畫(huà)面顯得蒼白無(wú)力，如果你想給用戶(hù)營(yíng)造活力的氛圍，那么還可以使用暖色調(diào)。
▲ 在卡片上配合幾何圖形可區(qū)分功能模塊。如果是金色漸變，可表達(dá)尊貴身份，一般會(huì)運(yùn)用到會(huì)員卡片設(shè)計(jì)。
▲ 在關(guān)鍵功能上應(yīng)用漸變色，能起到強(qiáng)調(diào)作用，同時(shí)增加該功能的趣味性。通過(guò)顏色漸變來(lái)表達(dá)當(dāng)前的功能狀態(tài)。
WEB中的運(yùn)用
▲ 一般運(yùn)用在頭圖背景色偏多，凸顯品牌的同時(shí)，可以讓畫(huà)面有更多細(xì)節(jié)。
▲ 配合幾何圖形運(yùn)用，可以增加空間感和神秘感。
LOGO中的運(yùn)用
▲ 在LOGO中雙色漸變或者多色漸變，可以讓logo更加立體與空間感，有助于形成口碑傳播與營(yíng)造吸引力，instagram和apple music 就是一個(gè)很好的例子。
海報(bào)中的運(yùn)用
▲ 海報(bào)中運(yùn)用漸變色，玩法可以有很多種類(lèi)型，視覺(jué)沖擊力強(qiáng)，吸引注意力，滿(mǎn)滿(mǎn)的時(shí)尚感。
圖標(biāo)中的運(yùn)用
▲ 在圖標(biāo)中運(yùn)用可凸顯其特殊含義，比如音樂(lè)的圖標(biāo)，色彩更加流動(dòng)性與活躍，撞色對(duì)比。聯(lián)系人圖標(biāo)運(yùn)用藍(lán)色漸變，更加理性與冷靜。
4.需要注意的點(diǎn)
漸變色設(shè)計(jì)雖然很酷，但是也有其弊端，切勿過(guò)度使用需要避免顏色沖突、注意光源位置、方形或者多邊形推薦使用線性漸變、圓形盡量使用徑向漸變，漸變過(guò)度一定要平滑，下面看幾個(gè)案例。
▲ 反面案例：界面中過(guò)多的漸變色，造成視覺(jué)噪音污染，使得畫(huà)面無(wú)重點(diǎn)，信息層級(jí)也不清晰。
▲ 正面案例：知道哪些地方運(yùn)用亮色，哪些范圍運(yùn)用暗色，便于通過(guò)漸變色制造光源，強(qiáng)調(diào)重要信息。
▲ 正面案例：當(dāng)大面積使用漸變色，盡量采用同色系或者鄰近色漸變，使用線性漸變，同時(shí)注意避免過(guò)高飽和度。
▲ 正面案例：同色系運(yùn)用且過(guò)度平滑，低飽和度漸變，使界面更加輕量簡(jiǎn)約，同時(shí)又不失細(xì)節(jié)。
▲ 反面案例：避免使用過(guò)于刺激性撞色，如果你沒(méi)有很好色感，最好使用鄰近色，同色系等容易掌握的顏色。
5.寫(xiě)在最后
漸變色運(yùn)用，需要我們長(zhǎng)期練習(xí)與感悟，當(dāng)然多欣賞優(yōu)秀的設(shè)計(jì)，也可以快速提高。如果色感不好的小伙伴，推薦多使用同色系漸變或者鄰近色。
下面推薦2個(gè)漸變色彩工具，日常可以多看看學(xué)習(xí)，便于快速提高漸變色運(yùn)用技巧。
1.grabient
漸變色可進(jìn)行編輯與調(diào)整，然后點(diǎn)擊漸變色卡即可進(jìn)行復(fù)制應(yīng)用。
2.webgradients
點(diǎn)擊色卡可進(jìn)入全屏預(yù)覽，如果你做大面積漸變色，這個(gè)網(wǎng)址非常值得保存。
原文地址：功夫UX（公眾號(hào)）
作者：功夫UX
效果圖：
主要過(guò)程：
首先打開(kāi)Ai新建畫(huà)板，尺寸隨意：
選一個(gè)合適的字體輸入文字，并且調(diào)整其大小：
選中文字ctrl+shift+o輪廓化，并且右鍵取消編組：
畫(huà)個(gè)框，排個(gè)版吧，這里操作就不贅述了，和ps差不多：
將字母轉(zhuǎn)為描邊，然后全選以后，ctrl+2鎖定：
在旁邊用橢圓工具按住shift鍵畫(huà)三個(gè)正圓，分別填充上自己喜歡的漸變色：
排列好圖層的順序，使用混合工具，設(shè)定適當(dāng)?shù)牟綌?shù)，我設(shè)置的100，然后依次混合三個(gè)漸變球：
按住alt鍵拖動(dòng)混合后的圓柱體多復(fù)制幾個(gè)出來(lái)，后面會(huì)用到：
接下來(lái)就是制作圓柱體的字母啦，我們會(huì)用到混合工具中的替換混合軸的功能。
這里簡(jiǎn)單說(shuō)明一下，因?yàn)樘鎿Q混合軸只能替換單一路徑，所以我們需要用鋼筆對(duì)剛才鎖定的字母畫(huà)出筆畫(huà)來(lái)。
以第一個(gè)字母H舉例，先用鋼筆設(shè)置無(wú)填充，描邊黑色，畫(huà)出筆畫(huà)來(lái)，把剛才的混合圓柱體縮放到適當(dāng)?shù)拇笮。?/p>
同時(shí)選中字母中的一個(gè)單獨(dú)路徑以及混合圓柱體，執(zhí)行對(duì)象-混合-替換混合軸：
]]>
NYC Pride
Just Actions
Pleid
Snipcart
Coleman Smith
Join Drift
Lines Conference
Skeleton
Premise Health
CoLofts
Leen Heyne
Designer Trek
Caitlin Wicker
MC3 Design
Names for Change
Tubatomic
Lighthouse Brewing Company
Echo
Hunger Crunch
