ヘルプ:ベクター画像のチュートリアル

はじめに

ベクター画像のチュートリアルのページにようこそ！ ここでは全くの初心者の皆さんでは、ベクター画像の編集をしてみたい人を対象に解説します。ここで肝心なのは、実際に使っているうちに SVG 画像の編集や描画の腕が上達するので、何度でも試してみるkとです。習熟は経験に裏打ちされ、経験はたくさん練習すると身につきます。

ベクター画像って？

黒で表示した「大文字A」はビットマップ画像。コンピュータにはピクセルの位置と黒色であることが保存され、それを呼び出して文字の形を再現する。
アカデ表示した同じ文字のベクター画像。コンピュータは A の形を記録し、ピクセルに付ける色を定義、コンピュータ画面に形を表示する。

ビットマップ図形は滑らかに拡大しない。拡大しすぎると、ギザギザが出てしまう。ベクター画像は、コンピュータに図形の曲線が記録され、ピクセルをそこに配置するため、この問題は発生しない

So what are vector graphics? Well let’s start by looking at the alternative to vector graphics, bitmap (or raster) graphics. With bitmap graphics the image is divided up into a grid of pixels. The computer holds information about those pixels, such as their color and where they are in the image and from this information the computer can "draw" the image. Note there is no obvious way of seeing what the image will be until it is drawn. Vector graphics work in a completely different way. They define the image mathematically. The files contain instructions that state "draw a circle" or "draw a curve". It is (at least for very simple cases) possible to read these instructions and imagine what the image should look like.

Because vector graphics work in this way, they are ideally suited to the kinds of drawings that require simple shapes that can be mathematically described. Diagrams, logos, clipart, house plans and maps are all suitable drawings. Photographs are not.

Here are some example vector images to show you the kind of image that can be drawn with a vector graphic program.

ファイル形式

ベクター画像にはさまざまなファイル形式があります。ウィキメディアではスケーラブル・ベクター画像 （SVG＝scalable vector graphicsv を優先します。SVG は XML マークアップ言語として二次元のベクター画像を記述します。オープンスタンダードの一種でワールドワイドウェブ・コンソーシアムが作成しました。このチュートリアルで使う編集ソフトは Inkscape と呼びます。

Inkscape をダウンロード

Inkscape を選んで使う理由はいくつかあります。第1に、無料であること。第2に SVG をネーティブに使います。Linux 刑の配布には最初から Inkscape が同梱されています。もしなくても、パッケージマネージャーを使い、インストールができます。Windows でも Mac でも、Inkscape の公式サイト http://www.inkscape.org/ を開き、インストーラをダウンロードしてください。手順はWEBサイトに書いてあります。

初めて Inkscape を開く

さて、Inkscape のインストールができ たので、アプリを開いてUIを見てみましょう。

レイアウトはそこそこ整理されました。それも Inkscape が実際に使うまで、不要なツールを非表示にしてくれるからです。画面上部に加え、左側の下部にツールがあります。画面下部には情報を表示します。

The tools down the left hand side are used for creating drawings. They are the most important tools and we will look at most of them in this tutorial. The tools along the top are mostly used for modifying objects in a drawing. We will look at some of them in this basic tutorial.

Shape tools

という四角形のツール

Let us start our exploration of the Toolbox bar (left side of window) working with the rectangles and squares tool. In the image below we only displayed the bars we are working with for this topic.

Select the rectangle tool (A), once the icon is clicked a blue squared backdrop will display behind the selected tool. Once enabled the mouse cursor will also update to a plus sign and a rectangle (D). Click and drag on the canvas to draw a rectangle (D). Do not worry if it is a different color. We will worry about colors later.

Notice the shape’s edit handles at the corners (B,D)? The square handles are used to edit the width and height (size) of the rectangle. The two circular handles (stacked on top of each other) allow for rounding of the corners on both a Rx and Ry basis, changing the shape of the object.

Also notice the Tool Controls bar (C) at the top? This bar automatically changes depending on which corresponding Toolbox bar tool (editor) is enabled. In the case of the rectangle tool it displays;

• width/height dimensions
• corner Rx/Ry (rounding) dimensions
• corner rounding reset button

You can change all four of the dimension settings manually, by clicking within the numeric readout display. This is handy if you need to draw a rectangle with exact dimensions, such as a flag. You can also mouse-over the dimension’s number settings and icons (buttons) as this will activate a mouse-over tip message (C) explaining the setting or a given icons editing feature.

もう一つ、注意してほしい項目はステータスバーで、Inkscape ウィンドウの画面下中央にあり、ツールチップのダイナミックなメッセージ機能 (D) です。他のソフトウェアなら、こういう表示は気にしなくても使えます。ところが Inkscape の機能を使いこなすのでも開発でも、必ずチップを読むことを習慣にしましょう。Inkscape のどのツールにも、ダイナミックなヒントを与えてくれます。ツールにはヒント1件ではなく、ツールやノード、ハンドル、オブジェクトの種別、その時の編集でしようとしていた操作によって更新されます。

Even if you are not actively editing or creating an object on the canvas, once a tool is enabled, you can press the Ctrl and the associated tool-tip message will display the command key’s editing enhancement. This method of displaying tool-tips also applies to the Ctrl+⇧ Shift, ⇧ Shift and Alt keys.

The Ctrl key

If you need to create a perfect square, hold down the Ctrl key on the keyboard while you click and drag. This command key locks the rectangle formed to either a perfect square or a rectangle with integer ratio sides.

Ctrl キーは他の操作を短縮するのにも有効です。例えば、オブジェクトの移動中にこのキーを押し続けると、移動方向を水平もしくは垂直に制限します。こういう時はどんな働きをするのかな？ Ctrl キーもしくは⇧ Shift キー（片方か両方）を押したまま、画面下部の中央のStatus barに表示されるツールチップの内容を読みます。Inkscape はコマンドキーを使ったベクター画像の編集のヒントを表示します。

The Ellipse, Polygon/Star and Spiral tools

These tools work in exactly the same way as the rectangle tool. Using the control key will restrict the ellipse tool to drawing perfect circles. Let’s look at the polygon or star tool.

You can change the number of corners, the spoke ratio, roundness of the corners and the randomness manually by entering in the numbers on the tool control bar. You can also change the spoke ratio by dragging the control points on the polygon itself. Set the numbers the same as is shown above – we will need this rounded triangle shape later on in the tutorial.

Path drawing tools

The next three buttons as we go downwards are used for drawing paths. A path is a mathematical curve that is specified by a number of points that the path must curve through. Let's look at the first one, the Pen tool.

Pen tool

上記のサンプルはベジエ曲線です。この表示だと、ノードが2個見え、曲線の始点と終点を示しています。ところが、見えていないけれどノードは他にもあります。それらが始点と終点の間でどんな曲線になるか決めています。そういうノードを表示するには、ノードボタンを押します。

Node tool

Clicking on the node tool reveals another node in the middle of the curve.

If you then click on the middle node you will see the Bezier handles appear.

These handles allow you to change the shape of the curve between the nodes. Notice that a list of node tools appear at the top. You can use these to change the nodes. We will not go into detail about these tools in this beginners tutorial.

The node tool can be used on all the objects created with the other tools to reveal their nodes.

More on the drawing tools

The other two drawing tools also create paths. The middle one is the Pencil tool. The computer will calculate all the nodes and Beziers for you. Closed paths can be created by drawing a loop (with the Pen tool, click on the start node to close the curve).

The last tool in the group is the calligraphy tool. It allows you to do calligraphic writing. The pen creates closed loops in a realistic pen nib like way. Because of this many graphic artists like to draw with this pen all the time.

Other tools

Selection tool

This tool allows you to select objects, resize them and move them about. If you click twice on an object with the selection tool, the handles change and you are able to rotate an object.

Zoom tool

This tool looks like a magnifying glass with a + sign in it. Drag the tool over an area to zoom in. Shift and click to zoom out again.

Text tool

Looks like a letter A. Click where you want your text to go, then start typing! If the letters are too small, click on the select button, then drag the handles to make it bigger. There are a lot of things that you can do with text that are beyond the scope of this beginners tutorial.

Connector tool

Use this to draw a connection between two objects. For example, a drawing and a label.

The nice thing about using this tool is that if you decide to move the objects about on the canvas, the connector still maintains the connection.

Gradient tool

Click and drag on an object and you will create a gradient from full color to full transparency.

Color Sampler tool

Use this tool to sample a color on the screen.

Step by step drawing a picture

もちろん、他にもツールはたくさんあります。上部のツールバーにあるうち、2個のツールは名前さえ紹介していませんし、これらは初心者にはぜひ覚えてほしいものです。覚えるなら、実際に使ってみるのがよく、では画像全体を Inkscape で書いてみましょう。ここにある見本の「禁煙」No Smoking に似た、「禁酒」のNo Drinking / No Alcohol を作ります。ワインの瓶とワイングラスを並べて、赤い「進入禁止」No Entry の記号を重ねます。

Setting up the page

The first thing we need to do is set up the workspace.

1. We need a square canvas so go to File-->Document Properties, and resize the page to 800×800 px.
2. We are going to create two layers. One layer for the bottle and wine and one for the red barred circle thing. Doing this will not affect the picture at all; it just makes it easier to work.
   1. On the menu bar go to Layer-->Rename Layer, then call the current layer Wine.
   2. Now go Layer-->Add Layer, then call this new layer No!

We will draw the circle in the layer we called No!. The first thing we will do is lock the Wine layer so that it cannot be accidentally edited.

Look at the bottom of the window and find the layer tool. It should read No!. Click on the downwards pointing triangle and select Wine. It will change to bold once you select it. Now do you see the yellow open padlock icon just to the left of the layer tool? Click on that to lock the layer. Now we cannot edit this layer for the time being. Click on the layer tool and select No! again.

We are now ready to start drawing.

Drawing the barred circle

Click on the ellipse tool and hold down the Ctrl key so that you draw a perfect circle. Make it reasonably large. We can change the size later.

Changing the color

We need to set the color to red and the outline to black. We do this with the fill and stroke tool. The button is located on the top toolbar and looks like this . Clicking on it will bring up the fill and stroke box, where you can edit the fill color and transparency plus the stroke color, weight, style and transparency.

On the above screenshot, the fill and stroke button is on the top toolbar next to a letter A. You can change the color using several methods, but the easiest one to choose is wheel. Set the fill color to bright red and make sure the A channel is set to 255 and the master opacity is set fully on at 100. These control the transparency, but we want a fully opaque image. Set the stroke color to black and the stroke width (it’s under the style tab) to 2.5 pixels.

Creating a ring shape

では輪の形を作るため、片方の円の内側に別の円を置いて、外側の円から内側の円を切り抜くので、作業に Inkscape の「パスを組み合わせる」ツールを使います。ツールを使うため、円形をオブジェクトからパスに変換します。

Go to the menu bar and select:

Path-->Object to Path

Nothing will appear visually to have happened to the circle, but you will know it is now a path because the info at the bottom of the window will say so.

次に2個目の輪をコピペします。

編集-->コピー

編集-->位置にペースト

こうして円形のパスが2個できて、重なり合っています。上層の円をクリック、これを縮小します。方法はいろいろある中で、内蔵のツールを（使い方を覚えてもらうため）使います。このツールは図形には使えずパスのみを対象としており、だから円をパスに変換する必要があったのです。

パス-->インセット

最上部の円がやや小さく見えるはずです。このチュートリアルではキーボード・ショートカットを使わないようにしてきました。しかしながら、この場合は同じ手順を数回ずつ行うため、ショートカットでかなりの時間が節約できるはずで、以下を使います。

Ctrl キーと同時に( キーを押したまま、内側の輪が希望の大きさになるまで離さないでおきます。

両方の輪を選択するため、選択ツールを2個の輪の上にドラッグするか、もしくはシフトキーを押したまま1個ずつクリックします。ここでメニューバーに移って以下を選択。

パス-->差異

これで2つのパスが1つに統合され、小さい方の輪（位置は前面）を大きい方の輪から抜きました。

輪の上に棒を引く

輪の直径と同じ長さの長方形の棒を赤色で描画し、太さは輪に合わせます。選択ツールを輪と棒の上にドラッグ、次に以下を選択します。

オブジェクト-->位置合わせと配分

三角形の位置を調整し、輪の中心に置く。

完成した画像。

これまで作った2つのパスを統合して、パスを1つにまとめます。両方のオブジェクトを選択したかどうか確認し、次の操作をします。

パス-->統合

仕上げに、このオブジェクトを時計回りに 45 度、回転させます。

オブジェクト-->変換と進み、次に回転タブを選んでから、角度ボックスに数値の-45を記入。

こうして、斜線入りの輪はこういう仕上がりになります。

ワイングラスを描く

手順の最初は、No! の文字のレイヤをロックし、それから画面の下部にある錠前ボタンの横の目玉をクリックして、文字のレイヤを隠す。次に、ワイン のレイヤのロックを解除。

• 星形ツールで丸っぽい三角形を描画。

• 三角形の大きさを縫製してワイングラスの底面を描く。
• 次にワイングラスのステム（足）を長方形で描画、ボウル（液が貯まる部分）を三角形で描画。
• 底面、足、ボウルの3つの要素をすべて選択する方法。

オブジェクト-->位置合わせと配分（Align and Distribute）と進んで、垂直に位置を揃える。

3種のパスを組み合わせるため、パス-->統合と進み、描線の幅は 1 に指定、描線の色をグレーにしてから、A（アルファ）透過度を三分の一前後に指定（好きな濃さになるまで何度か試してみる）。

ここまで来たら、グラスの上部を除去します。長方形を描画、コップの上半分を隠す大きさに指定。

楕円の上部のどの部分を切り取るか、選択して指定。

パス-->差異

これでワイングラスは完成。

ここにワインを描き足しましょうか？ 楕円を描画、三角形の描画で使った手順に沿って、ほとんどの外郭線を消します。「fill and stroke」を選択するときに勾配「gradient fill」を指定。勾配を編集し、片側でワイン色を選び、反対側に白色を選択（反射光を描くため）。これを繰り返すには「reflected」を使用。良い感じになったら、ノードツールを使い、勾配の調子を確認して、白色のノードを右と下へ引っ張り、適切な勾配に調整。

得られる結果

作品をウィキペディア用に保存

ウィキメディア・コモンズにアップロードされた全 SVG ファイル には以下の条件を必ず示す義務があります。

• どのように作成したか。記述に使えるテンプレートは、{{Inkscape}}、{{Adobe}}、{{HandSVG}}など。
• W3C 有効 か 向こう か。テンプレートの属性を正しく選択。

見た目と有効性はファイルをアップロードするより前に 必ず確認してください。使えるツールは以下のとおり。 SVGcheck

まだ未経験の場合は、手順は次のとおり。

編集-->全てを選択、あるいはまたグループアイコンを使ってグループ を指定。

拡大率が大きい場合、近接するレイヤとのつながりが揃っているかどうかチェックします。文字オブジェクトの間隔がきちんと開いているかは重要で、利用者のブラウザごとにレンダリングの結果に差が出るからです。

ここで保存する画像サイズを最小化して、ウィキページに読み込んだ時、周辺の白みが広くなりすぎないように切り詰めます。それが済んだら、保存のダイアログをクリック。

ファイル-->プロパティ-->ページのタブ-->画像範囲もしくは選択範囲にページをリサイズ（クリック）

ファイル-->名前をつけて保存

アップロードしたファイルを Inkscape 上で元のファイルと比較して、文字オブジェクトを点検 – ほぼ全ての場合にフォントが変わっています。もし気に入らなければ、変更は Inkscape で行い、その後、ファイル名は同じのまま再度、保存し直します – ここまでを数回、繰り返すこともできます。

• 注記：保存するときにファイル形式は「プレーン svg」を選び、既定の「Inkscape svg」は選びません。これは安定した画像を得る方法として推奨されています。

• 注記：標準的なHTML形式のWebページに .svg 形式のファイルを組み込むには、 <img>タグではなく<embed>タグを使います。ブラウザは既定では .svg と付いたファイルを画像ファイルではなくXML ファイルと判断するからです。

関連項目

• ヘルプ:SVG
• ヘルプ:ベクターのロゴのチュートリアル
• その他のチュートリアルは、Inkscapeでファイルを保存するを参照
• ヘルプ:Illustrator
• ウィキバーシティ用のベクター画像 – 実習と経験を共有する場所
• User:Nevit/Brushes-for-inkscape
• User:Quibik/Cleaning up SVG files manually
• User:JoKalliauer/Optimization

外部リンク

• Inkscape 初心者向けガイド (英語)
• Inkscape マニュアル (英語) - Tavmjong Bah 筆
• Inkscape マニュアル - FLOSS Manuals (英語)