Lesson

Adobe XD でシェイプを加工してつくる装飾表現 - 全3回

菱形を合体して波線をつくる

このレッスンでは、Adobe XD の描画ツールを使って波線をつくる方法を解説します。

Adobe XD を起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選択して「開く」をクリックします。ファイルが開くと、動画と同じサンプル画面が表示されます。

ベースの繰り返しパターンを作成

ツールバーの多角形ツールを選択し、アートボード上でドラッグして三角形を描きます。プロパティインスペクタで角の数を 4 にすると、三角形が菱形になります。

菱形をリピートグリッドにして、ドラッグ操作で横に複製します。複製する数は、必要に応じて調整します。できあがる波線の山の数は、複製した数より 2 つ少なくなります。

リピートグリッドの間隔を縮めて菱形を重ねます。このときの菱形の輪郭が波線の元になります。波の大きさは後から調整できるため、重ねる間隔は適当で大丈夫です。菱形を重ねたらリピートグリッドを解除します。

シェイプをパスに変換

重なって並ぶ菱形をすべて選択し、プロパティインスペクタの「合体アイコン」をクリックして合体します。続けて「パスに変換」すると、輪郭が結合してひとつのパスになります。

下側のパスを削除するためにオープンパスに変換します。Enter キーでパス編集モードにしてから、Opt + Del(Mac)または Alt + Del(Windows)キーを押すと、パスの始点と終点の間が開きます。

続けて下側のアンカーポイントをすべて選択し、削除します。

波線の見た目を調整

すべての角をダブルクリックして曲線にします。両端のアンカーポイントは削除して、曲線を揃えます。

拡大縮小により波の高さを調整して、好みの波に調整できます。塗りのチェックボックスはオフにして、線だけが表示されるようにします。

波線を伸ばしたい場合は、リピートグリッドで繰り返し配置するなどの方法が使えます。