図形を描こう　- フリーソフト Inkscape を使って -

第１回　はじめに・ドロー系ソフトの基礎と線の描画

SVG：Scalable Vector Graphics拡大、縮小しても高精度に表示できる　輪郭で表現する　グラフィックス (Scalable) (Vector) (Graphics)

・SVGを扱う描画ソフト → ドロー系ソフト・有名な商用ドロー系ソフト　　Adobe Illustrator：PostScript という PDFの基になった SVGの規格を扱う・フリーソフトウエア　　Inkscape（インクスケープ）：拡張子 svg のベクターファイルを扱う・オリジナルwebページ　　http://inkscape.org/・その他参考になるURL　　http://inkscape.paix.jp/　　http://www.samurai-logic.com/inkscape/　　http://o-server.main.jp/inkscape/　　（配色に関するURL）　　http://gihyo.jp/assets/files/book/2001/haishoku/　　http://www.hi-ho.ne.jp/douton/hpcolor.html・参考書　　徹底図解GIMP & Inkscape のすべて、晋遊舎 100%ムックシリーズ、　　ISBN978-4-86391-073-7、2010 年５月、1280円

ベクターグラフィックスとビットマップグラフィックスの違い

　　★　　　　　　　　　★　　　　　　　　　100%

　　★　　　　　　　　　　　　　　　　400%

　ベクター　　　　　　ビットマップ

1

１．ベジェ曲線の描画

線分：ノードをクリックして描画

曲線：ノードをクリック＋ドラッグでハンドルを操作

ノード

パス

パス

ハンドルハンドルでノードにおける曲線の方向と長さを調節

ノード

２．線分

線分で作成した図形を重ねて作成操作：グリッドの表示。ノードをグリッドにスナップ。パスを閉じる。　　　図形を塗りつぶす。図形の前後関係の変更。

３．えんぴつ

操作：ノードの追加、削除、結合

2

４．曲線

５．ハート

操作：曲線の曲率と長さの調整、ノードとセグメントの種類の変更

操作：塗りつぶしとパスの色指定

3

６．吹き出し操作：図形の結合、塗りつぶしのグラデーション設定

７．ベクターグラフィックスによる表示例

4

図形を描こう ―フリーソフト Inkscape を使って―

第２回 ロゴを作ろう

１．テキストを入力する

テキストを入力するには、テキストツール を選択し、テキストを入力したい場所

をクリックしてテキスト入力します。 流し込みテキストを作成するには、ドラッグして流し込みテキストの枠（テキストボッ

クス）を作成してから入力します。 ・カラーを選択

テキストを選択して、ソフト下部にあるカラーボックスからカラーを選択すると文

字の色を変えることが可能。

・フォントやテキストの詳細な設定

修正をくわえたいテキストを選択してコマンドバーにある「テキストとフォント」

ボタン か、メニュー「テキスト」→「テキストとフォント」を選択すると「テキ

ストとフォント」ウィンドが表示される。 ２．カーニングをかけてテキストの位置を調整

テキストはカーニングをかけて字間やベースラインを調整したり、文字を回転させるこ

とができる。カーニングをかける方法は文字を選択し、決められたホットキーを入力する。 カーニングの除去はメニュー「テキスト」→「手動カーニングの除去」を選択する。

初期状態 字間の調整

ベースラインの調整 文字の回転

5

文字の回転 90 度ずつ：Ctrl + [ or ] 1 度ずつ：Alt + Ctrl + [ or ]

ベースラインの調整 1px ずつ：Alt + ↑ or ↓ 10px ずつ：Alt + Ctrl + ↑ or ↓

字間の調整 1px ずつ：Alt + → or ← 10px ずつ：Alt + Ctrl + → or ←

文字の回転 垂直シフト単語間隔 水平カーニング文字間隔 行間隔

３．パスとテキストを組み合わせる

矩形や楕円シェイプツールで作成したオブジェクトやベジエ曲線ツールで描いたスト

ローク上に、テキストを沿わせたり、円の中に流し込むことができます。 テキストと曲線を作成する。

テキストと曲線を選択し、メニュー「テキスト」→「テキストをパス上に配置」を実行

すると、曲線で作成したストローク上にテキストを配置することができる。

配置したテキストをパスは「テキスト」メニュー →「パスからテキストを削除」で切り

離せる。

パスの向きを変える 曲線のストロークの塗りなし

6

４．ワンポイントロゴ

１）吹き出し型のワンポイントロゴ

矩刑シェイプで長方形を作成、オブジェクトの角を丸める。

三角のシェイプを作成し、三角形と角丸の四角形を複数選択し、オブジェクトの統合

をする。 メニュー「パス」→「統合」

統合したオブジェクトを複製し、複製したオブジェクトに【パスのインセント】を実

行して、元のオブジェクトより一回り小さい形に変形する。 複製：メニュー「編集」

→「複製」 パスのインセント：メニュー「パス」→「インセント」

7

前面にある一回り小さい図形を選択し、色のフェーズを４種類にした水平方向のグラ

デーションで着色する。 メニュー「オブジェクト」→「フィル／ストローク」 「フィル」の「線状グラデー

ション」を選択。編集ボタンを押してグラデーションエディタを表示させる。色フェー

ズを追加ボタンを 2 回押し二つの色フェーズを追加。合計４つの色フェーズにし、ぞれ

ぞれに色を設定する。

色フェーズは上から順番に 【C0 M0 Y0 K0 A100】 【C22 M13 Y0 K0 A100】オフセット値 0.48 【C66 M42 Y0 K0 A100】オフセット値 0.52 【C100 M80 Y0 K66 A100】

ツールボックスからグラデーションツール を選択し、水平方向のグラデーション

ハンドルの位置を垂直方向に移動する。

テキスト（NEW）を入力し、図形で作成した青いグラデーションをテキストの塗り

に設定して、グラデーションツールでグラデーションの方向を垂直に移動させる。

8

最初に作成した背面にある図形を選択し、メニュー「オブジェクト」→「最前面へ」

で一番手前に移動し、フィルの塗りを「黒」、ぼかしを「４」に設定する。設定後、再

度最背面に移動する。

完 成 ！

２）切手風ロゴの作成

円を作成し、タイルクローンを作成する。 メニュー「編集」→「クローン」→「タイルクローン」

9

周りの円をだけを残し、内側の円を削除する。すべてを選択し、メニュー「編集」→

「クローン」→「クローンのリンク解除」とメニュー「パス」→「統合」を行う。

長方形を作成し、最背面に配置する。

2 つのオブジェクトを選択し、差分を取る。 メニュー「パス」→「差分」

長方形とテキストを作成し、図形を重ね合わせてロゴを作成する

完 成 ！

10

図形を描こう ―フリーソフト Inkscape を使って―

第 3 回 地図を作ろう

第 3回では、詳細な地図画像をもとに簡単な案内図を作ってみます。

これが完成図です。

1.下絵となる詳細な地図画像の読み込み

地図を読み込む前に、用紙の向きを横に変更しておきましょう。

（[ファイル]→[ドキュメントの設定]→[ページ]）

次に、地図画像のファイルを読み込みます。（[ファイル]→[インポート]）

11

2.地図画像を回転

簡単な地図が書きやすくなるように、主要な道路が水平・垂直になるように地図画像を

回転させましょう。地図画像は単なる下絵なので大体水平・垂直になればいいです。

地図画像をクリックして回転モードにし、四隅のガイドをドラッグして地図画像を回転

させます。

3.地図画像のレイヤーのロック

地図画像を回転させたら、作業中に動かないようにロックをかけておきましょう。

そのために、レイヤー機能を使います。

[レイヤー]メニューから[レイヤー]パレットを開きます。

レイヤー名の左にある「鍵」ボタンをクリックしてロックしておきます。

これでロックされた状態です。こうしておくと、ロックしたレイヤーにあるオブジェク

トは選択できなくなります。

12

4.新しいレイヤーに道路を作成

道路を作成するため、新しいレイヤーを作成しましょう。

[レイヤー]パレットの「＋」ボタンを押すと新しいレイヤーが作成できます。

ちなみに「－」ボタンはレイヤーの削除、上下ボタンはレイヤーの移動です。（レイヤー

を削除すると、そのレイヤーに作成したオブジェクトも一緒に削除されるので注意して下

さい。）

新しいレイヤー名は「レイヤー 2」にして追加します。追加された「レイヤー 2」が選

択されている（レイヤー名がグレーになっている）のを確認して道路を作成します。

道路はペンツールを使って線を引いていきます。Ctrl キーを押しながら線を引くと真っ

直ぐな線を引くことができます。この時、下絵の地図画像はあくまでも参考なので、細か

な変化にこだわらず大胆に線を引いていきましょう。また、ポップ調にするために、今回

は線の端を丸くしました。

微調整を終えたら、作成した道路を全て選択し[オブジェクト]→[グループ化]を選択し

て、一つのオブジェクトにしておきます。

13

Shift キーを押しながらパレットから色を選択して、道路の色をポップ調にしましょう。

5.線路の作成

今回は地図中に福山駅があるので線路を書きましょう。線路は黒の直線に白の破線を重

ねると作成できます。

まず、山陽本線の位置に黒の直線を引きます。

次に、黒の直線より少しだけ細い白の破線を、黒の直線の下に引きます。

→

破線にするには[ストロークのスタイル]→[線種]で破線を選択します。

14

白の破線を黒の直線の上に重ね合わせたら、線路の完成です。この時、[オブジェクト]

→[整列と配置]を使うときれいに重ね合わせることができます。

きれいに重ね合わせることができたら先ほどと同じようにグループ化しておきましょう。

6.文字の配置

道路と線路が書けたら「レイヤー 2」をロックして、文字を配置するために新しいレイ

ヤーを作りましょう。レイヤー名は「レイヤー 3」とします。

駅の文字は、四角のオブジェクトと文字を別々に作成し、[整列と配置]で上下左右を合

わせるといいです。整列ができたらグループ化しておきましょう。

7.目的地の部品の作成

文字が配置できたら、星と HERE！の部分を作ります。星は星型ツールで作成、HERE！は

駅と同じように作成します。

15

HERE！から飛び出ている位置を示す部分は、ペンツールで適当な三角形を作り、位置を

調整します。位置を調整できたらグループ化しておきましょう。

8.仕上げ

これで、必要なオブジェクトは完成しました。これから地図を完成させましょう。まず、

下絵の地図画像がある「レイヤー 1」を削除しましょう。

次に、「レイヤー 3」を選択します。「レイヤー 3」を選択したら、メニュー[編集]→[全

て選択]でオブジェクト全てを選択します。

16

オブジェクト全てを選択できたら、メニュー[レイヤー]→[選択オブジェクトを背面のレ

イヤーに移動]で、「レイヤー 3」のオブジェクトを「レイヤー 2」に移動させます。

これで道路・線路・文字の全てのオブジェクトが「レイヤー 2」に集まりました。これ

で「レイヤー 3」は不要になったので削除しておきます。

ここまでで地図は一応完成なのですが、もう一工夫してみましょう。

追加作業するために「レイヤー 2」のロックを解除するのを忘れないように！

Inkscape には様々なフィルタ機能があります。今回はオブジェクトに影を付けて立体感

を出してみましょう。

まず、オブジェクト全てを選択します。次に、メニュー[フィルタ]→[光と影]→[影を落

とす]を選択します。選択すると、影の効果を細かく調整できますが、今回はそのままの設

定で適用します。

17

影を付けたら、こんな感じになりました。

今度は、全体を右に傾斜させてみましょう。

再度オブジェクト全てを選択します。次に、メニュー[オブジェクト]→[変形]を選択し

ます。

変形パレットで[傾斜]のタブを選択して、傾斜の度合いを角度で入力します。＋で左方

向、－で右方向に傾斜していきます。今回は－5°ほど右方向に傾斜させてみます。

この時、傾斜の度合いによっては文字がひずんで画像が崩れる場合があるので注意して

下さい。

18

これで地図画像の完成です！

19

図形を描こう －フリーソフト Inkscape を使って－

第４回 店頭 POPの作成

今回は、Inkscape の総まとめとして、かんたんな店頭 POPを作ってみましょう。

店頭 POP は、商品名や価格、説明文などを手描き、または印刷した単純なものですが、

店舗の雰囲気作りや売上げ増加に大きく貢献しています。

今日はその一例として、下の図のような POP を、Inkscape を利用して作成します。

作成の手順は、次のとおりです。

①「広告の品」 ３色の文字を重ねて、ふちどりをします。

②「デジタルカメラ」 同上。

③「8,980」 数字を少しずつ重ねて、さらに影をつけます。

④「(税込)、円」

⑤「５台限り！」 長方形に文字を入れて、さらに平行四辺形に変形します。

⑥「 1,400 万画素」 曲線状に配置します。

⑦ 背景 雲状の背景にして、外周をぼかします。

⑧ 星 文字が光って見えるように、白い星を７個配置します。

20

1.「広告の品」

1.1 文字の入力

①「テキストツール」を選択

② 適当なところでクリック

③ 「広告の品」を入力

1.2 フォントを決める

④「テキスト」を選択

⑤「テキストとフォント」を選択

⑥「HGPSoueiKakupoptai」(HGP創英角

ポップ体)を選択

⑦「適用」

⑧「閉じる」

1.3 拡大・移動

⑨「選択ツール」を選択

⑩ 拡大・移動して、適当な場所に配置

①

② ③

④

⑤

⑥

⑦ ⑧

⑨

⑩

⑩

21

1.4 文字列の複製

① 右クリック

② 「複製」を選択

③ 複製した「広告の品」を適当な場所に移動

④ これを２回くりかえして、３つの「広告の

品」を作る

1.5 色をつける

⑤ ２番目の「広告の品」を選択

⑥ 黄色をクリック

⑦ ３番目の「広告の品」を選択

⑧ 赤をクリック

1.6 字を太くする(アウトセット)

⑨ １番目の「広告の品」を選択

⑩ 「パス」を選択

⑪ 「アウトセット」を選択

⑫ これを２回くり返して、太くする

1.7 字を細くする(インセット)

⑬ ３番目の「広告の品」を選択

⑭ 「パス」を選択

⑮ 「インセット」を選択

⑯ これを２回くり返して細くする

①

②

③ ④

⑤

⑥

⑦

⑧

⑨

⑩

⑪ ⑫ ⑬

⑭

⑯

⑮

22

1.8 字を重ねる

① ３つの「広告の品」を同時に選択

(Shift キーを押しながらクリック)

②「オブジェクト」を選択

③「整列と配置」を選択

④「中心を垂直軸に合わせる」を選択

⑤「中心を水平軸に合わせる」を選択

２.「デジタルカメラ」

「広告の品」と全く同様に、次の手順で、

「デジタルカメラ」を作る(説明省略)。

① 文字入力

② フォント指定

③ 拡大・移動

④ ３つの「デジタルカメラ」を複製

⑤ 色をつける(１番目を赤、２番目を黄色、

３番目は黒のまま)

⑥ 太さを変える

⑦ 重ねる

①

②

③

④

⑤

①～⑦

完成した「広告の品」

完成した「デジタルカメラ」

23

３.数字「8,980」

3.1 数字の入力とフォント・色

①「テキストツール」を選択

②「8,980」を入力

③ 拡大・移動で、適切な場所に配置

④「テキスト」を選択

⑤「テキストとフォント」を選択

⑥「BoldOblique」を選択

⑦「適用」

⑧「閉じる」

⑨ 色を赤にする

①

②

③

④

⑤

⑥

⑦ ⑧

⑨

24

3.2 ストローク(輪郭線)と影

①「ストローク」をクリック

②「ストロークの塗り」を選択

③「単一色」を選択

④ ＲＧＢがすべて０（黒）であることを確認

⑤「ストロークのスタイル」を選択

⑥「幅」を、4.000pxにする

⑦「フィルタ」を選択

⑧「光と影」を選択

⑨「影を落とす」を選択

⑩「適用」を選択

⑪「閉じる」

①

②

③ ④

⑤ ⑥ ⑦

⑧

⑨

⑩ ⑪

25

3.3 数字の分割と重ね合わせ

①「パス」を選択 ③「パス」を選択

②「オブジェクトをパスへ」を選択 ④「分割」を選択

⑤分割した数字を、右から順に、

少しずつ重ねていく

①

② ③

④

⑤

完成した「8,980」

26

4.「税込」「円」

① テキストツールで「税込」、「円」を入力

② フォントは「HGGothicM」を選択

③ 拡大・移動して適切な場所に配置

5. 「５台限り！」

5.1 文字の入力とフォント・色

①テキストツールで「５台限り！」を入力

②フォントは「HGSGothicE」を選択

③拡大・移動で、適切な場所へ

④色は青にする

①

②

③

④

①

② ③

27

5.2 文字列を矩形(長方形)の中に入れる

①「矩形」ツールで、長方形を作る

② 色は白にする

③ ストロークの幅を 2.000pxに

(「ストローク」→「ストロークのスタイル」)

④「５台限り！」がちょうど入る程度に拡大する

⑤ 長方形を「５台限り！」の上に重ねる

⑥「オブジェクト」→ ⑦「背面へ」

⑧「オブジェクト」→ ⑨「グループ化」

①

②

③ ④

⑤

⑥

⑦ ⑧

⑨

28

5.3 傾斜をつけて平行四辺形に

①「オブジェクト」→ ②「変形」

③「傾斜」→「垂直」を「15.000(度)」に

④「適用」

⑤「オブジェクト」→ ⑥「背面へ」

①

②

③

④

⑤

⑥

完成した「5 台限り！」

29

6.「1,400万画素」

6.1 文字の入力とフォント・色

①「テキストツール」で「1,400万画素」を入力

② フォントは「HGPSoueiKakupoputai」

③ 拡大・移動して配置

④ 色(フィル)はピンク

⑤「ストローク」

⑥「ストロークのスタイル」

⑦「幅」を「1.000px」

①

②

③

④

⑤

⑥ ⑦

30

6.2 曲線状に配置

①「らせんツール」を選択

② らせんの両端点をダブルクリックして、

長さを調節

③ 適切な場所(「ラ」の右肩)に移動

④「1,400万画素」とらせんを、Shift キー

を押しながらクリック (両方を選択)

⑤「テキスト」

⑥「テキストをパス上に配置」

⑦ 大きさや位置を微調整

①

② ③

④

⑤

⑥

⑦

31

7. 背景

7.1 円で塗りつぶす

① 円/弧ツールを選択

② 円を作る

③ 色を水色にする

④ 拡大・移動して、適当な場所に移す

⑤ 右クリック

⑥「複製」を選択

⑦ 複製を適当な場所に移動

⑧ 繰り返す

①

②

③

④ ⑤

⑥

⑦

⑧

32

7.2 背景を文字の後ろに

①すべての円を、Shift キーを押しながらクリックして選択

②「パス」を選択

③「オブジェクトをパスへ」を選択

④「パス」を選択

⑤「連結」を選択

⑥「オブジェクト」を選択

⑦「最背面へ」を選択

①

②

③ ④

⑤

⑥

⑦

33

7.3 背景の輪郭線を雲のようにぼかす

①「ストローク」を選択

②「ストロークのスタイル」

③「幅」を「0.000」に

④「ストロークの塗り」

⑤「ぼかし」を「6.5」に

①

② ③

④

⑤

完成した「雲の

ような背景」

34

8. 星

①「星型ツール」を選択

② 角：４、スポーク比：0.37

③ 色を白にする

④ 右クリック

⑤「複製」を選択

⑥ 星を７つ複製する

⑦ 移動して適当な場所に配置

①

②

③

④

⑤

⑥

⑦

完成！

35