"ペンツールの練習"の差分

7と36のリビジョン間の差分 (その間の編集: 29回)

ペンツールの練習

練習用ファイルを用いてペンツール(ペジェ曲線)の練習をします。

書き方のポイント

折れ線はクリック
曲線はドラッグ
ボタンを押す場所はいつでも線上
クローズパスは最初の点で終わる
オープンパスはEnterを押して終わる

練習

練習用ファイルのダウンロードは済んでいますか？

練習用ファイルをInkscapeで開き、次の指示にしたがって、灰色で示された線と同じになるようにペジェ曲線を描く練習をしなさい。

練習の曲線は１２個あります。
それぞれ１筆で描くこと。
一部に説明用の線が加わっているが、灰色の線だけを描けばよい。

１）折れ線（クローズパス）

折れ線を描くにはつながっている順に角をクリックしていきます。

クローズパス（閉じた線）の場合は、１周するように順にクリックします。

右回りでも左回りでも、どの角から始めてもかまいません。
角を順にクリックしていき１周したら、最初にクリックした角を（最後に）もう一度クリックします。

最初にクッリクした点には小さな□が表示されます、最後はこれに合わせてクリックすればよい。 □の位置に合っているときは□が赤く表示されます。

描き方

ABCの順にクリックし、最後にもう一度、Aの点をクリックします。

２）折れ線（オープンパス）

オープンパス(輪になっていない端のある線)の場合です。つながっている順にクリックするのは、１の場合と同じです。

最後にEnterキーを押して線を終わります。

描き方

5つの点をつながっている順にクリックします。
Enterキーを押します。

３）曲線（概要）

折れ線を描くにはクリックしましたが、曲線を描くにはドラッグします。

ドラッグを始める位置は線上
ドラッグの方向は接線(進行)方向

ドラッグの向きと量を緑色の矢印で示してあります。

描き方

Aの矢印の根元から先までドラッグします(根本で押し、先で離す)
Bの矢印の根元から先までドラッグします
Cの矢印の根元から先までドラッグします
Dの矢印の根元から先までドラッグします
Eの矢印の根元から先までドラッグします
Enterキーを押します。

４）曲線（ドラッグして曲線の形に合わせる）

描き始めのドラッグは緑の矢印で示してあります。終わりの点でのドラッグの量を調整します。

描き方

Aの矢印の根元から先までドラッグします
Bの点から点線の方向にドラッグします
- 描きたい曲線の形に一致したところでボタンを離す
Enterキーを押します

B点でドラッグを始めるときには、曲線の形は正しくありません。

５）曲線（ドラッグ量の練習）

途中にもノードがあります。 A点のドラッグは緑の矢印で示してあります。 B点、C点でのドラッグ量を調整します。

描き方

Aの矢印の根元から先までドラッグします
Bの点から点線の方向にドラッグします
- 描きたい曲線の形に一致したところでボタンを離す
Cの点から点線の方向にドラッグします
- 描きたい曲線の形に一致したところでボタンを離す
Enterキーを押します

中間のノードでのドラッグ方向が、ノードの前後で共用されます。

６）クローズパス（ドラッグ方向とドラッグ量の練習）

途中の点でのドラッグ方向は示してありませんが、接線(進行)方向にドラッグします。

描き方

Aの矢印の根元から先までドラッグします
Bの点から接線(進行)方向にドラッグします
- 描きたい曲線の形に一致したところでボタンを離す
Cの点から接線(進行)方向にドラッグします
- 描きたい曲線の形に一致したところでボタンを離す
Aの点から接線(進行)方向にドラッグします
- 描きたい曲線の形に一致したところでボタンを離す

クローズパスの場合、最後にもういちど最初の点でドラッグします。

７）角のあるクローズパス

角が１つだけあるクローズパスの場合は、６と同様に角の点から描き始めるとよい。

途中のノードは３個程度。

８）角の無いクローズパス

ちょっと複雑な曲線の例です。

角の無いクローズパスでは描きやすい部分から始めます。例えばA点。

カーブのきついBC間は難しいかもしれません。カーブの入り口と出口にあたるB点とC点付近にノードを置くつもりで描きます。

描き方

A点から進行方向にドラッグします
A点とB点の間の曲線上で進行方向にドラッグします
B点付近で進行方向にドラッグします
C点付近で進行方向にドラッグします
C点とA点の間の曲線上で進行方向にドラッグします
A点から進行方向にドラッグします

C点とA点の間にもうひとつノードを追加しても良い。

曲がり方の変化が大きい部分ではノード間が狭く、
滑らかな部分ではノード間が広くなります。

９）途中の角

曲線の途中に角がある例です。描き方は２通りあります。

描き方(1)はshiftキーを使って方向を変える方法です。
描き方(2)は角までの曲線を描いたあとで、端から線をのばす方法です。

描き方(1)

ノードの前後で方向線の向きを変えるときはshiftキーを使います。 shiftキーを押すとすでに描いた曲線は変えないで、次のノードの方向線だけを変えることができます。押す、離すタイミングに注意してください。
ＡからＢへドラッグ
ＣからＤへドラッグし曲線の形を合わせるが、まだボタンを離さない
shiftキーを押す（これも押したままで）
そのままＥの位置までドラッグ
マウスのボタンを離す
shiftキーを離す
F点からドラッグして曲線の形を合わせる
Enterキーを押す

描き方(2)

AC間の曲線を描いていったん確定した後、C点でつなぐように残りの曲線を描きます。

ＡからＢへドラッグ
ＣからＤへドラッグし曲線の形を合わせる
Enterキーを押す
ＣからＥの位置までドラッグ(Ｃの位置に表示される□から始めること)
最後の点からドラッグして曲線の形を合わせる
Enterキーを押す(１つのパスになっていることを確認すること)

１０〜１２）いろいろな曲線

ノードをどこに置いたらよいかも含めて考え、練習しましょう。

考え方

曲線上の点では必ずドラッグする。
ドラッグは進行方向(接線方向)に行う。
次のノードは曲線の形がすこし違っているが、ドラッグで一致させられるところにとる。

最初の点から進行方向にドラッグ

線上にマウスを置いてみて、描かれる曲線を予想する。ここで右方向にドラッグすると、曲線は左に膨らむので一致できそうだ。

ドラッグ中。

同様に次のノードを考える。

ペンツールの練習 (最終更新日時 2016-10-25 00:55:01 更新者 masahiko)

-  ⇤ ← 2014-08-19 02:26:28時点のリビジョン7 → 
  サイズ: 6667
  編集者: masahiko
  コメント:
+   ← 2016-10-25 00:55:01時点のリビジョン36 → ⇥
  サイズ: 8669
  編集者: masahiko
  コメント:
-削除された箇所はこのように表示されます。
+追加された箇所はこのように表示されます。
 行 1:
-#acl All:
+## page was renamed from ペンツールの練習14
-行 14:
+行 13:
-=== 練習用ファイル ===
次のファイルをダウンロードし保存しなさい。
+=== 練習 ===
練習用ファイルのダウンロードは済んでいますか？
-行 17:
+行 16:
- . [[attachment:rensyu14.svg]]

----
=== 練習 ===

保存したファイルをInkscapeで開き、
+練習用ファイルをInkscapeで開き、
-行 25:
+行 19:
- . それぞれ'''１筆で描く'''こと。
+ . それぞれ<<Color(red:１筆で)>>描くこと。
-行 30:
+行 24:
- . {{attachment:path01.png}}
 . ABCの順にクリックし、'''最後にもう一度'''、Aの点をクリックします。
-行 35:
+行 28:
-最初にクッリクした点には小さな□が表示されます、最後はこれに合わせてクリックすればよい。
+最初にクッリクした点には小さな'''□'''が表示されます、最後はこれに合わせてクリックすればよい。
□の位置に合っているときは□が赤く表示されます。
 . {{attachment:path01.png}}
描き方
 . ABCの順にクリックし、'''最後にもう一度'''、Aの点をクリックします。
-行 44:
+行 41:
- . 5つの点を順にクリックします。
+描き方
 . 5つの点をつながっている順にクリックします。
-行 48:
+行 46:
-==== ３）曲線（ノードは両端の２つ） ====
曲線を描くにはノードから方向線の方向（かつ進行方向）にドラッグします。
 . AとCがノードで、方向線を緑色で示しています。
 . Aからの進行方向を表す方向線の先端がBです。
 . Cからの進行方向を表す方向線の先端がDです。
+==== ３）曲線（概要） ====
折れ線を描くにはクリックしましたが、
曲線を描くには<<Color(red:ドラッグ)>>します。

 * ドラッグを始める位置は線上
 * ドラッグの方向は接線(進行)方向

ドラッグの向きと量を緑色の矢印で示してあります。
-行 55:
+行 56:
-. AからBまでドラッグし、
 1. 続いてCからDまでドラッグします。
   . CからDへドラッグする途中でも曲線が表示されるので、目的の形に一致するところでボタンを離します。
 1. オープンパスですからEnterキーを押して終わります。
----
==== ４）曲線（ノードが３つ） ====
３つのノードからなる曲線です。
 . AからCまでと、CからEまでの２つのセグメントが滑らかにつながっています。
 . ３番の方法を続けて行うように描きます。
 . {{attachment:rensyu4.png}}
描き方
 1. AからBまでのドラッグ
 1. CからDまでドラッグ
   . A～C間の形に合ったところでボタンを離す
 1. Eから進行方向へドラッグ
   . C～E間の形に合ったところでボタンを離す
 1. Enterキーを押します
中間のノードでのドラッグ方向が、前後で共用されます。
+. Aの矢印の根元から先までドラッグします(根本で押し、先で離す)
 1. Bの矢印の根元から先までドラッグします
 1. Cの矢印の根元から先までドラッグします
 1. Dの矢印の根元から先までドラッグします
 1. Eの矢印の根元から先までドラッグします
 1. Enterキーを押します。
-行 75:
+行 64:
-==== ５）曲線（複数のセグメント） ====
ノード(曲線上の点)の数が増えても描き方は同じです。
 * ノードの位置を青い四角で、方向線を緑で示しています。
 . {{attachment:rensyu5.png}}
+==== ４）曲線（ドラッグして曲線の形に合わせる） ====
描き始めのドラッグは緑の矢印で示してあります。
終わりの点でのドラッグの量を調整します。
 . {{attachment:path04.png}}
-行 80:
+行 69:
-. A点から進行方向へ少しだけドラッグ
 1. B点からドラッグ
   . AB間の形に合ったところでボタンを離す
 1. ３番目の点からドラッグ
   . 曲線の形に合ったところでボタンを離す
 1. ４番目の点からドラッグ
   . 曲線の形に合ったところでボタンを離す
 1. 端の点からドラッグ
   . 曲線の形に合ったところでボタンを離す
 1. Enterキーを押す
+. Aの矢印の根元から先までドラッグします
 1. Bの点から点線の方向にドラッグします
   . 描きたい曲線の形に一致したところでボタンを離す
 1. Enterキーを押します

B点でドラッグを始めるときには、曲線の形は正しくありません。
-行 91:
+行 77:
-==== ６）角のあるクローズパス ====
角が１つだけあるクローズパスの例です。
 . {{attachment:rensyu6.png}}
 . 角の点Aを描き始めにすると描きやすい。
 . A,B,Cの順にドラッグし、最後にもう一度A点でドラッグして終わる。
+==== ５）曲線（ドラッグ量の練習） ====
途中にもノードがあります。
A点のドラッグは緑の矢印で示してあります。
B点、C点でのドラッグ量を調整します。
 . {{attachment:path05.png}}
描き方
 1. Aの矢印の根元から先までドラッグします
 1. Bの点から点線の方向にドラッグします
   . 描きたい曲線の形に一致したところでボタンを離す
 1. Cの点から点線の方向にドラッグします
   . 描きたい曲線の形に一致したところでボタンを離す
 1. Enterキーを押します

中間のノードでのドラッグ方向が、ノードの前後で共用されます。
-行 97:
+行 93:
-==== ７）角の無いクローズパス ====
+==== ６）クローズパス（ドラッグ方向とドラッグ量の練習） ====
途中の点でのドラッグ方向は示してありませんが、
接線(進行)方向にドラッグします。

 . {{attachment:path06.png}}
描き方
 1. Aの矢印の根元から先までドラッグします
 1. Bの点から接線(進行)方向にドラッグします
   . 描きたい曲線の形に一致したところでボタンを離す
 1. Cの点から接線(進行)方向にドラッグします
   . 描きたい曲線の形に一致したところでボタンを離す
 1. Aの点から接線(進行)方向にドラッグします
   . 描きたい曲線の形に一致したところでボタンを離す

クローズパスの場合、最後にもういちど最初の点でドラッグします。

----
==== ７）角のあるクローズパス ====
角が１つだけあるクローズパスの場合は、
６と同様に角の点から描き始めるとよい。

途中のノードは３個程度。

 . {{attachment:path07.png}}

----
==== ８）角の無いクローズパス ====
-行 99:
+行 121:
- . {{attachment:rensyu7.png}}
 . 描きやすそうな点から描き始めます。
   . A点のようにあまり曲がっていないところから始めると描きやすい。
 . どの点でも'''少しずつドラッグ'''して、確認しながら進めます。
-行 104:
+行 122:
- * 急カーブではその入り口と出口にあたる点（B,C）にノードを置くのがこつです。
 . カーブの真ん中にノードを置くと描きにくくなります。
+角の無いクローズパスでは描きやすい部分から始めます。例えばA点。

カーブのきついBC間は難しいかもしれません。
カーブの入り口と出口にあたるB点とC点付近にノードを置くつもりで描きます。

 . {{attachment:path08.png}}

描き方
 1. A点から進行方向にドラッグします
 1. A点とB点の間の曲線上で進行方向にドラッグします
 1. B点付近で進行方向にドラッグします
 1. C点付近で進行方向にドラッグします
 1. C点とA点の間の曲線上で進行方向にドラッグします
 1. A点から進行方向にドラッグします

C点とA点の間にもうひとつノードを追加しても良い。

 * 曲がり方の変化が大きい部分ではノード間が狭く、
 * 滑らかな部分ではノード間が広くなります。
-行 107:
+行 143:
-==== ８）途中の角 ====
+==== ９）途中の角 ====
-行 109:
+行 145:
- . ノードの前後で方向線の向きを変えるときは'''shiftキー'''を使います。
 . shiftキーを押すとすでに描いた曲線は変えないで、次のノードの方向線だけを変えることができます。
 . 押す、離すタイミングに注意してください。
 . {{attachment:rensyu8.png}}
+描き方は２通りあります。

 * 描き方(1)は'''shiftキー'''を使って方向を変える方法です。
 * 描き方(2)は角までの曲線を描いたあとで、端から線をのばす方法です。

 . {{attachment:path09.png}}
-行 114:
+行 153:
+ ノードの前後で方向線の向きを変えるときは'''shiftキー'''を使います。
 shiftキーを押すとすでに描いた曲線は変えないで、次のノードの方向線だけを変えることができます。
 押す、離すタイミングに注意してください。
-行 120:
+行 164:
-. 最後の点からドラッグして曲線の形を合わせる
+. F点からドラッグして曲線の形を合わせる
-行 122:
+行 166:
-行 123:
+行 168:
+AC間の曲線を描いていったん確定した後、C点でつなぐように残りの曲線を描きます。
-行 126:
+行 174:
-. ＣからＥの位置までドラッグ(Ｃの位置に表示される□から始める)
+. ＣからＥの位置までドラッグ(Ｃの位置に表示される'''□'''から始めること)
-行 130:
+行 178:
-==== ９〜１２）いろいろな曲線 ====
+==== １０〜１２）いろいろな曲線 ====
-行 137:
+行 185:
- * 次のノードはドラッグした量の倍程度進んだあたりにとる。
  . {{attachment:rensyu10.png}}
+ * 次のノードは曲線の形がすこし違っているが、ドラッグで一致させられるところにとる。

最初の点から進行方向にドラッグ
 . {{attachment:path10.png}}
線上にマウスを置いてみて、描かれる曲線を予想する。
ここで右方向にドラッグすると、曲線は左に膨らむので一致できそうだ。
 . {{attachment:path11.png}}
ドラッグ中。
 . {{attachment:path12.png}}
同様に次のノードを考える。
 . {{attachment:path13.png}}

Quick Links

Search Wiki

Page Tools