bbburst 是一個很簡單的線上工具,可以輕鬆產生有爆炸效果的彩色形狀 SVG 圖片,看起來就像文章上面這張擷圖一樣很繽紛,帶著邊緣模糊效果,非常適合使用於背景、封面或按鈕,為設計加入生動活潑的元素,當使用者透過自訂工具產生合適的圖片時,只需點選下載 SVG 圖片或複製 SVG 標記,使用 SVGOMG 等工具最佳化產生的 SVG 程式碼。
bbburst 產生器可以設定彩色圖片透明度、數量、邊框模糊效果,讓這些圖片集中在左上、右上、中間、左下或右下角,加入五種或更多的填充色彩,選擇不同形狀像是三角形、五邊形、菱形、星形、圓形、愛心、曲線、四方形、弧形,選擇後點選隨機產生就會不斷變化圖片。
這個工具使用 SVG.js 和 George Francis 的 generative-utils 程式庫,網站首頁有提供詳細說明文章,有興趣的開發者可以參考。
bbburst
https://fffuel.co/bbburst/
使用教學
STEP 1
開啟 bbburst 後從產生器下方調整不透明度(opacity)和圖案數量(amount),底下有一排選項為讓邊界模糊(blur edges),也能選擇要讓圖片集中顯示在畫面的那個位置,預設是中間。
接著調整彩色形狀的顏色,預設有五種色彩,可以刪除或加入更多,從右側「Shape Selection」選擇要加入的圖案,每次選擇上方的圖片都會隨機產生。
STEP 2
從右下角工具列點選「randomize」隨機產生新的圖案,如果喜歡,點選「save」將圖片保存 SVG 格式下載,或點選「copy」直接複製 SVG 標記。
如此一來就能從 bbburst 產生好看的彩色形狀 SVG 圖片素材囉!
值得一試的三個理由:
- 線上圖片產生器,可製作有爆炸效果的彩色形狀 SVG 圖片
- 對圖片進行各種細部設定,也能選擇圖形色彩、形狀和顯示位置
- 直接下載 SVG 向量圖或將 SVG 標記程式碼複製剪貼簿