Adobe XDをもっと使いこなすヒント！ 第34回 方眼グリッドでパスの描画を分かりやすく
Adobe XDをもっと使いこなすヒント！
この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、パスツールと方眼グリッドを組み合わせた使用例を紹介する12のツイートを取り上げます。
Tip 1. 方眼グリッド上でパスを描く
#adobexd #protip Turn on your artboard’s square grids while drawing with the pen tool, as points will snap to the grid, making precision and symmetry that much easier. #adobexd pic.twitter.com/UtQXBU3509
— Elaine Chao (@elainecchao) March 29, 2019
アートボードを選択して、プロパティインスペクタから方眼グリッドの表示をオンにすると、ペンツールがグリッドにスナップするため正確な描画が可能になります。上のビデオのようにグリッドの点をクリックして繋げば、左右対称な三角形の作成も簡単ですｗ。
方眼の大きさはプロパティインスペクタ内で設定できます。
#adobexd #protip While you’re editing, you can move any of the points by dragging them. If you want to move the start point, hold down Cmd when first selecting the start point. Let go of it while dragging to enable snapping. @adobexd pic.twitter.com/l6niNmu7f5
— Elaine Chao (@elainecchao) April 12, 2019
編集中にアンカーポイントを移動したい場合は、ポイント上にマウスを移動してドラッグします。開始点をドラッグするときはCmd (Mac) またはCtrl (Win)キーを押しながらドラッグします。
押し忘れてパスを閉じてしまった場合はUndoしてからやり直しましょう。
#adobexd #protip Once you’re drawing, you don’t have to always close your path. Once you’ve dropped your last point, press Escape to complete the path and stop drawing. @adobexd pic.twitter.com/iCRBxg9Q5a
— Elaine Chao (@elainecchao) April 5, 2019
パスを閉じずに描画を終了したい場合は、最後のポイントを配置した後にEscキーを押します。
続きを描きたい場合はペンツールを選択して（またはPキーを押して）、目的のアンカーポイントをクリックします。
Tip 2. パスにアンカーポイントを追加／削除する
#adobexd #protip Once you have a path object selected, double click to edit its points. You can then select and adjust any of the path’s points. @adobexd pic.twitter.com/PQi9kLANxE
— Elaine Chao (@elainecchao) April 1, 2019
パスオブジェクトを作成後にアンカーポイントを編集したい場合は、オブジェクトをダブルクリックします。この状態でアンカーポイントをドラッグすると位置を変更することができます。
#adobexd #protip Once you’re in path edit mode, hover over the path and click to add additional anchor points. @AdobeXD pic.twitter.com/FrQo2KA6m3
— Elaine Chao (@elainecchao) April 2, 2019
パス上にマウスを移動すると青い円が表示されます。そのままクリックすると、アンカーポイントを追加できます。
#adobexd #protip When editing your path, select any anchor point and press Delete to remove it from the path. @adobexd pic.twitter.com/jGrFwwalgL
— Elaine Chao (@elainecchao) April 17, 2019
既存のアンカーポイントを削除したい場合は、削除するアンカーポイントを選択してからDelキーを押します。
#adobexd #protip When you’re in the middle of drawing a path, delete the last anchor point by holding down Alt/Opt while pressing delete. @adobexd pic.twitter.com/AGwDfbOBK2
— Elaine Chao (@elainecchao) April 18, 2019
なお、パスを編集中に最後のアンカーポイントを削除することができます。Alt+Opt (Mac) またはAlt+Shift (Win)キーを押しながらDelキーを押下します。
Tip 3. ペンツールでベジェ曲線を描く
#adobexd #protip Click and drag to draw a curve instead of a point while using the pen tool. @adobexd pic.twitter.com/pv7LFnfX6F
— Elaine Chao (@elainecchao) April 15, 2019
アンカーポイントをクリックした後、ドラッグすると曲線を描くことができます。
#adobexd #protip While closing a path using the pen tool, click and drag on the start point to close the path and convert it to a curve at the same time. @adobexd pic.twitter.com/5pvjPSyoWQ
— Elaine Chao (@elainecchao) April 16, 2019
開始点をカーブにするには、パスを閉じる際に、開始点をクリックしてからそのままドラッグ操作をします。
Tip 4. 角をベジェ曲線に変える
#adobexd #protip Once you’re editing the path, double click any of the anchor points to convert from hard angle to curve. @adobexd pic.twitter.com/alMlNgUjEO
— Elaine Chao (@elainecchao) April 3, 2019
編集後のパスオブジェクトのアンカーポイントをダブルクリックすると、角を曲線に変えることができます。
もう一度ダブルクリックすれば角に戻せます。
Tip 5. ベジェ曲線の形状を調整する
#adobexd #protip Once you have converted a corner to a curve, you can move the control points in any direction to increase the curve or change its angle. @adobexd pic.twitter.com/S81ML6ZMRp
— Elaine Chao (@elainecchao) April 8, 2019
曲線に変換したアンカーポイントには操作用のバーが表示されます。ドラッグしたり傾けることで、カーブの形状を変更することができます。
Shiftキーを押しながら傾きを変えると、15°ずつの変更になります。
#adobexd #protip Unlink the control points in your Bezier curve by holding down the Alt/Opt key when you first drag. After the initial drag, the two control points will be unlinked. @adobexd pic.twitter.com/7DZaWFCADJ
— Elaine Chao (@elainecchao) April 10, 2019
左右非対称な曲線にしたい場合は、Alt+Opt (Mac) またはAlt+Shift (Win)キーを押しながら曲線の形状を変更すると、片側だけを操作できるようになります。
いかがでしたか？
これは便利そうだ！という使い方はあったでしょうか？
次回をお楽しみに！