【鄭州ui培訓】波浪圖案怎么畫？這個神器一下搞定！

• 發(fā)布時間：
  2020-11-11
• 版權(quán)所有：
  云和教育
• 分享：

相信做UI設計的童鞋們，經(jīng)常會看到帶有波浪形狀的網(wǎng)頁背景設計，通常會配合平面化設計風格一起使用，會讓整體看起來更活潑。

你知道這種波浪效果是怎么做的嗎？今天就給你介紹一個波浪背景制作神器——Svg Wave?！

Svg Wave 能調(diào)整波浪的波峰數(shù)量、波浪層數(shù)和高度，也有自定義顏色或是使用漸層色效果，具有非常高的可自定義性。

如果你不確定怎么做比較好看，隨機按鈕點一下就會立即產(chǎn)生某個樣式，在 Svg Wave 能將波浪圖輸出為 SVG 或 PNG 格式（SVG 直接給出源碼），若你覺得開發(fā)網(wǎng)頁時使用單色背景看起來太過單調(diào)，Svg Wave 是個不錯的選擇。

Svg Wave

網(wǎng)站鏈接：https://svgwave.in/

使用教學

開啟 Svg Wave 網(wǎng)站后會看到波浪背景范例，從「Color」選取顏色或「Gradient」以兩個顏色產(chǎn)生漸層色效果，Svg Wave 可實時預覽顏色。

漸層色是蠻有活力的選項，選擇兩個顏色就能產(chǎn)生漸變效果。

上方的 Waves、Layers 分別代表波浪的數(shù)量和層數(shù)，直接以拖曳方式調(diào)整就會實時呈現(xiàn)在網(wǎng)頁上，調(diào)整 Height 可選擇不同的浪高，看起來整體感覺又會不太一樣。

如果想知道在深色背景呈現(xiàn)效果，點選 Svg Wave 右上角的圖標可切換深色模式。

最后，點選右下角「Export」選擇要匯出為 SVG 或 PNG 格式，如果是 SVG 會直接給出源碼。

值得一試的三個理由：

• 可在線制作波浪圖網(wǎng)頁背景圖片
• 自定義波峰數(shù)量、波浪層數(shù)和高度并實時預覽
• 產(chǎn)生 SVG 或 PNG 圖片格式

云和數(shù)據(jù)作為一個深耕IT職業(yè)教育多年的教育者，目前的課程涵蓋云計算、大數(shù)據(jù)、人工智能、虛擬現(xiàn)實、軟件工程、用戶體驗設計、網(wǎng)絡安全、電子商務等八大方向，結(jié)合企業(yè)實際用人需求，只為培養(yǎng)更多高端IT技術人才。

• 上一篇 11月程序員平均薪資達14327元，薪資最高的居然不是JAVA？
• 下一篇 優(yōu)秀的UI設計師都要具備哪些條件？