Adobe XDをもっと使いこなすヒント! 第34回 方眼グリッドでパスの描画を分かりやすく

Creative Cloud UI/UX & Web

この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、パスツールと方眼グリッドを組み合わせた使用例を紹介する12のツイートを取り上げます。

Tip 1. 方眼グリッド上でパスを描く

アートボードを選択して、プロパティインスペクタから方眼グリッドの表示をオンにすると、ペンツールがグリッドにスナップするため正確な描画が可能になります。上のビデオのようにグリッドの点をクリックして繋げば、左右対称な三角形の作成も簡単ですw。

方眼の大きさはプロパティインスペクタ内で設定できます。

編集中にアンカーポイントを移動したい場合は、ポイント上にマウスを移動してドラッグします。開始点をドラッグするときはCmd (Mac) またはCtrl (Win)キーを押しながらドラッグします。

押し忘れてパスを閉じてしまった場合はUndoしてからやり直しましょう。

パスを閉じずに描画を終了したい場合は、最後のポイントを配置した後にEscキーを押します。

続きを描きたい場合はペンツールを選択して(またはPキーを押して)、目的のアンカーポイントをクリックします。

Tip 2. パスにアンカーポイントを追加/削除する

パスオブジェクトを作成後にアンカーポイントを編集したい場合は、オブジェクトをダブルクリックします。この状態でアンカーポイントをドラッグすると位置を変更することができます。

パス上にマウスを移動すると青い円が表示されます。そのままクリックすると、アンカーポイントを追加できます。

既存のアンカーポイントを削除したい場合は、削除するアンカーポイントを選択してからDelキーを押します。

なお、パスを編集中に最後のアンカーポイントを削除することができます。Alt+Opt (Mac) またはAlt+Shift (Win)キーを押しながらDelキーを押下します。

Tip 3. ペンツールでベジェ曲線を描く

アンカーポイントをクリックした後、ドラッグすると曲線を描くことができます。

開始点をカーブにするには、パスを閉じる際に、開始点をクリックしてからそのままドラッグ操作をします。

Tip 4. 角をベジェ曲線に変える

編集後のパスオブジェクトのアンカーポイントをダブルクリックすると、角を曲線に変えることができます。

もう一度ダブルクリックすれば角に戻せます。

Tip 5. ベジェ曲線の形状を調整する

曲線に変換したアンカーポイントには操作用のバーが表示されます。ドラッグしたり傾けることで、カーブの形状を変更することができます。

Shiftキーを押しながら傾きを変えると、15°ずつの変更になります。

左右非対称な曲線にしたい場合は、Alt+Opt (Mac) またはAlt+Shift (Win)キーを押しながら曲線の形状を変更すると、片側だけを操作できるようになります。


いかがでしたか?
これは便利そうだ!という使い方はあったでしょうか?

次回をお楽しみに!

POSTED ON 2019.06.20