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

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

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

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

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

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

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

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

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

Get Waves 線上產生 svg 格式波浪圖,可自訂類型顏色每次都不一樣

Get Waves 線上產生 svg 格式波浪圖,可自訂類型顏色每次都不一樣

偶爾會看到帶有波浪形狀的網頁背景設計,通常會配合平面化設計風格一起使用,會讓整體看起來更活潑,但倒是從沒想過這個效果是怎麼做的,沒想到現在透過 .svg 向量圖程式碼就可直接帶入,讓整個設計流程加速不少。如果你平常工作和網頁設計有關,可能會用到類似上面圖片顯示的「波浪圖」效果,本文要介紹的產生器會很有用,趕緊把它收錄到書籤以備不時之需。