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

接下來推薦的「Get Waves」是一個產生 .svg 格式波浪圖案的線上工具,直接打開網站就能線上產生,提供一些基本選項,包括波浪類型、位置、顏色、透明度、密度等等,調整後會立即在網頁中產生效果預覽,最終可以將圖片另存為 .svg 向量圖或產生 svg 程式碼。

網站名稱:Get Waves
網站鏈結:https://getwaves.io/

使用教學

STEP 1

打開 Get Waves 後預設就會有一個藍色波浪效果,看起來非常夏天!試著點選控制列的調整項目,透過簡單的圖示應該可以知道每個選項代表的意思,隨意點選看看,下方預覽圖就會即時更新。

STEP 2

Get Waves 讓使用者直接從網頁上調整波浪樣式、顯示位置(上或下)、顏色、透明度和密集程度等選項,如果沒有想法,點選最右側的「骰子」圖示就是隨機產生,跟以前玩遊戲在創角色隨機獲得的屬性點數一樣。

STEP 3

最後,點選中間的下載圖案,選擇要下載 .svg 向量圖格式或直接複製上方 svg 原始碼。

值得一試的三個理由:

  1. 可線上產生波浪圖的產生器
  2. 調整波浪樣式、位置、顏色、透明度和密集程度
  3. 產生為 .svg 向量圖格式或直接複製 svg 程式碼