漸變無處不在。這不再是90年代的一種趨勢，設計師們傾向于在現代簡約的UI中使用漸變。背景、按鈕、開關、卡片、甚至是陰影，你所有能夠想到的地方都有漸變的存在。漸變已經橫掃了數碼產品和Dribbble/Behance這樣的設計平臺。
什么是漸變呢？
漸變是從一種顏色過渡到另一種顏色，是由很多種顏色組成的混合（一個漸變可以有無限多的陰影）。
我們可以在很多方面使用漸變。例如在背景和前景的漸變元素，可以做出微妙或者是極端大膽的顏色組合。
因為漸變是通用的，我們可以用他們來傳達獨特的設計或者品牌理念。
在這篇文章中，我想要分享一些實用的技巧，讓你的漸變設計脫穎而出。
找到正確的靈感
首先，我們需要找到源頭。
漸變最好的靈感來源就是大自然。因此，最開始的設計過程就是花時間去觀察現實世界。尋找風景、環境或者植物的照片作為你的顏色來源，并且和你的項目建立起聯系。
創造自己的調色板
使用“顏色選擇器”找到合適的部分。從一張照片/圖片中選擇2-3種醒目的原色來構建你的調色板。
建議一開始只選擇少量的幾種顏色。因為RNG顏色模型只有三個變量，這意味著你可以混合紅（R）、綠（G）、藍（B）來構建出任何的漸變。RGB的值通常是在0-255之間。
此外，為了使得構建出來的漸變看起來比較柔和平滑，在構建調色板的時候考慮值的變化在50-150之間。
混合調色板的顏色
在選好的調色板上創建一個新的圖層，并通過添加“背景模糊”的效果來實現平滑的過渡。
創建一個新的圖層，用獲得的模糊的路徑重新創建線性漸變。
在線性漸變中使用徑向漸變以增加深度
徑向漸變用于模擬光照，而光照并不總是線性的。你可以將徑向漸變應用到預先設計好的線性漸變上，并配置光源的方向，使它看起來效果更好。
使用有意義的漸變方向
在有需要的地方使用漸變方向。例如，使用發射光源以突出特定的元素，通過將文本放置在彩色區域使其更具可讀性，或者通過具有平滑的漸變路徑的UI引導用戶。
增加顆粒噪點使其具有沖擊力
在Figma或Sketch中，可以在漸變上添加一層紋理，使其看起來有復古風。在網頁端你可以通過在漸變上放置圖片來應用顆粒噪點效果。
在這里你可以學到如何用CSS添加噪點。
注意：你通常只需要0.1%到0.5%的噪點圖像透明度。
將漸變和抽象形狀結合起來
為了使你的漸變效果更酷炫，甚至可以使用抽象的半透明形狀。使用“蒙版”工具在漸變層之外或之上嵌套斑點或波浪形狀。
感謝閱讀
原文：https://blog.prototypr.io/how-to-design-sexy-gradients-a897b42c245
翻譯：花火譯文小組
來源：靜Design（ID：JingDesign91）
01、以下幾種情況適合使用漸變色
? 想把背景當作天空
如果你的背景有起到天空的作用，哪怕不是真實的天空，那么用漸變色都是比較合適的，通常是用單色漸變（色相一樣，只是明度和飽和度有變化，比如藍色到淺藍色）或類比色漸變（比如藍色到青色）。并且，即使是類比色漸變也是要有明度上的變化，因為這樣的漸變可以讓畫面更透氣、更有空間感。
▲漸變的方向通常是模擬真實天空的光感，即上暗下亮，或者中間亮四周暗。
? 想表現小清新的調性
小清新在平面設計中通常是指視覺感受是自然、淡雅、靜謐的畫面，這樣的畫面其色調應該是柔和的，所以很適合使用漸變色，而且一般是使用明度比較高、飽和度比較低的單色漸變或類比色漸變，在飲料、護膚品、家居等品牌的設計中比較常見。
? 想表現科技感
諸如3C產品，或與AI、互聯網相關的品牌、產品或者主題，其設計通常需要表現出科技感，而科技感是一種怎樣的視覺感受呢？這類視覺有一個共同的特點就是光感很強，比如下面這些作品。
所以為了表現比較強的科技感，畫面中通常少不了使用漸變色，因為只有漸變色才能呈現出鮮明的明暗對比、強烈的光感，而且這種漸變色的明暗跨度會比較大，色彩的飽和度會比較高。色相以冷色為主，比如藍色、青色、綠色、紫色。
? 想表現食欲
食品海報最基礎的要求就是要能表現出食物的食欲，讓人看了會有想吃、想喝的欲望。我們都知道，在色彩中，暖色是比較有食欲的，比如紅色、橙色、黃色、粉色等。另外，如果是夏季，藍色綠色會給人清爽的感覺，所以也能加強食欲（通常指飲料、雪糕類產品）。
吃是人類的生理需求，也是最基礎的需求，所以對于食欲的表現肯定要樸實有親和力，漸變色就具有這樣的特質。而且食物的色彩通常也是漸變色，所以使用漸變色作為背景可以與實物圖片形成呼應。
食欲強的漸變色具有以下特點：
a.明度不會太低；
b.飽和度不會太高；
c.明度對比不會太大；
d.以單色漸變和類比色漸變為主。
02、怎樣的漸變色更有高級感?
確實，很多視覺高大上的設計都喜歡用純色，但并不代表漸變色就表現不出高級感，蔥爺研究了大量奢侈品牌、中高端品牌的視覺設計，發現高端的漸變色通常具有以下幾個特點：
? 使用單色漸變
大家都知道高端的設計在色彩使用上是很克制的，即顏色的數量會比較少，而單色漸變相比多色漸變就要克制一些。
? 顏色明度較低
高端的設計喜歡用黑色作為背景，想必你也發現了，因為黑色具有高貴、神秘、厚重的感覺，所以容易營造出高端的氛圍，除了黑色，其他顏色的深色也具有這些特點，比如深藍、深紅、深綠等等。所以漸變色要想高端，整體的顏色也要偏暗，比如黑色到灰色漸變，深藍到藍色漸變等等。
? 顏色來源于畫面中的圖片
如果版面中是有圖片的，比如產品圖片或人物圖片，那么從圖片中吸取顏色用于填充背景，會使背景與圖片關聯性更強、更融合，畫面的效果會更和諧，否則容易出現生硬、拼湊的感覺。
03、時尚的漸變色有什么特點?
自從進入數字營銷時代，各個品類的設計都在逐漸互聯網化，相比傳統營銷，數字營銷更講究年輕化和個性化，所以在視覺上通常也要求更潮、更時尚，特別是對于一些針對年輕人的品牌。時尚類的視覺設計中也很喜歡用漸變色，其特點如下：
? 顏色的飽和度和亮度較高
注意，亮度不是明度，亮度高不代表明度高，但是明度肯定不會太低(在ps拾色器面板中觀看HSB模式中的B值)。飽和度和亮度較高的漸變色更鮮艷、更張揚，更符合年輕人和互聯網的特性。
? 顏色對比較強
比如對比色和補色漸變是時尚類設計很喜歡用的顏色，這樣的顏色反差比較大，視覺沖擊力也更強。
? 幾種效果比較時尚的漸變
a.炫彩漸變
b.鐳射漸變
c.彌散漸變
總結
最后，蔥爺有必要提醒一下，色彩只是影響設計調性的其中一個因素，調性不是一個漸變色就能左右的，想要表達出正確的調性，還需要有圖片素材、構圖、字體、排版、設計風格等多個因素的配合，否則你的色彩用得再好也起不了多大的作用。
感謝閱讀！
作者：蔥爺
來源：蔥爺（id:congyenanian）
]]>
前言：漸變是無處不的在。設計師們傾向于在現代簡約的UI中使用漸變，包括背景、按鈕、開關、卡片、甚至是陰影！你所有能夠想到的地方都有漸變的存在，這些漸變已經橫掃了數碼產品和Dribbble/Behance這樣的設計平臺。
所以，什么是漸變呢？
漸變是從一種顏色過渡到另一種顏色，是由很多種顏色組成的混合（一個漸變可以有無限多的陰影）。我們可以在很多方面使用漸變。例如在背景和前景的漸變元素，可以做出微妙或者是極端大膽的顏色組合。
因為漸變是通用的，我們可以用他們來傳達獨特的設計或者品牌理念。在這篇文章中，給大家分享一些實用的技巧，讓你的漸變設計脫穎而出。
一、找到正確的靈感
首先，我們需要找到漸變的源頭。
漸變最好的靈感來源就是大自然。因此，最開始的設計過程就是花時間去觀察現實世界。尋找風景、環境或者植物的照片作為你的顏色來源，并且和你的項目建立起聯系。
二、創造自己的調色板
使用“顏色選擇器”找到合適的部分。從一張照片/圖片中選擇2-3種醒目的原色來構建你的調色板。
建議一開始只選擇少量的幾種顏色。因為RNG顏色模型只有三個變量，這意味著你可以混合紅（R）、綠（G）、藍（B）來構建出任何的漸變。RGB的值通常是在0-255之間。
此外，為了使得構建出來的漸變看起來比較柔和平滑，在構建調色板的時候考慮值的變化在50-150之間。
三、混合調色板的顏色
在選好的調色板上創建一個新的圖層，并通過添加“背景模糊”的效果來實現平滑的過渡。
創建一個新的圖層，用獲得的模糊的路徑重新創建線性漸變。
四、在線性漸變中使用徑向漸變以增加深度
徑向漸變用于模擬光照，而光照并不總是線性的。你可以將徑向漸變應用到預先設計好的線性漸變上，并配置光源的方向，使它看起來效果更好。
五、使用有意義的漸變方向
在有需要的地方使用漸變方向。例如，使用發射光源以突出特定的元素，通過將文本放置在彩色區域使其更具可讀性，或者通過具有平滑的漸變路徑的UI引導用戶。
六、增加顆粒噪點使其具有沖擊力
在Figma或Sketch中，可以在漸變上添加一層紋理，使其看起來有復古風。在網頁端你可以通過在漸變上放置圖片來應用顆粒噪點效果。
在這里你可以學到如何用CSS添加噪點。注意：你通常只需要0.1%到0.5%的噪點圖像透明度。
七、將漸變和抽象形狀結合起來
為了使你的漸變效果更酷炫，甚至可以使用抽象的半透明形狀。使用“蒙版”工具在漸變層之外或之上嵌套斑點或波浪形狀。
感謝閱讀！
作者 | Buninux
翻譯 | 小阿田的設計筆記 （ID：tzwDesign）
原文 | https://blog.prototypr.io/how-to-design-sexy-gradients-a897b42c245
今天就和大家聊下漸變色風格特點，以及如何在優秀設計中學習漸變色的使用思路。
1.漸變色在設計中的價值
漸變色廣泛運用在各行業設計中，它幫助很多產品有效的打造具有傳播性的品牌基因、增強品牌記憶、豐富設計細節。對設計師來說，又多一種設計表達手法。
▲ spotify的漸變色更是讓人記憶尤新，通過漸變色打造獨有的產品調性。其封面設計最具記憶點。
▲ apple music因其獨特漸變色LOGO，吸引很多用戶和粉絲，其流動的漸變色正好符合音樂律動感，也最具記憶性。
2.漸變色直觀感受
當我們說起漸變色，我相信大家有不同的情感表達。最直觀的是強視覺感知、美觀性強、極具吸引力、記憶性等。
▲ 2016年5月知名產品instagram更換品牌后，其驚艷的漸變色吸引很多設計師和用戶的關注，有吐槽也有贊美的，其后近幾年諸多設計跟隨這樣的風格。
▲ 融合幾何圖形的漸變色，帶來更加直觀的空間感和流動感。
3.運用場景
漸變色在設計中運用范圍廣包括UI設計、Web、圖標、LOGO、海報設計等下面來看看它運用在這些設計中特征點。
▲ 在背景中可增加界面細膩度和品質感，如果單純白色或者純色，畫面顯得蒼白無力，如果你想給用戶營造活力的氛圍，那么還可以使用暖色調。
▲ 在卡片上配合幾何圖形可區分功能模塊。如果是金色漸變，可表達尊貴身份，一般會運用到會員卡片設計。
▲ 在關鍵功能上應用漸變色，能起到強調作用，同時增加該功能的趣味性。通過顏色漸變來表達當前的功能狀態。
WEB中的運用
▲ 一般運用在頭圖背景色偏多，凸顯品牌的同時，可以讓畫面有更多細節。
▲ 配合幾何圖形運用，可以增加空間感和神秘感。
LOGO中的運用
▲ 在LOGO中雙色漸變或者多色漸變，可以讓logo更加立體與空間感，有助于形成口碑傳播與營造吸引力，instagram和apple music 就是一個很好的例子。
海報中的運用
▲ 海報中運用漸變色，玩法可以有很多種類型，視覺沖擊力強，吸引注意力，滿滿的時尚感。
圖標中的運用
▲ 在圖標中運用可凸顯其特殊含義，比如音樂的圖標，色彩更加流動性與活躍，撞色對比。聯系人圖標運用藍色漸變，更加理性與冷靜。
4.需要注意的點
漸變色設計雖然很酷，但是也有其弊端，切勿過度使用需要避免顏色沖突、注意光源位置、方形或者多邊形推薦使用線性漸變、圓形盡量使用徑向漸變，漸變過度一定要平滑，下面看幾個案例。
▲ 反面案例：界面中過多的漸變色，造成視覺噪音污染，使得畫面無重點，信息層級也不清晰。
▲ 正面案例：知道哪些地方運用亮色，哪些范圍運用暗色，便于通過漸變色制造光源，強調重要信息。
▲ 正面案例：當大面積使用漸變色，盡量采用同色系或者鄰近色漸變，使用線性漸變，同時注意避免過高飽和度。
▲ 正面案例：同色系運用且過度平滑，低飽和度漸變，使界面更加輕量簡約，同時又不失細節。
▲ 反面案例：避免使用過于刺激性撞色，如果你沒有很好色感，最好使用鄰近色，同色系等容易掌握的顏色。
5.寫在最后
漸變色運用，需要我們長期練習與感悟，當然多欣賞優秀的設計，也可以快速提高。如果色感不好的小伙伴，推薦多使用同色系漸變或者鄰近色。
下面推薦2個漸變色彩工具，日?？梢远嗫纯磳W習，便于快速提高漸變色運用技巧。
1.grabient
漸變色可進行編輯與調整，然后點擊漸變色卡即可進行復制應用。
2.webgradients
點擊色卡可進入全屏預覽，如果你做大面積漸變色，這個網址非常值得保存。
原文地址：功夫UX（公眾號）
作者：功夫UX
效果圖：
主要過程：
首先打開Ai新建畫板，尺寸隨意：
選一個合適的字體輸入文字，并且調整其大?。?/p>
選中文字ctrl+shift+o輪廓化，并且右鍵取消編組：
畫個框，排個版吧，這里操作就不贅述了，和ps差不多：
將字母轉為描邊，然后全選以后，ctrl+2鎖定：
在旁邊用橢圓工具按住shift鍵畫三個正圓，分別填充上自己喜歡的漸變色：
排列好圖層的順序，使用混合工具，設定適當的步數，我設置的100，然后依次混合三個漸變球：
按住alt鍵拖動混合后的圓柱體多復制幾個出來，后面會用到：
接下來就是制作圓柱體的字母啦，我們會用到混合工具中的替換混合軸的功能。
這里簡單說明一下，因為替換混合軸只能替換單一路徑，所以我們需要用鋼筆對剛才鎖定的字母畫出筆畫來。
以第一個字母H舉例，先用鋼筆設置無填充，描邊黑色，畫出筆畫來，把剛才的混合圓柱體縮放到適當的大小：
同時選中字母中的一個單獨路徑以及混合圓柱體，執行對象-混合-替換混合軸：
]]>
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
