トップ > 知っておきたい機能 > パス関連 >
線を引いて新規パスを作成する

新たにパスを作成する方法

基礎知識 > オブジェクトについて > シェイプやテキストはパスに変換できるで説明したように、シェイプとテキストはパスに変換することができます。 この記事では、シェイプやテキストから変換する以外の方法、つまり、新たに線を引いてパスを作成する方法について解説します

新たに線を引くには、鉛筆ツールを使う方法・ペンツールを使う方法・カリグラフィツールを使う方法の3種類があります。 それぞれについて解説していきます。

鉛筆ツールでのパスの作成

まずは、鉛筆ツールでのパスの作成について解説します。 鉛筆ツールは、フリーハンド線を引くためのツールです。 マウスカーソルの動きに沿って線が引かれるため、マウスカーソルが蛇行すれば引かれる線も蛇行します

なお、フリーハンド線だけでなく、クリック位置とクリック位置を結ぶ直線を引くこともできます

では、実際に鉛筆ツールでパスを作成してみましょう。

1. 鉛筆ツールを選択
1. 鉛筆ツールを選択

上図のように画面左部にあるツールボックスから鉛筆ツールを選択します(またはキーボードのF6(またはP)を押します)。

では、まずは直線を引いてみましょう。 直線はクリックで引くことができます。 始点と終点をマウスの左ボタン(マウスの左ボ>タン)でクリックします。

なお、2回目のクリックで操作が確定しますので、Enterキーを押して確定するというような操作は不要です

2. クリックでつなげる
2. クリックでつなげる

上図のように2箇所でクリックします。

3. クリック位置をつなぐ直線が引かれる
3. クリック位置をつなぐ直線が引かれる

上図のようにクリック位置をつなぐ直線が引かれます。 このように、直線を引く場合はクリックで操作します。

  
鉛筆ツールで引かれる線は、黒色で幅は1.0ピクセルです。

続いてはフリーハンド線を引いてみましょう。 フリーハンド線はドラッグで引くことができます。 始点から終点へマウスの左ボタン(マウスの左ボ>タン)でドラッグします。

なお、ドラッグを終えると操作が確定しますので、Enterキーを押して確定するというような操作は不要です

4. 描きたい形状にドラッグ
4. 描きたい形状にドラッグ

上図のように描きたい形状にドラッグします。 赤色の矢印はドラッグの動きを表しています。

5. マウスカーソルの動きに沿ったフリーハンド線が引かれる
5. マウスカーソルの動きに沿ったフリーハンド線が引かれる

上図のようにドラッグした場合にはマウスカーソルの動きに沿ったフリーハンド線が引かれます。 ペンタブレットやタブレットPCのようにペン入力できるならキレイ線を引けますが、マウス操作ではこのようにブレて蛇行した線になります。

なお、引かれたフリーハンド線は、先ほどの直線とは別のパスです。 現状、直線のパスとフリーハンド線のパスの2つがキャンバス上に存在する状態です。

  
SHIFTキーを押しながらクリックまたはドラッグを開始することで既存のパスに追加で線を引くことができます。 つまり、サブパスが作成されます。

では続いて点を打ってみましょう。 鉛筆ツールには、直線・フリーハンド線を引くだけでなく、点を打つ機能も用意されています

6. CTRLキーを押しながらクリック
6. CTRLキーを押しながらクリック

上図のようにCTRLキーを押しながらマウスの左ボタン(マウスの左ボ>タン)でクリックします。

7. 点が打たれる
7. 点が打たれる

上図のように点が打たれます。 小さくて見づらいですが、円形の点です

今度はCTRL + SHIFTキーを押しながらマウスの左ボタン(マウスの左ボ>タン)をクリックしてみましょう。

8. CTRL + SHIFTキーを押しながらクリック
8. CTRL + SHIFTキーを押しながらクリック

上図のようにCTRL + SHIFTキーを押しながらマウスの左ボタン(マウスの左ボ>タン)でクリックします。

9. 大きな点が打たれる
9. 大きな点が打たれる

上図のように大きな点が打たれます。 SHIFTキーも同時に押すことで、標準の2倍の大きさの点が打たれます

なお、これらの2つの点はパスではありません。 これらの2つの点はパスではなく、円のシェイプです。 鉛筆ツールはパスを作成するためのツールですが、点を打つ操作ではパスではなく円のシェイプが作成されます。

  
CTRL + ALTキーを押しながらマウスの左ボタン(マウスの左ボ>タン)でクリックするとランダムな大きさの点が打たれます。 その場合の点も、もちろん円のシェイプです。

では次に、成形を有効にして直線を引いてみましょう。

10. ツールコントロールの成形に "円/弧" を指定する
10. ツールコントロールの成形に "円/弧" を指定する

上図のように画面上部にあるツールコントロールで成形に "円/弧" を指定します。

では、始点と終点をマウスの左ボタン(マウスの左ボ>タン)でクリックします。

11. クリックでつなげる
11. クリックでつなげる

上図のように2箇所でクリックします。

12. クリック位置をつなぐ直線が引かれる
12. クリック位置をつなぐ直線が引かれる

上図のようにクリック位置をつなぐ直線が引かれますが、線の形状が少し今までとは違っています。 始点と終点は線が細いですが、中間地点では線が太くなっています。

これは、成形に "円/弧" を指定にして線を引いたためです。 実は、この線は円を伸ばした形状、つまり楕円で描かれています。

Inkscapeには『パスエフェクト』と呼ばれる機能があり、パスにリアルタイムで様々な視覚効果を与えることができます。 成形を有効にして線を引くと『パスに沿うパターン』という種類のパスエフェクトが自動的に追加されます。

  
パスエフェクトは、画面上部のプルダウンメニューの"パス(P)" -> "パスエフェクト(F)..."を実行してパスエフェクトダイアログを開くことで編集することができます。

フリーハンド線の簡略化

鉛筆ツールで引いたフリーハンド線には不要なノードがたくさん作られると思います。 特に、蛇行しやすいマウス操作では顕著です。

Inkscapeにはパスの簡略化の機能があり、不要なノードを削除して整理することができます。 詳細については、知っておきたい機能 > パス関連 > パスの形状の簡略化を参照してください。

ペンツールでのパスの作成

続いて、ペンツールでのパスの作成について説明します。 ペンツールは直線や曲線を引くためのツールで、鉛筆ツールとは異なり3点以上を結ぶ線を引くことができます

つまり、鉛筆ツールのように2回目のクリックやドラッグ終わりで操作が確定することはありません。 線を引き終わるには明示的な操作が必要です。 Enterキーを押すか、マウスの右ボタン(マウスの右ボタン)のクリックで確定します。

  
最初のノードをクリックしてパスを閉じることでも確定させることができます。

なお、ペンツールでは、クリックとドラッグを組み合わせて線を引くこともできます。 では、実際にペンツールでパスを作成してみましょう。

1. ペンツールを選択
1. ペンツールを選択

上図のように画面左部にあるツールボックスからペンツールを選択します(またはキーボードのSHIFT + F6(またはB)を押します)。

まずは、クリックの操作のみで線を引いてみます。 線をつなげたい場所をマウスの左ボタン(マウスの左ボ>タン)でクリックし、最後にEnterキーで確定します

2. クリックでつなげる
2. クリックでつなげる

上図のように3箇所でクリックし、最後にEnterキーを押します

3. クリック位置をつなぐ直線が引かれる
3. クリック位置をつなぐ直線が引かれる

上図のようにクリック位置をつなぐ直線が引かれます。 このように、直線を引く場合はクリックで操作します

  
ペンツールで引かれる線は、黒色で幅は1.0ピクセルです。

では次に、ドラッグの操作も組み合わせてみましょう

4. クリックとドラッグでつなげる
4. クリックとドラッグでつなげる

上図のように始点をマウスの左ボタン(マウスの左ボ>タン)でクリックし、続いて少し下方の位置からマウスの左ボタン(マウスの左ボ>タン)で右方向へドラッグし、最後に少し上方をマウスの左ボタン(マウスの左ボ>タン)でクリックし、最後にEnterキーで確定します。 赤色の矢印はドラッグの動きを表しています。

5. クリック位置をつなぐ曲線が引かれる
5. クリック位置をつなぐ曲線が引かれる

上図のようにクリック位置をつなぐ曲線が引かれます。

なお、引かれた曲線は、先ほどの直線とは別のパスです。 現状、直線のパスと曲線のパスの2つがキャンバス上に存在する状態です。

  
SHIFTキーを押しながらクリックまたはドラッグを開始することで既存のパスに追加で線を引くことができます。 つまり、サブパスが作成されます。

ではここで、ドラッグの方向と引かれた曲線の関係について説明しておきます。 つまり、どういう操作をしたら、どういう線が引かれるのかについての解説です

ペンツールのままでは説明しにくいのでノードツールに切り替えます。

6. ノードツールを選択
6. ノードツールを選択

上図のように画面左部にあるツールボックスからノードツールを選択します(またはキーボードのF2(またはN)を押します)。

7. 3つのノードと2つのセグメント
7. 3つのノードと2つのセグメント

上図のように表示が変化し、3つのノードとノードをつなぐ2つのセグメントが表示されます。 見て分かる通り、クリック位置とドラッグ開始位置の計3箇所にノードが作成されています。

注目すべきは、ドラッグ開始位置に作られた2つめのノードです。 このノードの両側の線は、左から入って右へ抜けています。 右方向へドラッグしたため、その方向へ線が伸びているということです。 つまり、線を伸ばしたい方向へドラッグする必要があるということです

では、ペンツールの説明に戻ります。

8. ペンツールを選択
8. ペンツールを選択

上図のように画面左部にあるツールボックスからペンツールを選択します(またはキーボードのSHIFT + F6(またはB)を押します)。

では、クリックで線を引いてみます。 ただし、確定はしません

9. クリックでつなげる
9. クリックでつなげる

上図のように2箇所でクリックし、確定はせずにいてください

10. 線引き中
10. 線引き中

上図のように線引き中は、すでに引かれた線は緑色で、これから引かれる線は赤色で描かれます

現在、Inkscapeは3つめのクリックまたは確定を待っている状態です。 この状態では、キーボードのカーソルキー(↑↓←→)を使って、最後に追加されたノードを移動させることができます

では、キーボードのカーソルキーの上(↑)を押してください。 キーを押している間、2つめのノードが上方へ移動します。

11. 2つめのノードが上方へ移動する
11. 2つめのノードが上方へ移動する

上図のように2つめのノードが上方へ移動します。 このように、キーボードのカーソルキー(↑↓←→)を使って、最後に追加されたノードを移動させることができます。

  
SHIFTキーを押しながらだと大きく、ALTキーを押しながらだと細かく移動させることができます。

では次に、キーボードのDELETEキーを押してみてください

12. 2つめのノードが削除される
12. 2つめのノードが削除される

上図のように2つめのノードが削除されます。 このように、キーボードのDELETEキーで最後に追加されたノードを削除することができます

では最後にキーボードのESCキーを押してください。

13. 線引きが中止される
13. 線引きが中止される

上図のように線引きが中止されます。 もちろん、パスは作成されていません。

  
鉛筆ツールでもESCキーで線引きを中止することができます。

次の記事へ

では、長くなりましたので、ここで一区切りします。 続きは次の記事を参照ください

ページの先頭へ
 

まとめ

鉛筆ツール・ペンツールを使うことで、線を引くようにパスを作成することができます。

鉛筆ツールではクリックすることで直線を、ドラッグすることでフリーハンド線を引くことができます。

操作/コマンド 説明
[鉛筆ツール]ボタン
(または)
F6
(または)
P
鉛筆ツールを選択する
(鉛筆ツール選択中)
マウスの左ボタン(マウスの左ボタン)
直線を引く
(鉛筆ツール選択中)
マウスの左ボタン(マウスの左ボタン)のドラッグ
フリーハンド線を引く
(線引き中に)
ESCキー
線引きを中断する

また、鉛筆ツールでは点を打つこともできます。

操作/コマンド 説明
(鉛筆ツール選択中)
CTRL + マウスの左ボタン(マウスの左ボタン)
点を打つ
※円のシェイプが作成される
(鉛筆ツール選択中)
SHIFT + CTRL + マウスの左ボタン(マウスの左ボタン)
通常の2倍の大きさの点を打つ
※円のシェイプが作成される
(鉛筆ツール選択中)
ALT + CTRL + マウスの左ボタン(マウスの左ボタン)
ランダムな大きさの点を打つ
※円のシェイプが作成される

ペンツールではクリックすることで直線を、ドラッグすることで曲線を引くことができます。

操作/コマンド 説明
[ペンツール]ボタン
(または)
SHIFT + F6
(または)
B
ペンツールを選択する
(ペンツール選択中)
マウスの左ボタン(マウスの左ボタン)
直線を引く
※Enterキーで確定する
(ペンツール選択中)
マウスの左ボタン(マウスの左ボタン)のドラッグ
曲線を引く
※Enterキーで確定する
(線引き中に)
カーソルキー(↑↓←→)
最後に追加されたノードを移動する
(線引き中に)
SHIFT + カーソルキー(↑↓←→)
最後に追加されたノードを大きく移動する
(線引き中に)
ALT + カーソルキー(↑↓←→)
最後に追加されたノードを細かく移動する
(線引き中に)
DELETEキー
最後に追加されたノードを削除する
(線引き中に)
ESCキー
線引きを中断する
ページの先頭へ