渐变无处不在。这不再是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个渐变色彩工具，日常可以多看看学习，便于快速提高渐变色运用技巧。

1.grabient

渐变色可进行编辑与调整，然后点击渐变色卡即可进行复制应用。

2.webgradients

点击色卡可进入全屏预览，如果你做大面积渐变色，这个网址非常值得保存。

原文地址：功夫UX（公众号）

作者：功夫UX

效果图：

主要过程：

首先打开Ai新建画板，尺寸随意：

选一个合适的字体输入文字，并且调整其大小：

选中文字ctrl+shift+o轮廓化，并且右键取消编组：

画个框，排个版吧，这里操作就不赘述了，和ps差不多：

将字母转为描边，然后全选以后，ctrl+2锁定：

在旁边用椭圆工具按住shift键画三个正圆，分别填充上自己喜欢的渐变色：

排列好图层的顺序，使用混合工具，设定适当的步数，我设置的100，然后依次混合三个渐变球：

按住alt键拖动混合后的圆柱体多复制几个出来，后面会用到：

接下来就是制作圆柱体的字母啦，我们会用到混合工具中的替换混合轴的功能。

这里简单说明一下，因为替换混合轴只能替换单一路径，所以我们需要用钢笔对刚才锁定的字母画出笔画来。

以第一个字母H举例，先用钢笔设置无填充，描边黑色，画出笔画来，把刚才的混合圆柱体缩放到适当的大小：

同时选中字母中的一个单独路径以及混合圆柱体，执行对象-混合-替换混合轴：

]]> //www.laura-marie.com/50557.html/feed 0 //www.laura-marie.com/46001.html //www.laura-marie.com/46001.html#respond Thu, 11 Aug 2016 07:38:11 +0000 WP Crew

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