弥散光设计！网易阿里大厂都在用的刷屏级新设计风

这几天不是有一种流行的设计风悄悄刮起来了！那就是弥散光。

最开始它在 UI 它广泛出现在设计中，后来在各种平面设计中流行起来。它不仅出现在今年的阿里巴巴设计新趋势实践中，而且不久前也出现在网易的测试主色调中。

今天，平面设计实战优设 @Feeelin 菲林老师 教你做这种风格！

第一节：风格特征

首先，我们以下图为例，分析总结弥散光风格的特点。

1. 虚实结合

我们对渐变风的常规认知主要是颜色和颜色之间的自然渐进变化，其整体气质更加柔和。然而，在此基础上，弥散光产生了一些虚实变化的新特征。

简单来说，如下图所示。

颜色边缘保留了一些清晰的轮廓，从整体感知上增加了一些动态和变化水平。由于其特点，它可以作为布局的主视觉和辅助部分产生良好的效果。

2. 噪点质感

严格来说，这其实是弥散光结合酸性风格的延伸用法。不仅在原有的基础上增添了一些复古气质，还有细节 Max。

3. 聚焦 or 层次

在用法上，视觉聚焦和作为背景增加整体水平。

要点1：视觉焦点也是目前常用的一种方法。它通常与重要信息结合，即通过颜色对比吸引人们的注意力，从而关注重要信息需要突出。

要点二:作为背景，增加整个布局的层次和细节。用法类似于氛围图和底纹。

第二节：制作方法

从外观和用法的角度来看，我们将了解其主要特征。在下一部分，我将通过以上三个案例讨论它 3 一种比较典型的弥散光实现方法。

1. 单体渐变

制作要点：高斯模糊

实现这一全弥散状态的渐变相对简单，方法也多种多样。做细节调整比较方便的方法之一就是高斯模糊。

制作步骤

Step 1：在画布中新建三个圆形，并将其放置在布局的对角线上。

Step 2：给这三个图形一个高斯模糊(滤镜模糊-高斯模糊)。

注:为了保持模糊参数的可编辑性，可以选择高斯模糊后将图形转换为弹出窗口的智能图像。

2. 组合渐变

制作要点：模糊画廊

这里渐变的主要特点是它的虚实结合。除了模糊画廊，还有其他实现方法，但模糊画廊会更方便~

以圆为例，做一些组合。如果你想要更复杂的效果，也可以使用其他图形~

制作步骤

Step 1：新建七个椭圆。调整它的大小和方向。

当然，这里的大小和方向一开始是无法完美设置的，或者以最终呈现效果为准，然后调整大小方向。

Step 2：对上述图形分别加模糊画廊效果。

它可以根据自己的需要改变模糊的方向，也可以创造一种空间感。

Step 3：最后，根据布局的需要，可以在布局边缘做一点内发光效果。

最后效果：

3. 背景渐变

生产要点：渐变叠加+液化

液化更自由，可以根据自己的需要不同程度地拉~

制作步骤

Step 1：新建一个布局大小的矩形，并给它一个渐变叠加。

Step 2：液化(滤镜-液化)接下来是一套神奇的传统工艺~

回到布局中的效果。

Step 3：这时也可以选择使用柔边画笔，在布局边缘加一点内发光效果。

最后效果：

最后还可以增加一点噪音质感~可以通过添加杂色(滤镜-杂色-杂色)来调整到数量 5.单色高斯分布就好。

好了~以上介绍了三种典型的实现弥散光感的方法，不得不说挺好玩的~

除此之外，当然还有其他的实现方法，这些方法也可以结合使用，一般来说，如何使用都很容易使用！

但是！还没结束！让我们再做一整点好工作！

第三节：实例演示

还是这个主题！梦在黎明破晓的时候~我们会在上面三种形式的例子的基础上做一些改变，我们会让它在表达方式上更加切题。

1. 梳理基本信息

在视觉元素方面，我们将回收上述示例中的两种弥散光。

2. 制作流程

文字编排

主视觉

在将两种弥散光放入布局后，我们首先要处理这种组合弥散光。

Step 1：首先，统一模糊的方向。削弱色彩对比度，使其在布局中更好地融合。

总的来说，我们加一点质感。其实这个时候整体效果挺好的。再次感叹弥散光真的很好用！但是也可以加1亿点细节！

Step 2：我们给背景散光一个蒙版，加一个深色背景，让整体效果对比更强。

Step 3：此时，布局中仍然缺乏视觉焦点。黎明怎么能没有日出呢？让我们加入小太阳~

Step 4：不够！让我们给小太阳一些清澈的效果！

A：首先给一点体积。

B：给人一点光晕效果。

C：然后我们给小太阳一点半透明效果，把图层填充调整到 60。

D：最后，一个高光点~

3. 多尺寸延展

基本效果出来后，我们来看看它的延展性:

案例只演示知识点，而不是其他用途。更多平面知识干货，请关注微博@优设基础训练营 或 公众号「优优教程网 uiiiuiii」