生成五彩缤纷纸片背景图bbburst

神器介绍

bbburst 是一个使用起来很简单的免费在线工具，它可以十分快速十分轻松的产出具有爆炸效果的彩色碎花形状 SVG 图片，看起来就跟庆祝活动上的烟花、礼花一样绚烂缤纷，并且带着边缘模糊的效果，非常适合使用在背景、封面或按钮这些组件上面，它会为设计加入相当生动活泼的元素。当我们通过自定义产生合适的图片时，只需点选下载「SVG 图片」或「复制 SVG」，即可得到想要的图片。

使用说明

1、首屏界面介绍

上图是网站的首屏，在最中间的结果图片四周有好几个可操作项目。右上角「月牙」形状的icon 是一个「夜晚/日光」 模式切换的按钮，不是对网站全局做切换，而是只影响结果图片的变化：

不难看出这个按钮其实只影响了结果图片的背景色变化，所以大家可以把它理解成一个「黑白背景色的快速切换按钮」。

结果图片区域的正下方有两个滑块，一个叫「opacity（不透明度」，一个叫「amount（数 量）」，它俩的滑块位置决定了图片中碎花的样式：

「opacity（不透明度」滑块越靠左，碎花不透明度越低，碎花也就越不清晰；「amount（数 量）」滑块越靠右，碎花的数量也就越多变化也就越多。

2、进阶设置面板

随着下滑手势，我们可以看到一个更为全面的设置面板：

这块儿分开给大家介绍吧，根据对结果样式影响，可以分为碎花位置、碎花颜色、碎花形状三块儿内容。

「no blur（无模糊）」是可以点击的，它控制的是结果图片的边缘是否模糊，当前「no blur」 是有模糊的状态，点了之后变为「blur edges」是无模糊的状态，像这样：

在「no blur」右边，是五个位置按钮，默认是「Center」也就是「中心」位置。也就是说碎花 是从中心开始往四周逸散的。如果想要从左上角逸散，那就点「Top left」；想要右下角那就点 「Bottom right」：

下面该介绍颜色设置面板了，颜色设置同样很简单，每个颜色可以自定义输入 HEX 色值，并且每个色卡都可以删除，同样的也可以进行添加色卡。系统会自动根据已经添加/设置的色卡色值进行随机分配，就像这样：

如果大家只需要一个颜色的碎花，那就保留一个色卡就好。OK，接下来就该介绍颜色设置面板 的邻居了–「SHAPE SELECTION（形状选择）」。形状选择里有很多形状供我们选择，三角 形、星形、心形、圆形等等等等，一共 14 种形状，玫红色的形状是已选中的形状，它们将会出现在结果图片中，加多少个都行，减到剩一个也行，通过点击决定就好：

保存方式

通过以上我们对碎花不透明度、数量、位置等等一系列定义，最终需要保存下来结果图片拿到实际项目里面去用。保存方式很简单，在页面右下角有一个固定在页面位置的区域：

这三个按钮可以在任何阶段任何时候进行操作，第一个按钮「randomize（随机）」比较特殊， 不牵扯到保存执行却和保存按钮放在了一起，它是一个随机生成样式的按钮，点一下就会把结果图片随机生成一个样式出来：

所以要是你不满意某一种样式，就一直点「randomize（随机）」吧，直到你找到想要的图片为 止，反正点多了它也不会跳出来打你。

接下来就是真真正正的轮到保存出场了，「Save（保存）」和「Copy（复制）」是两个不同的保存方式，在上面介绍神器的时候我们不是说到结果图片本质是一个 SVG 么，SVG 一般会有两种保存结果，一个是保存为 SVG 图片，一个是复制 SVG 代码。「Save（保存）」和「Copy（复制）」就是对应这两种保存结果的。

点击「Save（保存）」，会自动下载一个 SVG 文件到本地：

我们可以在任何设计软件里去再次修改样式。点击「Copy（复制）」，会复制出 SVG 代码，然 后就可以去到任何一款设计软件/开发里粘贴进去使用，以 XD 为例，粘贴后会出现：

同样可以再次修改样式。