【簡単】AdobeXDで点線を作る方法を紹介!

【簡単】AdobeXDで点線を作る方法を紹介!

takato(@n8takato)です!

XDで点線を作る方法を知りたい。

この記事では上記の課題に向けて作成しています。

XDでwebデザインを制作していると点線を活用する機会があります。

実はXDでは簡単に点線を作成することが出来ます。

この記事ではXDで点線を作る方法を紹介します。

この記事を読むメリット

  • XDで点線を作る簡単な方法がわかる

この記事を書いた人

この記事を書いた僕はこんな人です!

  • 都内制作会社でwebデザイナーとして勤務
  • webデザイナー歴2年目のひよっこ
  • web制作現場で学んだことを発信している人
目次

XDで点線を作成する方法

早速XDで点線を作成する簡単な方法を紹介します。

XDで点線を作成する手順

  1. 「線ツール」で直線を作成する
  2. 作成した直線を点線に修正する

「線ツール」で直線を作成する

始めに点線の元になる直線を作成します。

①左側のメニューから「線ツール」を選択します。

①左側のメニューから「線ツール」を選択します。
線ツールの選択

②アートボード上に直線を作成します。

②アートボード上に直線を作成します。
直線の作成

作成した直線を点線に修正する

続いて作成した直線を点線に修正します。

③直線を選択した状態で右側の「」から修正します。

③直線を選択した状態で右側の「線」から点線に修正します。
点線へ修正する

サイズ」「線分」「間隔」の3つを修正できます。

サイズ

線の太さを調整出来ます。

線分

点線の長さを調整出来ます。

間隔

点線の間隔を調整出来ます。

点線が完成しました。
点線の完成

(補足)直線以外の図形も点線に出来る

直線以外にも長方形や円などの図形を点線にすることが出来ます。

やり方は点線にしたい図形を選択して点線に修正するだけです。

様々な図形を点線に修正することが出来ます。
様々な図形を点線に修正出来る

XDで点線を作成するのは簡単!

最後にまとめです。

  1. 点線にしたい図形をアートボード上に作成する
  2. 右側の「線」メニューから点線に修正する

XDでは簡単に点線が作成出来ます。

今後作成する機会があれば実施してみてください!

XDに関する他の記事はこちら

あわせて読みたい
【AdobeXD】文字をアーチ状にする方法を紹介! XDで文字をアーチ状にする方法を知りたい この記事は上記の課題に向けて作成しています。 XDでデザイン制作をしていると文字をアーチ状にしたくなる時があります。 この...
あわせて読みたい
【2022年版】AdobeXDで波線を作る方法を紹介! XDで波線を作る方法を知りたい この記事は上記の課題に向けて作成しています。 web制作をしていると波線を作ることがたまにあります。 僕も最近波線を作成しました。 そ...
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次