【Adobe XD】意外と簡単にできるシンプルなパスを使った活用術5つ

Adobe XDでのパスの使い方

みなさんこんにちは。Webデザイナーのしゅん(@shun_webdesign)です。

今回はXDを使ったパスの使い方について紹介します。

パスを自由自在に扱う

パスの使い方を知ることでXDで表現できる幅が広がります。

ツールが少ないため、できることも少ないと思われがちなXD。ペンツールやシェイプパスなど仕組みはとてもシンプルなので本記事を元に使い方を覚えてみましょう。

XDの初心者向けの記事です

合わせて読みたい

パスを使ったアニメーションについて一部紹介しています。

【Adobe XD】簡単3分で作れる!ローディングアニメーション

ペンツールを使って曲線を描く

今回は上記の画像のように曲線を使ったパスを作成します。

作成手順
  1. ペンツールを選択
  2. Shiftを押しながら、パスを描く
  3. ハンドルで曲線を調整する
STEP.1
ペンツールの選択

操作画面左からペンのアイコンをしたペンツールを選びます。

STEP.2
Shiftを押しながら、パスを描く

フリーハンドでもクリックでパスを描けます。

ですが、Shiftを押しながらマウスを操作することでパスの角度が15°ずつ操作できます。

STEP.3
ハンドルで曲線を調整する

一度描いてしまったパスの曲線をハンドルを使って調節できます。

パスのポイントをクリックするとハンドルが表示されるので角度や位置を調節します。

直線でパスを描いてしまった場合はダブルクリックで曲線になります。

「シェイプでマスク」を使って切り抜く

XDにはPhotoshopのようにキレイに切り抜くようなツールはありません。

ですが、ペンツール(P)を使って複雑な形のものでも切り抜くことができます。

先程紹介した曲線を使ってより細かくパスを描くことが可能です。

※Photoshopから切り抜くのが簡単であればそちらを使っていただいて構いません。

作成手順
  1. 対象の画像を用意
  2. ペンツールでなぞる
  3. 「シェイプでマスク」を使って切り取る
STEP.1
対象の画像を用意

今回はこのフリー素材を使って、パスを切り抜きます。

STEP.2
ペンツールでなぞる

対象の画像の上からペンツール(P)を使ってなぞります。

STEP.3
「シェイプでマスク」を使って切り取る

パスが画像の上に重なった状態で選択してください。

「シェイプでマスク」(Shift⌘M)を使って切り取ります。

線分を使ってキリトリ線を作る

パスは通常の繋がった線のみだけでなく、アピアランスの「線分」「間隔」を設定することでキリトリ線を作れます。

作成手順
  1. パスを描く
  2. アピアランスから「線分」「間隔」を設定する
STEP.1
パスを描く

パスを描きます。シェイプを配置しても大丈夫です。

STEP.2
「線分」「間隔」の設定

描いたパスを選んだ状態で、アピアランス「線分」「間隔」の数値を変更します。

今回のパスは「線分:10」「間隔:10」で設定しています。

パスのアウトライン化

パスをアウトライン化できます。パス以外にもシェイプやテキストにも使えます。

作成手順
  1. パスの作成
  2. パスをアウトライン化(⌥⌘O)
  3. 完了
STEP.1
パスの作成

パスを描きます。

今回は長方形のシェイプパスで配置します。

アウトライン化をわかりやすくするためにパスを太めに設定しています。

STEP.2
パスのアウトライン化

長方形を選択した状態でアウトライン化します。

オブジェクト→パス→パスのアウトライン(⌥⌘O)を選んでください。

STEP.3
完了

アウトライン化すると長方形のアウトライン化したレイヤーと長方形に分かれます。これでアウトライン完了です。

パスアニメーション

上記で紹介した方法を組み合わせて応用したパスのアニメーションを作成します。

作成手順
  1. レイヤー構成
  2. 画像にマスクをかける
  3. 背景に長方形を配置
  4. 円形パスの設定
  5. テキストをパス化
  6. 背景と線分を設定
  7. パス化したテキストの線分変更
  8. プロトタイプの設定について
STEP.1
レイヤー構成

以下画像のようにレイヤーを並べています。

パソコン(レイヤー:画像3)の画像を2つ重ね、一つはマスクをかけたもの、もう一つは最背面に配置。

STEP.2
画像にマスクをかける

パソコンの画像を複製し、最平面に配置。

もう一枚の画像をパスでなぞり、「シェイプでマスク(Shift⌘M)」をします。

STEP.3
背景に長方形を配置

アニメーション時に動くグラデーションの背景を作成します。

マスクをかけた画像のひとつ下に長方形を配置。

透過度を0にし、アートボード上の端に配置しておきましょう。

STEP.4
円形パスの設定

円形のシェイプを配置し、線にチェックを入れます。線分と間隔の値を入力します。

今回はサイズ:4、線分:0、間隔:480にしています。

円の大きさにもよりますが下記画像のように円のパスが見えなくなったら完了です。

この円を複製し、サイズを変えてもう一つ配置します。

STEP.5
テキストをパス化

「OK」の文字が浮かび上がるようにパス化します。

テキスト入力後、オブジェクト→パス→パスに変換(⌘8)をクリック。

円形パスと同様に線にチェックを入れ、線分と間隔の値を変更します。

パスが見えなくなるまで値を変更します。

本記事ではサイズ:3、線分:0、間隔:340と設定しました。

STEP.6
背景と線分を設定

自動アニメーションを設定する前に先程作成したアートボードを複製し、画像のように並べます。

先程アートボード端に配置した長方形をボードいっぱいに広げます。

円形のパスの線分の値を0から変更します。

本記事では線分:1050に設定します。パスが全て繋がって見える状態まで値を変更してください。

STEP.7
パス化したテキストの線分

先程のアートボードを複製し、同様にアートボードを並べます。

背景を最初の初期配置とは反対側になるように移動させます。

その後、パス化したテキストの線分の値を下記画像のように変更しましょう。

STEP.8
プロトタイプの設定について

プロトタイプは画面をクリックすると真ん中のボードに移行し、時間経過でボード最後尾まで自動アニメーションが動きます。

初期アートボード→トリガー「タップ」→2枚目アートボード→トリガー「時間」→3枚目アートボード

プロトタイプが設定したら完成です。お疲れさまでした。

まとめ

説明だけ読んでもわかりにくいという方は、ファイルをダウンロードして見ていただけるとわかりやすいです。

今回は以下について紹介しました。

  • ペンツールを使って曲線を描く
  • 「シェイプでマスク」を使って切り抜く
  • 線分を使ってキリトリ線を作る
  • パスのアウトライン
  • パスアニメーション

 

参考 Adobe XD の描画ツールとテキストツールAdobe

最後まで見ていただきありがとうございます!

是非記事の共有をよろしくお願いします。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA