このレッスンでは、Adobe XD の描画ツールを使って太陽線をつくる方法を解説します。
Adobe XD を起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選択して「開く」をクリックします。ファイルが開くと、動画と同じサンプル画面が表示されます。
基本の2種類の線を作成
初めに、ラインツールで線を垂直に描きます。次に、線を複製し、複製した線の上端をドラッグして短い線を作成します。
あとでまとめて線を修正できるように、長い線と短い線をそれぞれコンポーネントに変換します。
線を円周上に配置
作成したコンポーネントを 2 つとも選択して、複製します。複製した 2 つのコンポーネントを下に移動して、上下反転するように 180 度回転します。ここで下に移動した距離により、太陽線の直径が決定されます。
長い線同士、短い線同士をそれぞれグループ化します。そして、短い線のグループを 15 度回転します。回転中に Shift キーを押すと 15 度刻みでスナップします。
長い線と短い線のグループを両方選択して複製し、複製したグループを 30 度回転します。次に、4 つのグループ全部を選んで複製し、60 度回転します。最後に、4 つのグループの複製と回転をもう一度繰り返します。これで線が円周上に均等に並びます。
線のスタイルを調整
メインコンポーネントの中の線を選択し、パス編集モードにしてから、外側のアンカーポイントをドラッグすると、線を外側に伸ばせます。メインコンポーネントを編集することで、すべてのインスタンスをまとめて変更できます。
内側の長さを変えたい場合は、メインコンポーネントの高さの値で調整します。メインコンポーネントを選択して、高さのフィールドの数値の後ろに-10と入力して Enter キーを押すと、指定した分だけ線が短くなり、内側の空白のエリアが広がります。