如何设计弥散光感 详尽教程与技巧

来源：太原设计培训机构时间：2024/4/9 16:16:21

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

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

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

　　如何设计这种弥散光感?

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

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

　　1、新建画板：打开我们的即时设计在线设计平台

　　来工作台新建一个 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 字体，效果会更好。

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

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

尊重原创文章，转载请注明出处与链接：http://www.peixun360.com/9861/news/717567/违者必究！ 以上就是太原设计培训机构 小编为您整理 如何设计弥散光感 详尽教程与技巧的全部内容。