根據 Cool Backgrounds 開發者研究,在發佈網頁或文章前最困難的步驟之一是找到合適背景圖片,好的圖片不僅能凸顯整篇內容質感,也可獲得更多使用者注意。我之前推薦不少免費背景產生器,依照使用者需求快速製作出很活潑、色彩鮮豔的背景,例如 Svg Wave 產生波浪狀背景圖案(在很多網站都能看到);Hero Patterns 製作好看的重複平鋪式背景,而且只要將 CSS 語法帶入就能套用。
本文要介紹的「Cool Backgrounds」是一個免費背景產生工具,主要提供五種類型背景:三角幾何圖形、科技粒子效果、CSS 漸層背景、漸層地形圖和 Unsplash 圖片,使用者可從線上快速調整不同色彩組合,立即更新預覽,點選右下角「下載」將素材保存為 PNG 格式。
這個工具整合了 Trianglify、Particles.js、CSS Gradient 和 Unsplash 等工具或來源,讓我們在很短時間內就能製作出很有質感的素材,如果需要尋找一張文章首圖或背景圖,可以到這裡碰碰運氣。
Cool Backgrounds
https://coolbackgrounds.io/
使用教學
STEP 1
開啟 Cool Backgrounds 後從左側選擇不同的背景類型,選取後右側會立即更新預覽。
STEP 2
從右下角點選配色會開啟不同的顏色組合,這些預設顏色都非常好看,如果你需要更多的自訂選項例如指定顏色,可以點選下方 More options on… 返回該工具原始網站進行設定,原則上在 Cool Backgrounds 就是非常基本的運用,設定後點選右下角「下載」可以取得背景圖。
STEP 3
Cool Backgrounds 還有提供像是科技粒子效果、CSS 漸層背景或漸層地形圖,點選後一樣從右下角可自訂不同的顏色組合。
最下方有一個「Unsplash」選項是從這個知名的免費圖庫找到適合做為背景的素材,自訂項目中可以更換不同的相片,看起來非常有質感。
STEP 4
Cool Backgrounds 網站上方有四個顏色:黑色、白色、藍色和紅色,點選後可將這些背景轉為單一顏色呈現,效果很特別,如果需要素色的背景圖案可直接點選上方顏色選項預覽。
值得一試的三個理由:
- 整合三角幾何圖形、科技粒子效果、CSS 漸層背景等五種背景圖案產生器
- 快速自訂顏色,或是回到原服務進行更多的項目設定
- 線上即時預覽後點選下載即可取得 PNG 圖檔