WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： とみー
カテゴリー： デザイン >WEBデザイン

デザイン制作をしていて簡単にウェーブシェイプを作りたいなと思ったことはありませんか？
今回は背景などに使えるグラデーションを使用したウェーブシェイプを簡単に制作することが出来る、とても便利なツール「SVG Wave Generator」を紹介したいと思います。

「SVG Wave Generator」の使い方

「SVG Wave Generator」にアクセス

「SVG Wave Generator」にアクセスします。

SVG Wave Generatorにアクセスするとこのような画面になっています。

SVG Wave Generatorの機能紹介

プレビューとシェイプの設定

大きく2つの役割に分かれていて、左側が「シェイプのプレビュー」、右側が「シェイプの調整」になっています。

形状の選択

形状を波のような滑らかなもの（左）か、カクカクしたもの（右）を選択することが出来ます。

シェイプの向きの選択

シェイプの向きを上下どちらか選択することが出来ます。

波の調節

左右に動かして直感的に波の個数や波の高さを調節することが出来ます。

シェイプの数

重なるシェイプの数を1～4の中から選択することが出来ます。

カラーの選択

グラデーションの色味を設定することが出来ます。
※単色のシェイプを制作したい時は2色とも同じ色を選択して下さい。

保存方法の選択

保存方法を選択することが出来ます。
左からSVG、PNG、SVG（貼り付け用）となっています。

実際にシェイプを作成

二つのシェイプが重なったようなシェイプを作成

↑こちらが設定したものをPNGで書き出したものになります。

まとめ

今回は背景などに使えるウェーブシェイプを簡単に制作することが出来る「SVG Wave Generator」をご紹介しました。
操作も簡単で書き出し形式も好きなものを選択出来るのでかなり使いやすいです。
無料で利用出来るのでまずは試しに触ってみて下さい。