画像は、Nissan GT-R の画像を切り抜いて宇宙の画像に置いたものです。

チュートリアルは下のContinue（続き）をクリックしてください。

Nissan GT-R の画像をデスクトップからそのままドラッグ＆ドロップしてインクスケープの画面にインポートします。

インポートの仕方は、ドラッグ＆ドロップの他には図のようにメニューの「ファイル」→「インポート」をクリックして左に表示されているフォルダから画像を選択して、右下の「Open」をクリックしてインポートする方法もあります。

画像をインポートしたら、画像を選択した状態で、メニューの「オブジェクト」→「パターン」→「オブジェクトをパターンに」をクリックしてパターンに入れます。

パターンに入れるとフィル/ストロークの塗りつぶしを画像パターンで使うことが出来るようになります。別の言い方をすると、塗りつぶしの色を画像のパターンにするということです。

ここで、レクタングル（四角形）を描いてフィルの塗りつぶしをパターンにしたいと思います。

やり方は図のように、インポートしたイメージ画像よりも少し大きめのレクタングルを描きます。

メモ：パターンの開始地点はインポートした画像の位置を基準にしますので、パターン化したインポート画像を動かしていなければ画像の上に少し大きめのレクタングルを描けばちょうどいい大きさになります。これは何を意味しているかと言うのは後で説明します。

フィル/ストロークをクリックして、赤く囲んだ部分のパターンをクリックします。

そうすると、上に「pattern〇〇〇〇」とパターンが表示されます。図は２つの画像をパターンにしてますので２つパターンが表示されています。そこからインポートしたパターンを選択します。

ここでは１つのオブジェクトしかパターンにしてませんので、フィル/ストロークのパターンをクリックしたらレクタングルが車の画像のパターンに塗りつぶされています。

図は、インポートした画像を動かしてずれてしまった場合の例です。このようなときはオブジェクトを削除して、最初から大きなレクタングルを描いてパターン化しなおします。

次にイメージの車の部分だけを切り抜く作業をします。ベジエツールで車の外側をトレースしていきます。ベジエツールを使ったトレースはあまり細かくしなくても、後でキレイにフィットさせますので大まかに行います。大事なのは時間ですので慣れてきたらスピードを重視します。

ベジエツールを使ってトレースするときに間違った部分をクリックした場合は、キーボードの「BackSpace」を押せば１つ前のノードに戻ります。

メモ：インポートした画像は単にリンクさせている状態なので画像を別のフォルダなどに動かすとインクスケープの画面に表示されなくなります。

図は車の外側をトレースし終わったところです。トレース部分を解りやすく赤い太線で表示させています。

トレースしたストローク線の細かい部分をキレイに合わせます。ストローク線を選択した状態で、左のツールバーのノードをクリックするとノードが表示されます。丸い部分の加工は、ノードを曲線にするために、ノードを選択した状態で上の赤く囲んだシンメトリックをクリックすると図のようにノードにハンドルが表示されて曲線になります。

外側のトレースがキレイに出来たら、レクタングル（画像パターン）とトレースした線を両方選択して、「パス」→「交差」をクリックして車の部分だけを切り出します。

複数のオブジェクトを選択する場合は、Shiftキーを押したままオブジェクトをクリックして選択します。

切り出した車の画像は図のようになります。図は解りやすくするために背景をグレーにしています。

ウィングの部分の中が切り抜かれてなかったので、ベジエツールで中の部分をトレースして切り抜きます。２つのオブジェクトを選択した状態で、「パス」→「排他」で切り抜けます。

図は宇宙の画像をインポートして、上の作業で切り抜いたNIssan GT-R を重ねたときの画像です。車の画像が背面になって見えなくなったら画像を選択した状態で、メニューの「最前面に移動」ボタンをクリックします。

図は、車の画像の配置を変えようとしているときの図です。反転させたり角度を変えたりすることができます。

Thanks for watching!!

顔のモデルはエビちゃんです。普通、人の顔をトレースしたら少しは違和感があり修正が必要なんですが、エビちゃんの顔はほぼ完璧？なのか修正いらずでした。描きながらエビちゃんの顔の輪郭、目、鼻、口などの創りに関心してました。(⌒^⌒)ｂ　うん

Face :

顔の部分です。

Eye:

目の部分を拡大したものです。

first drawing of hair was meshed darkbrown. I have changed to angel's hair later.

最初、髪の毛の色はこげ茶色のメッシュでしたが、最後に天使にしたときに少し違和感があったので色の大半をグレー、白、オレンジに変えました。

今回は、慣れると簡単で10分もあれば出来てしまうインクスケープのビットマップトレース(bitmap trace)を使った描き方を紹介します。

出来上がりは下のようになります。写真の女性は、Natalie Janzというカナダの売り出し中のアーティストです。Myspaceで何度かメッセージを交換したことがあって、とてもセンスのいい写真でしたのでここでちょっとこれを使って作品を描いてみようと思います。

今回の講座のSVGファイルは、↓からダウンロードできます。
ダウンロード

インクスケープに画像をドラッグして投げ入れます。

画像を選択して、「パス」から「ビットマップをトレース」をクリックします。

ビットマップトレースのモードは３種類あります。

1. 明るさの境界
2. エッジの検出
3. 色の量子化

これは、エッジの検出を選択したときのプレビューです。丸いラジオボタンを選択してから「更新」をクリックするとプレビューが変わります。

これは、色の量子化を選択したときのプレビューです。

そして写真に適したものを選択します。今回は「明るさの境界」で「しきい値」の数値を小さくしたもので描いてみます。左のイメージは、値を0.1にして更新ボタンをクリックしたときのものです。ここで「OK」をクリックします。

次に、写真の画像を右に移動させると左のイメージのようになりました。赤く囲んだ部分がビットマップトレースで描写したオブジェクトです。

ここで、注意しておきたい項目を説明します。

左のイメージの赤く囲んだところに「パス(1400個のノード)」と書かれています。ノード数が増えるとファイルが大きくなりインクスケープ自体がフリーズしやすくなります。ここでは1400個ですのでまだまだ大丈夫ですが、ビットマップトレースを何個も生成しているとノード数が極端に増えることがありますので注意してください。

左のイメージはノードツールを選択してオブジェクトのノードを表示したものです。上で説明したのは、この四角いノードが1400個あるということです。場合によっては余計なノードを取り除く作業が必要になります。

次に、服と帽子と髪の毛に色を付けてみたいと思います。

まず服の部分をベジエツールで大まかにトレースしてみます。背後に置きますので下にはみ出ないように描きます。

ベジエツールで描いたオブジェクトのフィルの色を赤にしようとしているところです。カラーバーから赤をドラッグして左下の Fill: None と書いてある部分にドロップします。これでフィルが赤になります。ストロークは黒の1（デフォルト値）になっています。

左のイメージは、(フィルの色を)赤にしたオブジェクトを背後に置き換えたときのイメージです。そうすると服の部分が赤になりました。

次に右上のフィル/ストロークボタンをクリックします。

赤く囲んだ「パターン」をクリックしてベジエツールで描いた赤いオブジェクトにパターン色を付けてみます。

適当なパターンを見つけて、作品にあったものを探します。今回はcloth(bitmap)を選びました。

cloth(bitmap)のbitmapとは、このパターンはビットマップイメージという意味です。ビットマップイメージとは、画像のピクセル(Pixel=Picture element)のマトリックス情報を格納する形式です。通常、画像を保存したときのイメージ形式です。ラスターイメージとも呼ばれますが・・・難しく考えずに、主にJPEG形式(.jpg)、 GIF形式(.gif)、　PNG形式(.png)の３種類があるということが分かればいいです。

ビットマップ形式は、大きく拡大するとベクターではありませんので画質が落ちます。

NOTE(パターンについて)：パターンは、オリジナルを作ることができます。インクスケープで描いたもの、または取り込んだビットマップのパターン画像を選択して、メニューから「オブジェクト」→「パターン」→「オブジェクトをパターン」をクリックするとパターンの選択リストの中に表示されます。

左のイメージは、帽子と紙に色をつけた後の完成イメージです。

本体のオブジェクトを一番背後に置き換えると、左のイメージのようになります。髪の毛はBlurで10程ぼかしています。clothも0.5にぼかしています。

Thanks for watching^^

Screencasters Flickr's page

Screencasters のInkscape チュートリアルの動画の中でインクスケープの使い方を教えてくれているHeathenx さんたちが作ったFlickr's page です。

もしインクスケープで作った作品があればサインアップして公開してみませんか？他のアーティストとコミュニケーションが取れたり、様々な作品が見れます。作品は結構集まっていますので、是非見に来てください。Screencasters Flickr's page

描きたい画像をフォルダからそのままインクスケープにドロップすると画像が取り込めます。まず、ドキュメントの設定で画像の大きさに合わせて、ページの幅と高さを設定します。レイヤーを使いますので、画像がずれた場合などに備えて位置を決めておきます。（画像の大きさは画像を選択したときにメニューバーの右側に表示されます）

次に、整列/配置ツールで、基準をページにして画像がページ内に入るように中心位置の高さと幅を合わせます。そうすると、図のように画像がぴったりとページ内にあてはまります。

今回は、レイヤーを３つ追加します。簡単な画像なのでただ描くだけだったらレイヤーは１枚でも出来ますが、便利な機能ですし使うのが基本です。レイヤーを何枚も作っていろんな背景や小物などを各レイヤーに描いておくとレイヤーの変更だけでいろんな背景が選べます。

1. Layer1には、元の画像
2. backgroundには、左側のキャタピラ
3. Kaoには、やわらかアトムの顔
4. frontには、右のキャタピラ

そうすると、下のプルダウンメニューに４枚のレイヤーが表示されます。目の部分をクリックして表示/非表示を切り替えます。左の図はbackgroundに設定してあり、４つのレイヤーすべてがアクティブになってます。

次に画像の透明度を描きやすいように設定します。Opacityを適当な位置に調整します。そうすると、図のように半透明な感じになります。

左の図は、右のキャタピラを描いています。一番手前にあるパーツなので、レイヤーはFrontにしておきます。ベジエーツールでキャタピラの型を取ります。

左の図は、描いたキャタピラの形のノードをシンメトリックにしてます。図のように四角いノードと丸いハンドルが表示されますので、角ばった部分を調整します。

NOTE:このとき、フィル/ストロークのフィルは「塗りなし」にして、ストロークを単一色（黒）にして幅を適当な大きさにします。また、奥にある部分から書くと、オブジェクトを手前に設置し直したり、背後に設置し直したりする手間が省けます。

図は、キャタピラの型を取り終えてノードとハンドルで丸みをつけたりはみ出した部分を調整しているところです。ベジエツールで直線を描くには、最後に[Enter]キーを押せばベジエツールは描いた最後のノードで切れます。

次に、レイヤーのkaoとLayer1だけを見えるように表示にして、kaoをアクティブにします。そして図のように顔の輪郭をベジエツールで描きます。ストロークの幅を適当な大きさに調整します。

顔の輪郭を取ったら次は目と口をベジエツールで描きます。目の部分の上にあるまつ毛？の部分は別に描いて重ねます。目の部分もノードとハンドルを調整します。

目の上のカーブ型の部分を目の上に重ねて、ストロークの端を丸めます。

次に、頭（髪）を描きます。顔に重なる部分は背後に設置しますので適当に描いても大丈夫です。あまりノードが増えないように描くようにします。そして、フィル/ストロークのフィルを単一色（黒）に変更します。すると図のように黒い色がつきます。

次に、髪の部分を背後に設置してますが、この画像は間違ったレイヤーに頭を描いています。頭のレイヤーはKaoなのにLayer1(元の画像のあるレイヤー)に描かれています。半透明の元の画像の背後にあるから図のようになってます。

頭の部分の２つの白い四角い部分もベジエツールで描きます。分かりやすいように赤にしています。

NOTE：オブジェクトを選択して、Shiftキーを押したままPageUpキーでオブジェクトが上のレイヤーに移動し、PageDownで下のレイヤーに移動します。間違って違うレイヤーに描いた場合、早めに移動します。複雑なものを描いたときに小さなオブジェクトが背後に隠れて見えなくなることがあります。

次に、顔に色をつけます。図は「CMYK」でC0-M15-Y30-K0に設定しました。特殊な色を見つけるにはホイールなどよりもこちらのツールが見つけ易いと思います。（使い方は人それぞれです）

次に、目と口に色をつけます。目は図のようなライトブルー、口は白にしてます。

図は、すべてのレイヤーを見えるように表示した状態です。左のキャタピラはBackgroundのレイヤー（下から２枚目）に描かれています。

次に、キャタピラに色をつけます。キャタピラの外枠の部分を選択してから行います。CMYK の設定はC0-M58-Y100-K0にしてます。

今度は、左側のキャタピラに色をつけます。図のようにレイヤーをBackgroundにして、キャタピラを描き、黒い影の部分を最後に描きます。キャタピラに色をつけて影の部分を黒にします。（フィルを単一色）

すべてのレイヤーを見えるように表示したら図のようになりました。頭の２つの四角いパーツを白にしました。

次に、キャタピラの中の丸い部分に色をつけます。図のようなCMYKの設定値になります。

最後の仕上げ工程です。頭や顔、キャタピラのを選択してノードをシンメトリックにしてハンドルを調整しながら丸み等をつけていきます。

頬の部分に赤みをつけます。円を描くツールで適当な大きさにして、図のように色をつけます。頬の部分に設置したら、目のオブジェクトを選択してメニューバーの背後に設置するボタンを押すと目の背後に置かれます。

完成です。

Thanks for watching^^ありがとうございました。

今回の講座のファイルはダウンロードできます。やわらかアトム講座ファイル

顔の部分を選択するとこうなります。

3D Boxesツールは、X軸(Angle X)、Y軸（Angle Y)、Z軸(Angle Z)を基準に設定されます。画像は、この３つの軸の右横にあるボタン"||"を押して見やすくなるように設定しています。X軸を１８０度、Z軸を２７０度にすると前面が水平、垂直になります。

オブジェクトに色をつけて、ストロークを設定してみました。結合部の角を丸くして黒で幅を7pxほどにしてみました。

画像は、X軸を１８０度から１６０度に変更した図です。X軸が２０度傾きました。

画像は、Z軸を２７０度から２２５度に変更した図です。Z軸が４５度傾きました。

オブジェクトの中心に、× があります。これをマウスでドラッグするとオブジェクトは自由に移動することが出来ます。

左の画像は、オブジェクトの中心が＋のきに、中心となる＋を移動したものです。これを移動するとオブジェクトは、そこを中心に回転します。

画像は、Y軸を９０度に変更した図です。

次に、オブジェクトの６つの面をバラバラにしてみます。まず、パス→オブジェクトをパスへをクリックします。これでオブジェクトを一旦パスにします。

次に、パスをカットします。

パスがカットされると、図のようにオブジェクトの各面が選択可能になります。

画像は、オブジェクトの６面をすべてバラバラにした図です。

左の画像は、面に別々の色をつけて箱が開いたようにした図です。アイディア次第でいろんなグラフィックが出来そうですね＾＾

未来の有能なデザイナーの皆さん、海外のグラフィック・デザイナーに負けないで頑張ってください。

Thank you for watching !ありがとうございました。

こちらは、キャラクター文字などのフォント集です。

"A Guide to Inkscape" という洋書の中で紹介されているサンプル作品です。

インクスケープで製作された WEB時計(ブラウザはFireFox,Safari,etc.)のリンクです(SVG FILE)。IEの場合、SVGファイルは表示されません。

IE以外のブラウザをお使いの方は、下の"CONTINUE READING" でフレーム内でWEB時計が見れます。