Mesh 漸層色背景產生器,加入顏色以拖曳方式扭曲漸變效果

Mesh 漸層色背景產生器,加入顏色以拖曳方式扭曲漸變效果

如果你喜歡 iPhone、Mac 漸層顏色背景圖片,其實也可以自己動手做,之前介紹過不少漸層色的背景產生器,像是「Gradient Backgrounds」就是一站式的漸層背景產生工具整合各種服務(有點像是 The Stocks 2 整合免費圖庫、影片、圖示和字型的感覺),或是 WebGradients 收錄超過 180 種漸層色背景免費下載,產生 CSS 3 語法在取用顏色更方便。 其他還有像是 BlendColorSparkCoolHue 都是類似的圖案產生器服務。

bbburst 線上產生五顏六色繽紛效果的 SVG 圖片

bbburst

bbburst 是一個很簡單的線上工具,可以輕鬆產生有爆炸效果的彩色形狀 SVG 圖片,看起來就像文章上面這張擷圖一樣很繽紛,帶著邊緣模糊效果,非常適合使用於背景、封面或按鈕,為設計加入生動活潑的元素,當使用者透過自訂工具產生合適的圖片時,只需點選下載 SVG 圖片或複製 SVG 標記,使用 SVGOMG 等工具最佳化產生的 SVG 程式碼。

Wicked Backgrounds 製作漂亮的波浪狀背景圖,適用於網站、簡報設計

Wicked Backgrounds 製作漂亮的波浪狀背景圖,適用於網站、簡報設計

之前介紹過一些線上背景產生器,例如 Cool Backgrounds 內建五種背景類型,可以製作三角幾何圖形、科技粒子效果、CSS 漸層背景、漸層地形圖不同色彩組合,如果想產生簡單但又有點活潑的圖案,帶有漸層色的波浪背景圖是個不錯的選擇,例如 Svg WaveGet WavesSVG Waves 都是波浪圖產生器,功能相近,使用者能調整波峰數、高度、顏色或形狀變化等等。

VISIWIG 整合免費圖示、背景圖和紋理效果,一鍵複製 CSS、SVG 程式碼

VISIWIG 整合免費圖示、背景圖和紋理效果,一鍵複製 CSS、SVG 程式碼

這幾年有不少背景圖案製作工具,都可以在線上預覽、客制化圖形細節,最終產生 CSS 和 SVG 格式,甚至在不用下載任何檔案的情況下直接複製程式碼,加入網頁就會獲得非常好的效果,兼具品質和效能,也不會拖慢網頁速度。例如之前我厭過的 Hero Patterns 快速產生重複圖案 CSS 背景;CSS Background Patterns 也能製作各種純色彩背景圖,如果需要背景圖也能試試看接下來要介紹的服務。

SVG Waves 免費波浪圖產生器,互動式介面即時產生圖案原始碼

SVG Waves 免費波浪圖產生器,互動式介面即時產生圖案原始碼

這幾年看過一些波浪狀、具有弧度的圖形設計,可能運用在網頁、應用程式或文件,這些圖案可以利用產生器製作,像是之前介紹過的 Get WavesSvg Wave 都能在瀏覽器上建立出符合自己需求的波浪圖,無論波浪類型、波峰數量、層數、高度、顏色密度等等,有些還能搭配上漸層色效果,如果要尋找波浪圖的話就不需以繪圖軟體自行繪製,類似產生器很多,能打造出相當個人化的圖形。

Cool Backgrounds 免費背景製作工具,內建五種效果可自訂顏色

Cool Backgrounds 免費背景製作工具,內建五種效果可自訂顏色

根據 Cool Backgrounds 開發者研究,在發佈網頁或文章前最困難的步驟之一是找到合適背景圖片,好的圖片不僅能凸顯整篇內容質感,也可獲得更多使用者注意。我之前推薦不少免費背景產生器,依照使用者需求快速製作出很活潑、色彩鮮豔的背景,例如 Svg Wave 產生波浪狀背景圖案(在很多網站都能看到);Hero Patterns 製作好看的重複平鋪式背景,而且只要將 CSS 語法帶入就能套用。

Everypixel Patterns 協助設計師製作無接縫圖案,運用演算法產生圖庫

Everypixel Patterns 協助設計師製作無接縫圖案,運用演算法產生圖庫

最早介紹 Everypixel 這家公司的產品是「Everypixel 整合 50 個頂尖免費圖庫搜尋引擎,使用演算法過濾不適合圖片還能比價」,簡單來說,很多免費圖庫的相片品質參差不齊,有些甚至還有濃濃的「圖庫感」,Everypixel 就是透過機器學習和類神經網路技術,讓程式自動幫我們篩選掉一些一看就不會想使用的相片;後來還推出另一個「Everypixel Aesthetics Tool」由使用者上傳相片,交給機器幫你判斷這張相片究竟夠不夠吸引人。

Squircley 線上 SVG 圖片產生器,可製作圓形、正方形或方圓形彩色圖片

Squircley 線上 SVG 圖片產生器,可製作圓形、正方形或方圓形彩色圖片

今天來介紹一個比較輕鬆、活潑的線上工具。如果你在做設計時需要一些生動元素,加入七彩繽紛的幾何圖形或許是個方法,不過你也可能沒有什麼靈感,這時候就能透過工具幫你產生各種好看的形狀,而且無需額外下載任何軟體或應用程式。看一下文章最前面的首圖,要怎麼加入像是背景那些看起來像方塊、圓形穿插的可愛圖案呢?接下來的這個工具能夠線上產生。

Svg Wave 線上製作波浪背景圖,調整波峰數或高度產生 SVG、PNG 格式

Svg Wave 線上製作波浪背景圖,調整波峰數或高度產生 SVG、PNG 格式

對於一般內容網站來說,為了使頁面內容有好的可讀性,可能會維持網頁底色為白色或單一顏色,但如果是網路服務或應用程式,想讓背景活潑也能加入變化,例如 Hero PatternsBackground Image GeneratorSVG Backgrounds 產生紋理材質背景,既不會太過混雜又不像單一顏色這麼無趣,在維持網頁效能的情況下只要透過 SVG 或產生小張 PNG 圖片,以 CSS 方式載入就能自訂背景。

CSS Background Patterns 免費背景圖產生器,可建立純 CSS 背景素材

CSS Background Patterns 免費背景圖產生器,可建立純 CSS 背景素材

想想後來的網頁比較少有背景圖需求,多半都是以單色為主,如果覺得略顯單調,也能使用紋理材質或漸層色做為背景,例如 Paper-co 就有許多日系的紙張紋理材質可用做背景,不僅看起來可以提升質感,也不會影響閱讀造成負擔,另一個之前推薦過的 Subtle Patterns 也有超過 500 種紋理素材可供下載;若喜歡重複背景圖 Hero Patterns 可以在不下載任何檔案情況下產生好看的平鋪式背景圖,或是使用 ColorSparkGradient Backgrounds 製作漸層色背景,需要背景圖的朋友可以試試看這些服務。