在界面设计中我们经常会看到像晶格化效果的背景样式。让界面看起来丰富而有细节。那么这样的效果是用形状工具绘制出来的呢?还是有其他什么简单的方法?所以这一期MICU教大家图和快速制作晶格化的界面效果。喜欢的朋友一起来学习吧。
先看看效果图

第1步
建立渐变背景
首先在PS中新建一个iphone6(750X1334)的画布。

然后新建一个图层并双击图层,在【图层样式】中选择【渐变叠加】,“混合模式”为正常,“样式”为线性,“角度”为-90度。

点击“渐变条”,设置为深蓝色到黑蓝色的渐变,两个颜色不要过度要太强烈。

使用工具栏中的【椭圆工具】绘制一个200x200的正圆形。


找一张照片素材Ctrl+T缩放发到合适的大小,按住Alt键在照片与圆形形状图层中点击,添加剪切蒙版。


第2步、生成晶格化背景
制作好头像效果后,再用头像照片素材制作晶格化背景效果。下载好的插件(插件在MICU设计公众号中回复27即可下载,运行插件需要安装java程序)

安装好后,打开插件应用程序。点击插件的第一个按钮选择头像照片,导入素材。

导入好素材后,在图片中点击关键点,点越多生成出来的晶格会越密集,点越少则越稀疏。

绘制好关键点后,点击插件中的最后一个按钮生成。设置命名后进行保存。

将生成好的晶格化背景用PS打开。
