"パスの編集(練習)"の差分

8と34のリビジョン間の差分 (その間の編集: 26回)

パスの編集(練習)

このページではノードツール(ノードでパスを編集)を使ったパスの編集方法を説明しています。

上から２番めのツールがノードツールです。

パスの編集は手間のかかる作業です。修正量が多い場合には、描き直した方が早いでしょう。

直したいパスがあったとき、３つの方法が考えられます。

描き直す
一部分を描き直す
修正する

最小限の修正や、描きにくい箇所の細かな修正だけをここで述べている方法で行うのをすすめます。

ノードの数

パスはノードの集まりとして表されています。あまりにノードが多いパスは編集に向いていません。

鉛筆ツールで描くとき、スムージングの値が小さいとノードの多いパスができます。

スムージングの値を調整して、少ないノード数で描いた例です。比べてください。

ノード数を減らす機能もありますが、思ったとおりに働くとは限りません。このページの最後で説明しています。

概要

パスの編集には ノードツール(ノードでパスを編集)を使います。

ちょっとした修正で、美しい曲線が描けます。次の点を考えて行いましょう。

ノードの個数は適当か
ノードがどこに必要か
そこは角か曲線か

ノード編集ツールを選ぶと、画面上部のツールコントロールが次のように変わります。

準備

このページの練習ではスナップはOFFにしておきます。

スナップコントロールのON/OFFは矢印で示したアイコンで行います。

ONのとき

四角で囲まれ凹んだような表示

OFFのとき

フラットな表示

スナップは他の部品の位置にぴったりあわせるときに使います。

フリーハンドツールで描いたパス

フリーハンドツールを用いてシャツを描いてみました。

スムージングの値が小さいとき

スムージングの値を小さくして描くと細かく描けますが、がんばって描いたつもりでもギザギザの線になっています。

拡大してみるとよくわかります。

ノード編集ツールで選択してみると、パスを構成しているノードが表示されます。非常に沢山のノードでできていました。個々のノードを移動してパスを修正できることを述べましたが、こんなに沢山のノードを修正するのは大変です。

スムージングの値が大きいとき

スムージングの値を大きくすると滑らかに描けますが、がんばって描いても細かいところは無視されてこんなふうになります。

次の作業ができる程度にして、次の作業に進みます。

ノードを指定して減らす方法もあります。

減らしたいノードを選択しておいて、このボタンを押します。
（詳しくは後日解説します）

ノードを追加する

スムージングを大きくして描いた例では、ノードが少なすぎてこのままでは修正できません。

角にしたい場所にはノードが必要です。

ノードを追加したい位置を、ノードツールでダブルクリックして追加できます。矢印の３箇所に追加しました。

ノードの位置を修正する

全体の形を見ながら、ノードの位置を修正して形を整えます。

必ずノードをつかんで移動すること。
ノードを隣のノードと近づけすぎないようにすること。

方向線を調整する

ノードを選択すると、ノードから伸びている方向線(ハンドルともいう)が表示されます。ハンドルの先についている○を移動することで曲線の曲がり具合を調整できます。

少しずつ動かしてみましょう。

滑らかなノードでは片方のハンドルを動かすと、反対方向のハンドルも同時に動きます。

角ばったノードでは両側のハンドルは別々に動きます。ノード間が直線のときは、ハンドルが無いこともあります。

例

最初の形
修正後の形

ノードの種類を変更する

滑らかなノードを角のノードにする

ノードの左右で方向線を別々に動かしたいときは、角のノードに変更します。

角ばらせたいノードを選びます。
角にするボタンを押します。

矢印で示したノードを角にしました。

角のノードを滑らかなノードにする

角ばっているノードを丸くしたいとき

丸くしたいノードを選びます。
滑らかにするボタンを押します。次の３つのどれでも良い。
- スムーズにする
- 対称にする
- 自動スムーズにする

注意

フリーハンド線などを修正しても、バケツツールで作った部品は連動しません。

修正部分にバケツツールで作った部品がある人や、余分な部品がある人は、その部品を削除してから修正を行うとよいでしょう。

ノードの数を減らす

ノードの数が多すぎる場合は、次の機能を使ってノードの数を減らすこともできます。

１）「ノード編集ツール」でパスを選択します。
２）「パス」メニューから「パスの簡略化」を選びます。

ノードの個数が減っているのを確認しながら、「パスの簡略化」何度か行います。

例

元の形
パスの簡略化を１回行った
パスの簡略化をもう１回行った
パスの簡略化をさらに数回行った

ノードの数は減りますが、形も変わってしまいます。

パスの編集(練習) (最終更新日時 2015-10-06 07:53:51 更新者 masahiko)

-  ⇤ ← 2010-08-28 02:56:26時点のリビジョン8 → 
  サイズ: 4346
  編集者: masahiko
  コメント:
+   ← 2015-10-03 13:12:21時点のリビジョン34 → ⇥
  サイズ: 7034
  編集者: masahiko
  コメント:
-削除された箇所はこのように表示されます。
+追加された箇所はこのように表示されます。
 行 1:
-#acl All:
-行 3:
+行 2:
-パスの編集例を示します。
+このページでは'''ノードツール(ノードでパスを編集)'''を使ったパスの編集方法を説明しています。

上から２番めのツールがノードツールです。
 . {{attachment:path12.png}}

パスの編集は手間のかかる作業です。
修正量が多い場合には、描き直した方が早いでしょう。

直したいパスがあったとき、３つの方法が考えられます。
 * 描き直す
 * 一部分を描き直す
 * 修正する

最小限の修正や、描きにくい箇所の細かな修正だけをここで述べている方法で行うのをすすめます。

----
=== ノードの数 ===

パスはノードの集まりとして表されています。
あまりにノードが多いパスは編集に向いていません。

鉛筆ツールで描くとき、スムージングの値が小さいとノードの多いパスができます。

 . {{attachment:path51.png}}

スムージングの値を調整して、少ないノード数で描いた例です。比べてください。

 . {{attachment:path53.png}}

ノード数を減らす機能もありますが、思ったとおりに働くとは限りません。
このページの最後で説明しています。

----
=== 概要 ===
パスの編集には
'''ノードツール(ノードでパスを編集)'''を使います。

 . {{attachment:path12.png}}
-行 9:
+行 46:
- . どの種類のノードを使うか
+ . そこは角か曲線か
-行 11:
+行 48:
-「ノード編集ツール」を使います。
 . 選択移動ツールではパスの配置ができました。
 . ノード編集ツールではパスを構成するノードを編集することができます。
 . {{attachment:path3b.png}}
+ノード編集ツールを選ぶと、画面上部のツールコントロールが次のように変わります。
 . {{attachment:path14.png}}
-行 16:
+行 51:
+=== 準備 ===
このページの練習ではスナップはOFFにしておきます。

 . {{attachment:path13.png}}

 . スナップコントロールのON/OFFは矢印で示したアイコンで行います。
 ONのとき :: 四角で囲まれ凹んだような表示
 OFFのとき :: フラットな表示
 * スナップは他の部品の位置にぴったりあわせるときに使います。
-行 20:
+行 64:
-がんばって描いたつもりでも、ギザギザの線になっています。
+==== スムージングの値が小さいとき ====
スムージングの値を小さくして描くと細かく描けますが、
がんばって描いたつもりでもギザギザの線になっています。
-行 30:
+行 76:
+==== スムージングの値が大きいとき ====
スムージングの値を大きくすると滑らかに描けますが、
がんばって描いても細かいところは無視されてこんなふうになります。
 . {{attachment:path15.png}}

次の作業ができる程度にして、次の作業に進みます。

ノードを指定して減らす方法もあります。
 . 減らしたいノードを選択しておいて、このボタンを押します。
 . {{attachment:path3c.png}}
 . （詳しくは後日解説します）
----
=== ノードを追加する ===
スムージングを大きくして描いた例では、
ノードが少なすぎてこのままでは修正できません。

角にしたい場所にはノードが必要です。
 . {{attachment:path16.png}}

ノードを追加したい位置を、ノードツールでダブルクリックして追加できます。
矢印の３箇所に追加しました。

 . {{attachment:path17.png}}

----
=== ノードの位置を修正する ===

全体の形を見ながら、ノードの位置を修正して形を整えます。
 . 必ずノードをつかんで移動すること。
 . ノードを隣のノードと近づけすぎないようにすること。

 . {{attachment:path37.png}}
----
=== 方向線を調整する ===

ノードを選択すると、ノードから伸びている方向線(ハンドルともいう)が表示されます。
ハンドルの先についている○を移動することで曲線の曲がり具合を調整できます。
 . 少しずつ動かしてみましょう。
 . {{attachment:path3a.png}}

滑らかなノードでは片方のハンドルを動かすと、
反対方向のハンドルも同時に動きます。

角ばったノードでは両側のハンドルは別々に動きます。
ノード間が直線のときは、ハンドルが無いこともあります。

'''例'''
 . 最初の形
 . {{attachment:path30.png}}
 . 修正後の形
 . {{attachment:path39.png}}

----
=== ノードの種類を変更する ===

==== 滑らかなノードを角のノードにする ====

ノードの左右で方向線を別々に動かしたいときは、
角のノードに変更します。

 * 角ばらせたいノードを選びます。
 * 角にするボタンを押します。
 . {{attachment:path3e.png}}
矢印で示したノードを角にしました。
 . {{attachment:path18.png}}
==== 角のノードを滑らかなノードにする ====

角ばっているノードを丸くしたいとき
 * 丸くしたいノードを選びます。
 * 滑らかにするボタンを押します。次の３つのどれでも良い。
  . スムーズにする
  . 対称にする
  . 自動スムーズにする
 . {{attachment:path3d.png}}

----
=== 注意 ===

フリーハンド線などを修正しても、バケツツールで作った部品は連動しません。

修正部分にバケツツールで作った部品がある人や、余分な部品がある人は、その部品を削除してから修正を行うとよいでしょう。
-行 33:
+行 160:
-ノードの数を減らす機能があります。
これを使って適当な量までノードの数を減らします。
+ノードの数が多すぎる場合は、
次の機能を使ってノードの数を減らすこともできます。
-行 53:
+行 180:
-思ったとおりには減らないかもしれません。
次の作業ができる程度にして、次の作業に進みます。

ノードを指定して減らす方法もあります。
 . 減らしたいノードを選択しておいて、このボタンを押します。
 . {{attachment:path3c.png}}
 . （詳しくは後日解説します）

----

=== ノードの位置を修正する ===

以下の作業は修正が必要と思われるノードに対してのみ行ってください。
すべてのノードに行う必要はありません。

全体の形を見ながら、ノードの位置を修正して形を整えます。
 . 必ずノードをつかんで移動すること。
 . ノードを隣のノードと近づけすぎないようにすること。

 . {{attachment:path37.png}}
----
=== ノードの種類を変更する ===

滑らかなノードを角ばったノードにする

 * 角ばらせたいノードを選びます。
 * 角にするボタンを押します。
 . {{attachment:path3e.png}}
丸で示したノードを角ばらせました。
 . {{attachment:path38.png}}

角ばっているノードを丸くしたいとき
 * 丸くしたいノードを選びます。
 * 滑らかにするボタンを押します。
 . {{attachment:path3d.png}}
３つのボタンの違いについては後日解説。

----
=== 方向線を調整する ===

のに角ばっているところがあれば、滑らかにするを押します。（フリーハンドツールで描いた場合は最初と最後の点以外は滑らかになっているでしょう）

４）ノードの位置やハンドルの位置を調整して、曲線の形を整えます。ハンドルの位置は曲線の向きを見ながら少しずつ動かして調整しましょう。特に引き出しすぎないよう注意してください。方向線の長さはそのセグメントの長さの３分の１位が目安です。


注意

フリーハンド線などを修正しても、バケツツールで作った部品は連動しません。

修正部分にバケツツールで作った部品がある人や、余分な部品がある人は、その部品を削除してから修正を行うとよいでしょう。

 . {{attachment:path39.png}}
 . {{attachment:path3a.png}}
+ノードの数は減りますが、形も変わってしまいます。

Quick Links

Search Wiki

Page Tools