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

最後更新於 2020 年 07 月 07 日

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

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

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

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

使用教學

STEP 1

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

STEP 2

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

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

STEP 3

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

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

值得一試的三個理由:

  1. 產生特定顏色的網頁背景素材紋理圖
  2. 可自訂顏色、圖案、混合模式、圖案強度、噪點、反轉顯示
  3. 素材來自 Subtle Patterns,收錄各種高品質紋理素材

 

相關文章

Bg-Patterns 日本免費網頁背景素材,提供常見格式及向量圖下載

如果要找尋一些很細膩、有質感的網頁素材,日本網站是個很好的去處,像是之前介紹過的 FLAT ICON DESIGN 收錄許多扁平化設計圖示,還有 FREE LINE DESIGN 提供各種分隔線素材,相片的話可以找找東京デート、Model.foto、photoAC、BIZUTART 和 PAKUTASO 等等,應該都會有不少收穫。有些網站其實很適合使用這一類素材,放上後的裝飾效果更能提升頁面整體質感。

Google Maps Directions Link Generator 為商店建立導航及路線規劃連結

如果你是商家,網路可能是目前最主要、也最有效果的宣傳行銷管道,因此有不少人會選擇以 Facebook、Google 或 Instagram 提高能見度,也讓產品能夠被更多人分享,例如之前曾寫過「免費在 Google 刊登商家資訊教學,透過搜尋地圖提高能見度」教學,若你想在搜尋引擎或 Google 地圖上登錄商店資訊可以參考。有了商家資訊後也可能會被留下不好的評價記錄,那麼「Google 商家被留負評該檢舉刪除?或許業主更該做的是回應疑慮」一文或有助於建立正確的處理方式。

Cover Colors 從音樂專輯封面找配色靈感,顯示主要的五種顏色色碼

想獲得色彩靈感的方式很多,舉例來說,Google Art Palette 讓使用者從藝術作品發掘配色靈感,Color Leap 可查詢不同時代流行的色彩組合,NIPPON COLORS 和 CHINESE COLORS 則有代表日本和中國傳統的顏色,都是透過一些實體獲取配色的方式。當沒有任何想法或對色彩沒有研究,Colorinspire 直接推薦你各種適合放在一起的色彩組合也很有用。

Dummy Image 假圖產生器,以網址快速載入各種尺寸顏色圖片

在設計網頁或是配置版面時經常會需要預先保留圖片位置,讓開發或示範時使畫面更接近最終樣貌,如果手邊的圖片還沒處理,我們可以透過佔位圖片(Placeholder)呈現出特定大小的圖片範圍。簡單來說,佔位圖片產生器利用網址直接調整、產生特定尺寸範例圖,省去必須自行裁切圖片的麻煩,因為是以網址形式載入圖片,即使沒有下載圖片依然能在網頁上顯示,我曾介紹過的 Unsplash It、Placekitten、Placemat 和 PlaceKeanu 都是類似應用。

Photerloo 上傳照片自動產生 Instagram Hashtags,增加 IG 照片觸及人數

去年我已經將自己的 Facebook 帳號刪除,個人網誌也已荒廢一段時間,不過一些日常瑣事和想法還是會透過 Instagram 分享,我是一個喜歡拍照並以文字紀錄生活的人,想想 IG 好像更適合自己吧!這幾年有不少人都將重心轉移到 Instagram ,相較於 Facebook 還得面對親朋好友或同事的壓力,或許隨手拍拍照片影片分享社群比較沒有負擔。

回覆

發佈留言必須填寫的電子郵件地址不會公開。