このレッスンでは、Adobe XD の描画ツールを使って波線をつくる方法を解説します。
Adobe XD を起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選択して「開く」をクリックします。ファイルが開くと、動画と同じサンプル画面が表示されます。
ベースの繰り返しパターンを作成
ツールバーの多角形ツールを選択し、アートボード上でドラッグして三角形を描きます。プロパティインスペクタで角の数を 4 にすると、三角形が菱形になります。
菱形をリピートグリッドにして、ドラッグ操作で横に複製します。複製する数は、必要に応じて調整します。できあがる波線の山の数は、複製した数より 2 つ少なくなります。
リピートグリッドの間隔を縮めて菱形を重ねます。このときの菱形の輪郭が波線の元になります。波の大きさは後から調整できるため、重ねる間隔は適当で大丈夫です。菱形を重ねたらリピートグリッドを解除します。
シェイプをパスに変換
重なって並ぶ菱形をすべて選択し、プロパティインスペクタの「合体アイコン」をクリックして合体します。続けて「パスに変換」すると、輪郭が結合してひとつのパスになります。
下側のパスを削除するためにオープンパスに変換します。Enter キーでパス編集モードにしてから、Opt + Del(Mac)または Alt + Del(Windows)キーを押すと、パスの始点と終点の間が開きます。
続けて下側のアンカーポイントをすべて選択し、削除します。
波線の見た目を調整
すべての角をダブルクリックして曲線にします。両端のアンカーポイントは削除して、曲線を揃えます。
拡大縮小により波の高さを調整して、好みの波に調整できます。塗りのチェックボックスはオフにして、線だけが表示されるようにします。
波線を伸ばしたい場合は、リピートグリッドで繰り返し配置するなどの方法が使えます。