本次与大家分享的是【弥散光】这种新设计风格，在 iPhone 壁纸、阿里巴巴封面、网易刷屏级 H5 中都有出现
多家大厂用过弥散光这种设计风格，比如前不久刷屏朋友圈的网易《测一测你的人格主导色》H5，还有iPhone的自带壁纸、《阿里巴巴设计新趋势实战篇2》封面，在Dribbble上也经常能够看到弥散光元素和风格的作品。
从Dribbble上看一些热门设计作品也能发现，很多在背景氛围营造上面，也使用这种弥散光感来丰富画面细节，让画面显的不会那么单调，看起来会有更丰富画面背景。
弥散光风格通过颜色与颜色之间比较自然的渐变，让它们的整体气质更为柔和。
如何设计这种弥散光感？
下面我们通过来制作下面这张银行卡片的方式，详细教大家如何制作这种弥散光背景，并把它运用实际项目中。
关键点：高斯模糊、质感添加、颜色渐变
1、新建画板：打开我们的即时设计在线设计平台
https://js.design/?source=csdn&plan=btt049来工作台新建一个 800px ^ 600px 的画板，并给画板填充背景色，后面颜色可能会再根据画面调整，色值可以根据自己偏好来给就行，这里我选的是色值 #EAC2E4 作为背景色。
2、绘制背景板：下面开始绘制卡片底部，创建一个470px ^ 285px 尺寸的卡片矩形，圆角给20px，颜色给一个比底色明度高一点的色，我选的色值是 #FFF2FE 做卡片背景色。
3、绘制基础形状：根据我们要临摹的卡片，看卡片中弥散光的大致位置和形状，先大致在卡片中绘制圆形，（后面再进行细调）并摆放在相应位置上，全选内容图层后，在顶部工具栏找到 「设置为蒙版」 按钮，将圆形与卡片做剪贴蒙版。（蒙版功能按钮在工具栏顶部，图中我箭头标识处）
4、设置圆形颜色：给圆形设置渐变填充，大家在设置颜色的时候，可以尽量使用渐变填充，这样颜色会更丰富一些，1 2 3 三个圆色值分别是：
圆1: #C373EA — #EAA3E8
圆2: #F3A5BA — #F47677
圆3: #FFB2A6 — #F77B67
这里需要注意的是，设置完颜色后根据圆的明暗位置调整一下渐变色的角度。
5、设置高斯模糊：这一步是比较重要出效果的一步了，给三个圆设置高斯模糊，高斯模糊数值给 100 ，这里注意的是：设置完高斯模糊后，我们可以通过拖动渐变滑块，细调一下渐变颜色，以及渐变角度，让颜色过渡上更自然，这样基础弥散光感效果就能看出来了，但是效果还不够，下面继续调节。
6、弥散光调整 ：单单是纯圆形做完高斯模糊后看起来没有那么自然，我们把圆形形状进行一些编辑调整，双击圆形进入编辑模式后，拖动锚点，给弥散光制作出一种扭曲的效果，这里根据自己感觉调节就可以。
7、磨砂质感添加：给卡片添加一下噪点纹理，我们添加带有噪点的图像。将不透明度降低到3％，让卡片看起来更有磨砂质感，这里的噪点图像，我把它放到链接里的，大家去复制，粘贴到蒙版分组里面就可以。粘贴后，右键噪点图层「移至顶层」，将噪点图层置于如图分组内最顶层。
8、描边质感添加：复制一个卡片底板，拖动至图层最上方，取消图层蒙版，并在右侧去除填充属性，给卡片添加2px的渐变描边，并调整渐变角度，让卡片看起来更有质感，这里描边颜色参数可以设置比卡片边缘高亮一点的颜色。色值为：#FFFFFF — #E49AEA — #FF3F38 渐变角度看我图中调整的。
9、添加文字排版：最后我们给卡片加上文字内容，就大功告成了，用黑色文字 #000000，给文字颜色混合模式设置「叠加」，（白色黑色都可以，大家自己尝试）就会有压印层的感觉。
数字字体我推荐工具字体库里面的 STAATLICHES 字体，效果会更好。
小技巧✌️：大家在进行渐变配色的时候，可以使用工具里面的渐变颜色插件，快速生成渐变色使用。
总结：利用好高斯模糊，将一种或者两种以上渐变色进行模糊虚化，将形状进行一些变换，做出弥散扭曲的效果，注意好颜色的搭配，具体实现方法就是上面这些，注意教程中的数值参数都不是固定的，大家可以举一反三，根据自己的偏好来调整数值参数，如果你有更好的设计思路，也可以尝试创新出来。下面是我做的一些风格延伸，大家临摹的时候可以进行参考。
这是教程源文件链接，大家有哪里不了解的可以去文件中查看
43
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
