FC2ブログ

Inkscapeの用語

未だ2つしか記事を書いてない「Inkscapeの使い方」シリーズを差し置いて、ちょっとばかし基本となる事をまとめておきます。

要は名前がわかるかな?という事なんですが、以下の用語が何を指すか分かりますか?
・オブジェクト
・パス
・(アンカー)ポイント
・ノード
・ハンドル
・セグメント
・バウンディングボックス
・パスでないオブジェクト
もし正確に全ての用語を区別できるなら今回は関係ありません。お疲れさまでした。←ぇ

今回は、
正直、そんなにはっきりとはわかってない!
という方のための記事です。
もちろん、これを知ってるとこのブログを読むのにも多少読みやすくなるはずです。

というわけでさっそく1つずつ見ていきましょう。


●オブジェクト
まず「オブジェクト」です。
「オブジェクト」とは、おおざっぱに言って、「変形せずに移動できる最小単位」と言う感じです。
……なんだか難しそうですね…

もっとおおざっぱに言えば「一つ(ひとまとまり)の形」です。
さっきから、おおざっぱに、おおざっぱに、と言っていますが、より具体的に見てみましょう。
例えば、矩形ツールで長方形を描いてみてください。
その長方形は選択ツールを使うと形を変えずに移動出来ますね?ゆえにその長方形はオブジェクトです。

また、鉛筆ツールで適当に線を一本描いてください。それも同様に、移動できるのでオブジェクトです。

つまり、Inkscapeで描いているひとつひとつの「もの」が「オブジェクト」である、というのもイメージとしては間違いではありません。

さて、かなりぼんやりしたイメージの「オブジェクト」が分かったんだか分からないんだかよく分からない状態になったかもしれませんが、とりあえず次に行きましょう。


●ノード
ノードというのは、オブジェクトひとつひとつにあり、しかも普通は1つのオブジェクトに2つ以上(オブジェクトにより数は異なる)存在して、ノード同士の相対的な位置によってオブジェクトの形を決定するものです。

「オブジェクトひとつひとつにある」というのは、ひとつのオブジェクトに属するノードは、それ以外のオブジェクトのノードにはならない、という意味です。
ですから、たとえ見かけ上2つのオブジェクトに共通するノードがあるように見えても、それは単に重なっているだけです。

「ノード同士の相対的位置によりオブジェクトの形を決定する」とは、逆に言うと、ノードを移動することでオブジェクトの形を変形することができる、ということでもあります。
例えば矩形ツールで描かれた長方形には左右上隅と右下隅にノードがあり、左上や右下隅のノードを移動して縦横比を変えることができます。

ただし、オブジェクトによっては、そのオブジェクトの一部のノードの動きが、他のノードによって制限されることもあります。
例えば矩形ツールで描かれた長方形の右上隅のノードは、長方形の角に丸みをつけるときの角丸の大きさを変えるためのものなので、もとの長方形の辺上でしか動きません。

用語01


要するにノードというのはオブジェクトを変形するときに動かす点です。また、ノードを動かすことでオブジェクトの形を制御出来ます。


●パス
パスは、セグメントとアンカーポイントからなる曲線(折れ線も含む)のオブジェクトです。
オブジェクトのひとつですが、パスでないオブジェクトもあります。矩形ツールで作成した長方形オブジェクトなどはパスではありません。

ただ、「パスでないオブジェクト」の項目でも述べますが、パス以外のオブジェクトも内部的にはパスにより描画されているので全て必要ならパスに変換出来ます。

パスは直線ツールやペンツール、鉛筆ツールで直接描くことができます。

ちなみに、正確にはアンカーポイントとかセグメントとかいう言い方は実は3次ベジェ曲線によるパスによくつかわれる一般的な用語だと思います。そのてんではIllustratorやGIMPでも同様です。


●(アンカー)ポイント
アンカーポイント、またはポイントと言うと、パスオブジェクトのノードのひとつで、セグメント(後述)の両端になり、当然、パスはアンカーポイントを全て通ります。また、セグメントは直線か曲線なので、パスを折れ線にするときは必ず角はアンカーポイントの点になります。
なおアンカーポイントは最大で2つのセグメントの端にはなりますが、3つのセグメントがひとつのアンカーポイントを共有する事は出来ません。これは、パスが分岐することはない、ということです。


●セグメント
セグメントは、ふたつのアンカーポイントにはさまれるパスの一部分です。このセグメントがいくつかつながってパスが出来ているとも言えます。
セグメントは、詳しく言うと3次ベジェ曲線という曲線で、それについてはWikipediaを参照してください。←
とにかく、セグメントは直線か、滑らかな(尖っていない)曲線にしかなりません。また、単一のセグメントではある程度以上に複雑な曲線は作れないので、複数のセグメントをつなげたパス単位で実際には使用します。セグメントはアンカーポイントとアンカーポイントをつなぐ直線または曲線ですが、曲線でつなぐ場合にはどのような曲線で繋ぐかはハンドル(後述)で操作します。


●ハンドル
ハンドルは、セグメントが曲線になるとき、そのセグメントの形状を決定するもので、基本的にひとつのセグメントに2つ存在します。ふたつのハンドルは両端のアンカーポイントから出る直線で表され、ハンドルのアンカーポイントでないほうはノードになっています。このノードを移動してハンドルの向きと長さを調整し、これによって曲線の形を決めます。
ハンドルの向きは、アンカーポイントにおける曲線の接線を決めます。また、長さはアンカーポイント付近での平さを決めます。つまり、ハンドルが長くなれば長くなるほど、アンカーポイントの近くでのセグメントは曲がりの少ない、直線に近い形状になります。

用語02


●パスでないオブジェクト
パスでないオブジェクトとはその名の通りです。パスはオブジェクトのひどつ、と言いましたが、そうでないオブジェクトは沢山あります。
しかし、パスのところでも触れましたが、パスでないオブジェクトも内部的にはパスを使用して描画されているので、パスを使えば再現は可能です。
ただ、いくら再現が可能とはいっても、それが困難であったり、手間はかからなくてもよく使う図形であれば手軽に描きだいものです。
例えば長方形は、直線ツールを使えば簡単に作れます。(2つのパスを繋げて1つのパスにすることも出来ます)
でも、例えば沢山の長方形を作るときにそのようにしていては時間も手間もかかってしまいますが、矩形ツールによる長方形オブジェクトなら簡単に作ることが出来ます。
また、多角形やスター形は、単にその図形を作るだけなら多少手間がかかるだけですが、例えば(外接)半径が決まっている多角形を作るには余計な手間がかかります。
スター型に至っては内半径と外半径を指定して作るのはちょっとした数学的能力が求められます。

とにかく、パスでないオブジェクトが便利なのは間違いありません。
ただ、パスでないオブジェクトは万能ではありません。確かによく使われそうな形の、よく行いそうな変形は簡単に出来ますが、完全にオリジナルなオブジェクトを作るにはオブジェクトをパスに変換してハンドルやアンカーポイントを調整したりすることが必要かと思います。


●バウンディングボックス
バウンディングボックスは、どんなオブジェクトにも、選択ツールで選択すると出てくる物で、オブジェクトを囲む長方形で表される枠です。
バウンディングボックスや、ほかのツールを使ってオブジェクトを変形させても、バウンディングボックスの向きや形が(平行四辺形などに)変形することはありません。横幅と縦の長さのみがバウンディングボックスを決めます。
バウンディングボックスでは、拡大縮小のほかに回転や剪断変形といわれる、文字を斜体にするような変形が可能です。

--------------------------------------------
さて。わかったでしょうか?
正直、一回読んだだけではわからないかもしれません。
しかし、ところどころ読み返しながら、少しづつ感覚をならしていきましょう。
習うより慣れろです。←

スポンサーサイト



Inkscapeの使い方シリーズ2

別に「大人気につき第2回です」なんていうことはありません。
が、書き始めると書きたいことが出てくるもので、第2回です。

前回のをみて、赤い図形ばっかり描いて楽しい!という人はあまりいないでしょうね…
色を変えられなくて飽きてしまった人もいるのではないでしょうか?

また、「適当にやったら色はかえられたよ」というツワモノでも、線の太さを変えたい…なんていうIllustratorユーザーもいたのではないでしょうか。

そこで今回は「ストロークとフィル」をテーマに短くいきましょう。
(第2回にして早速ツールからは脱線しますが)

あらかじめ言っておくと、「ストローク」と「フィル」はIllustratorでの「線」と「塗り」に対応します。
具体的にはIllustratorでの呼称が示す通り、ストロークというのは線のことで、点線にしたり、色をつけたり、太さを調整したりするすることのできるもののことです。
ただし、間違えやすいのが「縁」です。詳しくは後述しますが、「ストローク」または「線」と「(図形の)縁」は指すものが異なりますから注意しましょう。
また、「フィル」も「塗り」というとわかりやすいことはわかりやすいのですが、Inkscapeではストロークの色や模様のことを「ストロークの塗り」といい、まぎらわしいので「フィル」を使うようにしましょう。なお「フィル」は正確に言うと、「閉じた(一周して戻ってくる)線の内側」または「開いた(両端のある)線とその両端を結ぶ直線との囲む領域」となります。

さて、前回の矩形ツールと円/弧ツールで作れる図形をいくつか作ってみました。
tutorial2-1

矩形と楕円、弓型に扇形です。
さて、まずは先ほどほのめかした「縁」と「ストローク」の違いです。
そのために弓型と扇形にストロークの色をつけてみましょう。
選択ツールで扇形を選択して、左下の□に×が入ったような四角のすぐ右の真っ黒な四角をドラッグして、その少し下の「ストローク:」の右側の「なし」の文字のあたりに、ドロップします。すると、少しわかりにくいですが扇形の縁に黒い線がつきました。
わかりやすくするためにフィル/ストロークパネルを開いて線を太くしましょう。
[オブジェクト(O)]メニュー⇒[フィル/ストローク(F)...]または[Shift]+[Ctrl]+Fを押します。すると右側にフィル/ストロークパネルが出てきます。

tutorial2-2

そこで、そのパネル内の[ストロークのスタイル]タブを開きます。
「幅:」を4pxに変更("1.00"を"4.00"または"4"に)すると、以下のように見やすい太さの線になります。

tutorial2-3

さて、同様に弓型のほうにもストロークの塗りをつけましょう。
今回はフィル/ストロークパネルが開いているので、選択ツールで弓型を選択し、フィル/ストロークパネルの[ストロークの塗り]タブを開きます。そのタブで×のボタンが押されていますが、そのすぐ右隣りの青く塗られた□をクリックしてストロークに単一色の塗りを設定します。すると下に色を設定するRGBAのスライダーが出てきます。通常はここで色を設定します。今回は目的の黒([R,G,B,A]=[0,0,0,255])になっていたのでそのままですが、もし異なる場合はRGBのスライダを全て左端へ、Aのスライダを全て右端へドラッグして黒を設定します。

tutorial2-4

すると上のようになります。
さらに扇形と同様に[ストロークのスタイル]タブからストロークの幅を4px程度にしてみましょう。

tutorial2-5

すると、線を太くする前から気づいたかもしれませんが、弓型の弦(弧の端から端を結ぶ直線)の部分は黒い線が付いていません。

これこそが「縁」と「ストローク」の違いです。「フィル」のところでも言いましたが、フィルの縁は全てが全てストロークなわけではなく、開いたストロークに対しては、その両端を結んだ直線とストロークの間の領域がフィルですから、逆にいえば、フィルに色が設定されていてある図形になっている場合、その縁が全てストロークではないので、そこにストロークの塗りを設定してもストロークがない部分はストロークの塗りが設定されません。

詳しく言うと、オブジェクトをパスに変換したときにパスがつながっている部分がストロークになります。

さて、円のほうに点線を適用しましょう。
弓型と同様にストロークの塗りを適用して、フィル/ストロークパネルの[ストロークのスタイル]タブで幅を4pxにした後、「線種:」のドロップダウンリストの上から3番目の点線を選択します。

tutorial2-6

するとこのようになります。さらに四角は赤いフィルが設定されていますが、青いフィルにしてみましょう。
四角を選択して、フィル/ストロークパネルの[フィル]タブを開くと[ストロークの塗り]タブと似たようなボタンの列とRGBAのスライダーがあるので、そのスライダーを[R,G,B,A]=[0,0,255,255]となるようにドラッグするか、右に数値を入力して変更します。

tutorial2-7

これでフィルを青に変更できました。


フィル/ストロークパネルの取り上げたところだけでなく他の所もいじってみると意外に色々なことができるので楽しいかと思います。

Inkscapeの使い方シリーズ1

今回から少し、Inkscapeの基本的な使い方をツールやメニュー項目を取り上げて解説的なことをしてみようかと思います。

以前の記事では既知としたようなことも含めて、日本ではあまりメジャーではないInkscapeを、初めて使う人向けに解説します。

さて今回は基本中の基本である4つを取り上げてみます。
●選択ツール
●ノード選択ツール
●矩形ツール
●円/弧ツール


まずInkscapeを立ち上げて早速選択ツールについて.....と行きたいところですが、選択ツールは何かそこにあるものを「選択」するものなので何かないと始まりません。そこで矩形ツールから始めましょう。

●矩形ツール

まず左側のツールパネルから矩形ツールをクリックして選択します。
そして適当にドラッグしてみましょう。

tutorial1-1

このようになりましたね?

出てきた赤い四角はInkscapeでイラストなどを作る際の基本となる図形のひとつです。そのままの状態であれば選択されていることを示す点線による縁取りと、オブジェクトを操作するためのノード(左右上隅と右下隅の白い□と○)が表示されますが、もちろんこれは印刷などには出ません。

矩形ツールはその名の通り、このような四角形のオブジェクトを作成するツールです。

なお、四角形を作成するとき、ドラッグしながらShiftやCtrlキーを押しておくと以下のような効果があります。
Shift……ドラッグをし始めた位置を中心とするような四角形を作成
Ctrl……縦横の比率が1:1や1:2などの整数比の四角形を作成
また、ShiftとCtrlを両方押すことで両方の効果を得ることもできます。
ただしこれらの効果は押している間だけしか有効にはならないので、マウスボタンを離すまで押し続ける必要があります。

作成したオブジェクトは後から変更もできます。左上隅と右下隅との小さな□をドラッグすれば縦横の比率を変えられますし、後述の選択ツールを使用すれば移動や回転もできます。

また、Illustratorユーザーには意外かもしれませんが、この状態で角を丸めることもできます。
○を最初にドラッグするときは下に降ろすようにドラッグします。するとドラッグした長さを半径とする正円状に四角の四隅を丸めることができます。
また、さらに元の場所にある○を横(左)にドラッグすると楕円(長丸)形に丸めることができます。

tutorial1-2

さて、これらのことを適当にマウスでいじくるだけでなく正確な数値を指定したい場合は左上の「変更:」の横に並ぶ数値を変更して指定できます。「幅:」と「高さ:」はその名の通り幅と高さを変更できます。
「水平半径:」と「垂直半径:」は角を丸めるときの楕円の大きさ(○をドラッグした長さ)を変更します。
垂直半径と水平半径はどちらか一方が0.00のときは他方を半径とする正円で丸めます。
垂直半径の右のドロップダウンリストで値を変更するときの数値の単位を変更できます。デフォルトでは「px」ですが、「cm」や「mm」も使用できます。
さらに右のかぎかっこのようなボタンは、四隅をとがらせます。適当に丸めたあとやっぱり元に戻したい時などに便利です。

●選択ツール

円/弧ツールに行く前に選択ツールとノード選択ツールに触れておきます。

ツールパネルから選択ツールを選択してください。

tutorial1-3

このように表示が変わったはずです。左右や上下、斜めの両矢印が表示されたと思います。
もし四角が選択されていない場合は四角の内部をクリックして選択してください。同様に表示されるはずです。
この状態で四角形の内部のどこかをドラッグすると四角形のかたちを変えずに移動することができるはずです。
上下左右の両矢印をドラッグすると、オブジェクトをその方向に拡大縮小できます。
また、四隅の斜め両矢印をドラッグするとオブジェクトの縦横の拡大縮小を同時にできます。
矩形ツールで四角を作成するときと類似の効果がShiftキーやCtrlキーにより得られます。
Shift……選択したオブジェクトの中心が移動しないよう拡大縮小
Ctrl……拡大する比率が1:1や1:2のように整数比になるように拡大縮小
ShiftとCtrlを同時に押すことで効果を合成したり、押している間だけ効果が得られるのも同様です。

また、選択ツールを使ってオブジェクトを回転することもできます。

回転したいオブジェクトを選択ツールで選択した状態でもう一度オブジェクトの内部をクリックすると周りの両矢印が方向を変えるはずです。この状態で四隅の曲がった両矢印をドラッグするとオブジェクトを回転させることができます。
また、ドラッグしている間Ctrlを押すと回転する角度を15°ずつにすることができます。

また、この状態で上下にある左右上下の両矢印を使うと、「剪断変形」という変形ができます。
(「剪断変形」という名前が一般的かどうかはともかく自分はこの呼び方以外に正確な呼びかたを知らないのです…)
四角形に対しては、段ボールをつぶすのを上から見たときのようなわかりやすい変形なのですが、複雑なオブジェクトを変形するときは注意が必要です。この剪断変形では、Shiftキーを押さないと図形の中心を移動しないようにし、Shiftキーを押すことで動かしている辺の対辺を固定するようにできます。また、変形する角度をCtrlキーで15°刻みにすることができます。
剪断変形は使って慣れてください。(ぇ

なお、回転と剪断変形の(Ctrlを押さない時の)中心がこの状態では図形の中心(十字マークが表示される)に通常ありますが、これをドラッグすることで別の位置を中心に回転させたり変形させたりすることができます。

最後にですが、選択ツールで行うような「移動」「拡大縮小」「回転」「剪断変形」は、[オブジェクト(O)]メニュー⇒[変形(M)...]か、もしくは[Shift]+[Ctrl]+Mで表示される[変形]パネルで数値を指定して行うこともできますが、[変形]パネルについてはまた今度にしましょう。

●ノード選択ツール

さて、選択ツールで色々な変形ができることはわかりましたが最初にやったような矩形ツールでの編集(角を丸める…等)はどうしたらいいのでしょう?もちろん、選択ツールで選択した状態でもう一度矩形ツールを選択すれば矩形ツールでやったようなオブジェクトの編集ができますが、より簡単にできるのはノード選択ツールです。いちいち選択ツールから矩形選択ツールへ切り替えなくても、ノードを移動するだけの編集なら、ノード選択ツールを使用します。
ノード選択ツールでまだ選択していないオブジェクトの内部をクリックするとそのオブジェクトが選択され、矩形ツールに切り替えたようなノードが表示されます。もちろんそのままノードをドラッグして図形を編集できます。

これらは矩形ツールで作成した四角形のオブジェクトのみならず、後述の円/弧ツールで作成した円や、今回は紹介しませんが、星型ツールで作成した多角形などに関しても同様に編集できます。
(Illustratorユーザーに補足すると、ノード選択ツールはIllustratorのダイレクト選択ツールに対応します。ただしInkscapeの矩形ツールや円/弧ツールはIllustratorと異なり、独自のオブジェクトを作成するため若干動作が異なるように見えます。このような違いについてはいつかどこかでまとめたいと思います。)

●円/弧ツール

その名の通り円やそれに関連する図形を作成するツールです。
矩形ツールと同様にとりあえずドラッグしてみましょう。楕円(長丸のこと)ができると思います。
なおShiftキーとCtrlキーは矩形ツールのときと同様に機能します。
Shift……ドラッグをし始めた位置を中心とするような四角形を作成
Ctrl……縦横の比率が1:1や1:2などの整数比の四角形を作成


tutorial1-4

今度は上と左に四角い□というノードがあり、右に丸い○というノードがあります。
四角いノードを移動すると幅や高さを調節します。このとき、高さ/幅を調節するどちらのノードをドラッグしているときでも、Ctrlを同時に押すことで正円になるように調整してくれます。また、変形の中心は図形の中心です。
丸いノードをドラッグすると弓型または扇形にすることができます。
弓型というのは、円の弧とその弧に対する弦とからなる図形です。まぁ百聞は一見に如かず。

具体的には、丸いノードをドラッグすると楕円形は表示上ほとんど消えてしまいますが、元あった楕円より外側にマウスカーソルがくるようにドラッグすると扇形を作ることができます。
また、今度は元あった楕円より内側にマウスカーソルが来るようにドラッグすると弓型が作れます。
下の画像の、左が扇形、右が弓型(選択されている)です。

tutorial1-5

なお選択ツールやノード選択ツールは矩形ツールに対するのと同じように使用できますので遊んでみてください。

特に矩形ツールや円/弧ツールなど、今回取り扱ったツールは説明されたりするより一通り使ってみないとどんなものかつかめない、いわゆる「習うより慣れろ」な部分ですから使い倒してみてください。
プロフィール

f(t)=k

Author:f(t)=k
ベクトル画像をもっと世に広めたい一般人その1

最新記事
最新コメント
最新トラックバック
月別アーカイブ
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QR