每周临摹 | 5分钟学会大厂都在用的弥散光

本次临摹学习的是【弥散光】这种新设计风格，在 iPhone 壁纸、阿里巴巴封面、网易刷屏级 H5 中都有出现。为了鼓励大家积极学习，「即时设计」联合多个品牌准备了丰富的奖品，涵盖学习、工作、圈内社交、生活，只要上传作业就可获得多重大奖，各位同学呼朋唤友一起来参与吧！

一、参与方式

参与方式：上传作业即可

参与时间：即日起-7月18日

UI中国上传作业时间截止7月11日，之后只需要邀请（即时设计-Nancekam）协同即可，添加微信：wangtongtongjiang 。

除了人人可得的参与奖，对于有创造力的个人作品和人气高的奖品，都准备了大奖~大家多多分享和进行创造，有创造力的奖品获奖概率更高哦~期待你的作品！

奖励设置：

1、优秀作品奖3名

奖励价值1144元礼包

UI中国年度会员（价值180元）+「我们的设计日记」知识星球会员权益1年（价值565元）+「y园糖」21天插画打卡名额1个（价值399元）

评选规则：最终根据UI中国作品点赞数和老师评分进行评选（作品点赞量和老师评分各占比50%）

2、最佳人气奖10名

奖励UI中国季度会员+「y园糖」80元优惠券1张，可用于y园糖所有付费课程

评选规则：UI中国作品点赞量+在即时设计参与点评的人数（多邀请小伙伴来点评你的作品呀）

3、最佳创意奖2名

奖励UI中国年度会员（价值180元） +「y园糖」21天插画打卡名额1个（价值399元）

评选规则：评审团评选

4、阳光普照奖人人可得

【联系即时设计，作业满足要求，添加微信：wangtongtongjiang 即刻发放奖励。】

提交作业即可获得

石墨文档个人高级版一个月
腾讯课堂畅学卡 7天
首汽约车首汽约车PLUS会员1个月
我们的设计日记 3天体验营课程

奖励说明：因为UI中国作业上传截止7月11日，所以优秀作品奖和最佳人气奖之后提交的作业，评选维度没有UI中国的数据。

作业注意事项【非常重要】：

① 使用「即时设计」完成作业，邀请即时设计教程老师（即时设计-Nancekam），并设置为打开编辑权限。方便对作品进行点评，提升学习。

点击进入➝ 即时设计-专业UI设计工具

② 作业命名为【每周临摹-即时设计用户名】，例如：有奖临摹-桶桶（数据统计需要，避免奖项评估时遗漏）

③ 在UI中国上传作业时，附带即时设计分享链接，不然无法领取奖品。

注：所有评选数据以7月14日12:00点为准，奖励结果会通过即时设计公众号公布。

所有作业需要符合教程内容。

邀请即时设计教程老师（即时设计-Nancekam），设置可下载权限

有任何疑问可以添加微信 wangtongtongjiang 咨询

二、弥散光教程

多家大厂用过弥散光这种设计风格，比如前不久刷屏朋友圈的网易《测一测你的人格主导色》H5，还有iPhone的自带壁纸、《阿里巴巴设计新趋势实战篇2》封面，在Dribbble上也经常能够看到弥散光元素和风格的作品。iPhone自带壁纸

《阿里巴巴设计新趋势实战篇2》

网易《测一测你的人格主导色》

从Dribbble上看一些热门设计作品也能发现，很多在背景氛围营造上面，也使用这种弥散光感来丰富画面细节，让画面显的不会那么单调，看起来会有更丰富画面背景。

弥散光风格通过颜色与颜色之间比较自然的渐变，让它们的整体气质更为柔和。

如何设计这种弥散光感？

下面我们通过来制作下面这张银行卡片的方式，详细教大家如何制作这种弥散光背景，并把它运用实际项目中。

关键点：高斯模糊、质感添加、颜色渐变

1、新建画板：打开我们的即时设计在线设计平台 https://js.design/

来工作台新建一个 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％，让卡片看起来更有磨砂质感，这里的噪点图像，我把它放到链接里的，大家去复制，粘贴到蒙版分组里面就可以。粘贴后，右键噪点图层「移至顶层」，将噪点图层置于如图分组内最顶层。

噪点磨砂文件： https://js.design/R_oClF?p=715B70C

8、描边质感添加：复制一个卡片底板，拖动至图层最上方，取消图层蒙版，并在右侧去除填充属性，给卡片添加2px的渐变描边，并调整渐变角度，让卡片看起来更有质感，这里描边颜色参数可以设置比卡片边缘高亮一点的颜色。色值为：#FFFFFF — #E49AEA — #FF3F38 渐变角度看我图中调整的。

阳光普照奖人人可得【联系即时设计，作业满足要求，添加微信：wangtongtongjiang 即刻发放奖励。】

9、添加文字排版：最后我们给卡片加上文字内容，就大功告成了，用黑色文字 #000000，给文字颜色混合模式设置「叠加」，（白色黑色都可以，大家自己尝试）就会有压印层的感觉。

数字字体我推荐工具字体库里面的 STAATLICHES 字体，效果会更好。

小技巧✌️：大家在进行渐变配色的时候，可以使用工具里面的渐变颜色插件，快速生成渐变色使用。

提示：大家在临摹完成提交作品时，在作品说明里，记得附带文件分享链接（主要要设置成“所有获得链接的人可通过链接访问”）哦，方便点评提升学习。（不然领不到奖励啦）

总结：利用好高斯模糊，将一种或者两种以上渐变色进行模糊虚化，将形状进行一些变换，做出弥散扭曲的效果，注意好颜色的搭配，具体实现方法就是上面这些，注意教程中的数值参数都不是固定的，大家可以举一反三，根据自己的偏好来调整数值参数，如果你有更好的设计思路，也可以尝试创新出来。下面是我做的一些风格延伸，大家临摹的时候可以进行参考。

这是教程源文件链接，大家有哪里不了解的可以去文件中查看，点击获取。