Background Image Generator 免費網頁背景產生器，可製作各種材質圖片

現在比較少網站會用到背景圖，但有時候為了要讓背景不要太過單調，或是有些變化又不影響閱讀，會選擇顏色較淺的紋理材質素材，例如 Hero Patterns 可產生平鋪式背景 SVG 圖，或是 Bg-Patterns、Paper-co 也有不少紋理背景可以免費下載，當然這些工具都提供基本的設定選項，像是調整大小、密集程度或圖片格式，就能透過小張圖片拼接成背景，對於速度較慢的行動網路來說也不會因此而延遲網站載入速度。

本文要介紹的「Background Image Generator」是一個免費的網頁背景圖片產生器，來自一家 SiteOrigin 專門提供 WordPress 相關服務的公司，透過產生器使用者可以快速產生各種材質背景圖，包括自訂顏色、圖案、混合模式、圖案強度、噪點、反轉顯示或適用於 Retina 高解析度螢幕的圖案。

這些圖案是從 Subtle Patterns 收錄超過 400 種高品質紋理素材背景而來，SiteOrigin 將它製作成線上工具，讓使用者直接設定調整後產生即時預覽，對於不擅長使用繪圖軟體調整圖片色彩的使用者來說算是解決一道難題。

Background Image Generator
https://bg.siteorigin.com/

使用教學

STEP 1

開啟 Background Image Generator 從網站左側進行調整，預設情況下會有一個淺灰色的背景預覽，看得出來它不是單一顏色，其實是以一小張方形圖片重複顯示拼湊而成，看起來不會太過單調又能填充背景。

STEP 2

從左上角的 Background Color 選擇顏色開始，選擇後右側背景顏色會立即更新。

Pattern 收錄許多可用於產生背景圖片的素材紋理，不是只有這四個，透過滑鼠滾輪可以往下捲動找到更多圖案。

STEP 3

底下還有一個「Blend Mode」混合模式，試著點選看看就會搭配出不太一樣的感覺。

如果你想增加圖案強度或加入噪點（Noise），可將下面選項往右邊拖曳，強度和噪點程度就會提高，不過有可能使背景變得更為複雜或難以閱讀。常見的 Retina 顯示器因為能提供很高解析度的閱讀體驗，這個工具也能產生適用於 Retina 的背景圖片（Generate @2X），有需要的朋友記得勾選此選項。