記事が長くなるのはご了承下さい（＾＾；

 

という訳で、今回はお題を出しまして、細かく説明しましょう。

お題はこんなのでどうでしょう？

夏の海といいますか、ビーチといいますか、そんな感じのイラストです。今回はこれでいきましょう。

まずは下準備ですね。いろいろモノがありますから、それぞれレイヤー分けをしましょう。慣れていれば、レイヤー分けをせずともそのまま作業に入れますが、慣れないうちはきちんと分けたほうが無難です。私自身も、レイヤー分けを誤った為に、パーツが行方不明になることが多々ありましたので・・・。

今回はこんな感じに分けました。

全部で10個ですね。順番もこのままです。

ここで見ていただきたいのは、一番上の枠ですね。

これは何かというと、印刷（用紙）サイズに合わせて一番上に囲いをつけているのです。これを行うと、どこまで出力されるかわかるので、全体の調整に便利です。まぁ、これは個人的に利用しているだけですので無くても構いません。

2-0.　描画・・・の前に

準備ができましたら、早速描画に入りましょう。・・・とその前にここで保存しておく事をおススメします。どこで落ちるかわかりませんので・・・（＾＾；

2-3　砂浜の描画

どんどんいきましょう。次は下の砂浜です。・・・ですが、空と同様なので、説明する事がありません。同じように下3分の1くらいを描画して下さい。

2-4　海の描画

真ん中ですね。ここもそれほど難しいことはないと思いますが、コツだけは押さえておきましょう。

まず上の部分。水平線という事で、若干丸みをつけています。さらに下の部分。ここは境目を白で縁取って、何となく波が来ているように表現しました。

2-5　ヤシの木の描画
本格的な描画はこの辺りからでしょうね。まずはどうなっているか見て下さい。

これを見てお気付きになるでしょうか。

実はこの3本、1本をコピーして反転して貼り付けただけですｗ

こういうことがいとも簡単にできますので、ぜひ活用しましょうｗ

模様が途中で途切れています。もちろん出力されないからです。見える部分だけでOKです。

これは細かく説明しましょう。

 

 葉の描き方です。

まず、三角形を作りましょう。そして、辺はすべて曲線にします。また、この時上の頂点はノードをスムーズにして角をなくしておきましょう。

最後にフィルに色をつけ、ストロークを削除すれば完成です。

これをコピーして増やしてもいいですし、一つ一つ作ってもいいですね。

コピーする場合は、反転を活用すると反対側の葉も作れて作業短縮になります。

 

幹の描き方です。

まずは適当に四角形を作りましょう。そうしたら、横の辺を曲げます。上下は曲げなくていいでしょう。ただし、長さは調整して下さい。何となくいい感じに仕上がりましたら、色を入れます。最後に幹の模様を入れましょう。今回はストロークで入れました。樹種によって描き方は工夫して下さいね。

 

 

  

2-6　スイカ、ボールの描画

徐々に難しくなってきますね。講座のしがいが出てくるというものですｗ

 

次はこのスイカとボールを描きましょう。どちらも円を使っているのは変わりません。どちらかというと、模様のほうが難しいです。

 

 

 

 

 

 

まずはスイカから。スイカの本体は真円です。これは円コマンドをShiftを押しながら描画する事で作ることが出来ます。模様は説明が難しいので、実物を参考にされたほうが良いかと思います。簡単なコツですが、端を細く、真ん中を太めにすると、いい感じに見えてきます。

 

続いてビーチボール。ちょっと色が見えにくかったので背景色を入れてあります。

真円は同じですね。これ、単純に横に見たものを描いても良かったのですが、あえてこんな微妙な角度にしました。Inkscapeのテクニックとは異なりますが、こんな感じのも練習して損はないと思います。パーツを見て頂ければわかるかと思いますが、奥2つは内側に曲がっています。こうすることで丸みを表現するわけですね。・・・とまあ、私が言うより実物を見ていただければわかると思います。パーツは円に合わせるように曲げましょう。

最後は下の影ですね。これにも円コマンドを使いましょう。円コマンドを普通に使用すると、真円にするのは難しいですね。しかし、この場合は何となく一致しそうな楕円でいいですので、大きさに注意しながら2つの楕円を作りましょう。そうしましたら、配置を最背面にします。位置を調整して色を入れます。これは、砂浜の色に黒を加えたものを使いましょう。予め砂浜の色をコピーして貼り付け、黒の値を増やせばOKです。

ちなみにこの色は、0/8/32/12ですね。

2-7　浮輪の描画

徐々に完成に近づいてきましたね。オブジェクトもたくさん作りましたし、Inkscapeの操作は慣れてきましたでしょうか？

それでは、次は浮輪です。これはちょっと面倒です。

柄が入っているから面倒・・・ではなく、面倒な理由は別にあります。説明の際にお話ししましょう。

ちなみに2個ありますが、やはりコピーで増やしています。また、大きな影がありますが、これはビーチパラソルの影です。配置の関係でここに入れています。

 

 

見えるか不安ではありますが、真ん中に線が入っていますね。これはさしたる問題は無いのですが、問題なのは本体のほうです。本体はこの線に沿っていません。途中で折れています。ということは、これは楕円で表現できない。もしくは難しいということです。本体自体は楕円なのですが、中心の穴は楕円では出来ません。一計を投ずることになります。
 

パーツを分解するとこんな感じになっています。ここで注目してもらいたいのは、中心が空洞になっているということです。白を重ねてもいいのですが、今回の置き方では空洞でなければいけません。これには説明していないテクニックを使う必要があります。

 

 

 

 

 

上のようにオブジェクトを2つ重ね、ドラッグもしくはShiftで複数選択をします。そうしましたら、パスメニューから差分を選択します。すると、上の場合は真ん中が抜けます。基本的に大きさの異なるオブジェクトの場合、大きいほうのオブジェクトが残ります。小さいオブジェクトが差分として使われるわけです。また、同様の大きさの場合、選択順で決まります。後に選択したものが差分に使われます。

これを使用して浮輪の本体を作ります。

穴あきの楕円が出来ましたら、両端に少し角度をつけます。真ん中の穴にもちゃんとノードがありますので、それをコントロールしましょう。上の画像を参考に、浮輪に見える形にして下さい。真ん中の線はあってもなくてもいいと思います。模様はボールの要領で付けてみて下さい。面倒であれば、素のままでも結構です。

2-8　ビーチパラソルの描画

面倒な浮輪が終わってしまえば、後は難しいことはありません。次はパラソルですね。

 

これもあまり説明のしようが無いのですが、傘のバランスに気をつけてノードを打ち込むくらいでしょうか。傘のスタイルはどんなものでも結構です。自由に作ってみて下さい。

 

 

 

パーツを分解するとこんな感じです。ベースも傘の形になっていますが、合わせるのに便利なだけで、必要なものではないですね。ただ、これは作業量が特別増えるものでもないので、作ったほうが楽かもしれません。

下の部分は、砂に埋まっている様子を表現したかったのですが、イマイチになってしまいました。

2-9　カモメの描画

最後はカモメですが・・・正直オマケもオマケで、あってもなくてもいいようなものですが・・・。

 

空の中心部分にありますね。しかしこれ、波の描き方と同様です。曲げてない分、これのほうが楽です。大きさと角度に注意しましょう。

 

 

 

 

 

  

以上ですべての描画が出来ました。枠を消して（非表示にして）出力してみて下さい。最初にお見せした画像が出来ていると思います。

これにて、Inkscapeの基本講座はおしまいです。お疲れ様でした。

いえいえ、そんなことはありません。フィルにはフィルの。ストロークはストロークの良さがそれぞれあります。

ストロークは外線とお話ししましたが、ベジエ線で描かれる線もストロークです。何となく線はストロークと思って頂ければ大丈夫でしょう。でも、フィルで作られた線はストロークとは呼びませんのでご注意を。

さて、ストロークはどんな時に使いましょう？ストロークの最大の良さは、どれだけ伸ばそうが曲げようが太さが常に一定という点。これを活かしましょう。

 

少々縮小していますが、細いほうが4pxのストローク太いほうが6pxのストロークです。簡単に羽のような形を作りました。これをコピーして増やし、45度、90度というように角度をつけて、中心で合わせます。

 

 

 
 

 
 

雪の結晶っぽいものができました。確かにフィルと比べると、あまり重要ではないかもしれませんが、ストロークはストロークなりに使い様があるということも覚えておいて下さいね。

こんな感じの模様をストロークで作って増やしましょう。

 

 

 

上のも含めて3つほど作ってみました。適当に線を引いて合わせるだけでも形になりますから面白いものです。

背景が寂しかったので、簡単に木を追加。真円よりは多少崩し気味のほうがかわいいと思いましたので、雪だるまを若干つぶしました。雪の結晶はぼかしてもいいですね。ストロークの色は、薄い青色に変えて、より雪っぽく仕立て上げました。

作品はともかく、フィルとストロークについてはぜひ理解して下さいね。

 

このように、フィルだけで描くのは特別難しいわけではありません。ベジエ線で描いて、フィルに色を入れてストロークを削除するだけです。境目を見ると、ペイント系にあるはずの主線が全くありません。

 

 

メニューのオブジェクトの項目の1番上にフィル／ストロークとありました。

 

 

 

メニュー2段目、このアイコンもフィル・ストロークです。

 

画面左下、小さいですが上下にF/Sとあります。これもそれぞれフィル・ストロークの事です。

 

このように様々なところでフィル・ストロークをいじれるようになっています。これらを選択（左下の場合はダブルクリック）すると、以前にも登場しました、

 

こちらのウインドウが出てきます。

実際に細かく設定するにはこのウインドウを活用するのですが、簡易的にフィル・ストロークをいじるには左下の部分が圧倒的に便利です。

少なくとも、左下の部分でフィル・ストロークが操作できるということは頭に入れておいて下さい。

 

 

 フィル／ストロークの出し方はよろしいでしょうか。

では、フィルとは、ストロークとはそれぞれどのことを指すのでしょう。次の画像をご覧下さい。

 

大雑把に説明しますと次のようになります。

真ん中の黄緑色。オブジェクトの主となる色がフィルです。ストロークは外線の青色の部分。この線をストロークと呼びます。

それでは、実際にベジエ線をうまく使うためにはどうすればよいのか説明することにいたしましょう。

 

今回は、トレースを交えてお話ししたいと思います。題材は簡単なものでいいですね。

こんなのでどうでしょう？

 

そうです。サイコロです。正四面体で角が若干丸まっているのでこれでいいでしょう。

まずはInkscapeでこの画像をインポートします。

 

 
Inkscapeの左上のこのアイコンがインポートです。これを押して画像を読み込みましょう。面倒でしたら、ドラッグ＆ドロップでも読み込んでくれます。

 

読み込みましたら、まずはレイヤーを一つ作ります。メニューのレイヤーの一番下。レイヤーと書かれている所をクリックします。すると

 

 

 このようなものが出てきます。

今、このLaｙer 1が選択されているわけです。

このレイヤーはトレースをするサイコロの画像専用にしたいので、このまま動かさないか、名前を変えてロックしてしまいましょう。

 

 

上のLayer 1と書いてある所をクリックすると、名前が変えられます。さらに隣のカギのマークをクリックするとロックがかかり、このレイヤー上のオブジェクトは動かせなくなります。解除する場合はもう一度クリックして下さい。

次に新しくレイヤーを作ります。左の＋マークをクリックして下さい。

 

真ん中にレイヤーを追加と出ましたね。ここでレイヤー名に好きな名前をつけて、追加を押すとレイヤーが作成されます。

レイヤーができましたら、そのままのレイヤーでトレースを開始します。

 

トレースに必要なのは四角3つですね。左右と上に四角を描きます。このとき、始点と終点を重ねて下さい。すると線ではなく、四角形を作ることができます。

 

こんな感じで、トレースしてみました。

ずれていますが、これでいいのです。線が自由にコントロールできるので、ここからたやすく修正することができます。

 

 

 

線を2pxにして隙間を埋めました。ノードを動かしてそれぞれ頂点をくっつけています。これで形は立方体になりましたね。これに目を入れてしまえばサイコロの出来上がりです。

でも、このサイコロは角が丸まっているんでしたね。折角ですので正確さを追求してみましょう。

この四角オブジェクト3つは、4つのノードがあります。これのハンドルを操作して角を丸くしましょう。

 

何となく境界線が曖昧なので、これが正しいかわかりませんが、どうでしょ？

だんだん写真に近くなってきてませんか？ちなみに、サイコロの目は円コマンドで入れました。こういうところはベジエ線を使わなくてもいいですよね。

 

 

右上部分を拡大しています。

直線を活かしたかったので、両サイドにノードを打ち込み、角だったノードを丸めました。そのまま角をスムーズにしてもいいのですが、編集が少し面倒だったりします。ですので今回はこのような手法で角を作りました。これはどの角でも同じことをやっています。

 

 

 

さあ、形はできあがりました。最後は着色して、本物ソックリに仕上げましょう。
 

本物と同等に仕上げるというのは、簡単そうでなかなか難しいものです。

それぞれ、パーツごとに解説しましょう。

 

 

・右面オブジェクト（5の目）

１番濃い影になっている部分ですね。このような色は、正確な色をはじき出すより、見た目でこれが正しいと思えばそれでいいと思います。ちなみにこの色はCMYK値で０/０/０/６７です。つまり黒６７％であり、単純に灰色です。

 

・上面オブジェクト（1の目）

これも右面同様、見た目の判断で色付けしています。値は黒17％です。

 

・左面オブジェクト（3の目）

これだけちょっと他と異なっていますね。光の当たり具合を出すためにグラデーションを使用しました。左下部分から右上部分に向けて、黒17％→6％というグラデーションをかけました。グラデーションに関しては、別の機会でお話ししたいと思います。

 

・つなぎ目部分

ちょっと前の説明画像では、サイコロの分解図みたいになっていましたね。この手前の角部分、光の当たり具合が特徴的で、3つの四角では表現できそうもありません。ですので、この角専用のオブジェクトを作ってしまいましょう。ちゃんと左右下3つ別々に作ってあります。これにもそれぞれグラデーションをかけていますが、ここでのコツは、グラデーションの開始色を四角オブジェクトの色の合わせることです。右部分の場合は、黒67％→17％です。これで、光の当たり具合がリアルになるはずです。

 

以上が各オブジェクトの説明です。また、3つの四角オブジェクトにはぼかし1％。つなぎ目部分にはぼかし2％がかかっています。このぼかしの狙いは、かっちりしている作品に丸みを持たせるのと、つなぎ目を目立たなくするためです。

 

ここまでできましたら、後は細かい部分を手直しして完成です。お疲れ様でした。

今回はサイコロを使いましたが、題材はなんだって構いません。何かしら描いてみる事が大事だと思います。そうすれば自然とテクはついてくるはずですので。

 

次回は色について、少し詳しくお話しすることにしましょう。

 

-完成例-

 

 

 

 

 

 

 

 いかがでしょう。最初の画像のサイコロと比べてみて下さい。

追記：この最初のサイコロの画像は、てっきり本物だと思ってお借りしたのですが、これもイラストでした（＾＾；

しかも、ペイントツールで作られているという事で、私のような者とは一味違った描かれ方をしていますね。御見それしました。

こちらのサイコロの描き方も紹介されています。宜しければ一緒に参考にしてみて下さいね。

 

GIMPでサイコロ（角丸な直方体）を描く方法：http://gimp.blog.shinobi.jp/Entry/214/

 

というわけで、早速描画してみます。

左のコマンドバーから

これがベジエ曲線のアイコンです。これをクリックしてキャンバスに描画してみましょう。

クリックすると、マウスカーソルがペンのようなものに変わります。この状態で、一回クリック、適当なところまで伸ばしてダブルクリックで線が引けます（言い忘れていましたが、Windowsでの操作です。Macでの操作はわかりませんのでご了承ください）。

 

こんな風に線が引けましたでしょうか？太さが1pxなので見難いですね。では、太さを変えてみましょう。

 　　　


上のメニューを見ると、『オブジェクト』という項目があります。ここを開いて、一番上のフィル／ストロークを出してみてください。
 

 

こんなのが出てきました。
これは、オブジェクトの色や線の太さ、形式などを変える事ができます。

ちなみに、フィルがオブジェクトの中の部分。ストロークが外側の線です。輪郭とでもいましょうか。フィル・ストロークの回で説明します。

とりあえず今は線を引いただけですので、フィルは関係ありません。右のストロークのスタイルという部分をクリックしてください。

 

フィル／ストローク画面が切り替わりました。それぞれ説明しますと、

幅というのは線の太さです。px以外にもいろいろな単位があります。

結合というのは、折り曲げた時にどのような形状にするかを選択するものですね。左だと、普通に角ばった曲がり方になります。真ん中だと、角が丸くなり滑らかになります。右だと、外側の角がとれて、平たくなります。

角結合の限界とは、左の結合でどの角度まで鋭利にするかの限界値です。これは説明が難しいので画像を交えて説明しましょう。

 

  

角結合の限界4ですと、折り目を鋭角にした場合、このように角が取れてしまいます。

 

 

限界値を10にしました。角がついて鋭利になりましたね。角結合の限界とは、この角を保つ限界値と思っていただいて大丈夫です。ちなみに、あまりにも大きく鋭角にしてしまうと、角の長さも非常に長くなります。この点だけ注意してください。

端は線の両端がどのような形状になるかという事です。四角か丸かということだけ頭においておけば十分です。

点線は文字通り点線です。種類も豊富ですよ。

マーカーについては特に必要が無いと思います。あまり使う機会はありません。

 

では、太さを10にして見ましょう。

 

 

 

上が1px。下が10pxです。このように線の太さを自由に変える事ができます。小数点以下の値も指定できますからね。もっとも、そこまでする必要はほとんどないと思いますが・・・。

 

太さが変わりましたら、次はこの線を曲げてみます。やり方は簡単です。まずはノードの編集コマンドというものを選択します。

これですね。これを選択すると、マウスカーソルが針のようになります。さらに、線の部分にもっていくと針に手のようなアイコンが付きます。その状態で、線の真ん中あたりをクリックし、そのままドラッグするだけで線が曲がります。

ぐいっと曲がりましたね。ちなみに線の両端の点がノード、そこから出ている丸のついた棒はハンドルといいます。名前はどうでもいいですが、これの使い方は是が非でも覚えてください。詳しいお話は次回にします。

 

では次です。今度角のついた曲げ方をして見ましょう。先程、角結合のところで説明したような曲げ方です。

一つ目ですが、今までは直線だったので、クリック→ダブルクリックで引きましたが、今度は2回ほど適当な場所でクリックをしてからダブルクリックで留めてください。

 

いかがでしょう。これも立派な曲線ですよね。このように端々を折った線も容易に描けます。これにはノードが4点あります。角をつけた分だけノードが増えるわけです。クリックした数とも言い換えられるでしょう。

 

   

これも、ノードがあるだけちゃんと曲げる事ができます。

 

以上のように、Inkscapeを含めたドローソフトの線はとても自由にいじれます。この編集や組み合わせがドローソフトの醍醐味だったりまします。

今回非常に長い記事になってしまいましたが、ベジエ線はInkscapeの中でも、最もよく使うコマンドのひとつ（図形コマンドとは使用頻度が段違いです）なので、是非とも慣れてくださいね。

 

童心に返ったつもりで描いて見てくださいね。

 

それと多角形ツールですが、初期の段階では星（5角形）でしょうか。

こちらの操作について解説しましょう。

 

まず、マウスを当てて、星型/ポリゴンを作成と出るコマンドを選択します。

これですね。

すると、メニューバーの下にこのような項目が現れます。

この数字を変える事によって、いろいろな図形が描けます。

この状態では星になりますね。他にはたとえば、

 

このパラメータでは、このような図形になりました。

 

 

 

 

 

このような設定では、こんな感じになります。

これの数字を変えるだけでもいろいろな図形ができて面白いですよ。

 

 

 

 

  

こんな感じに、花のようにも花火にも見える図形もできます。

 

それでは、これを活かしてイラストチックなものに仕立ててみてください。適当な感じで大丈夫です。まずは使い方を覚えましょうｗ

 

[作品例]
　　　　

模様にしてみたり、1枚絵のようにしてみたり、図形だけでも結構いろいろできるものです。

いろいろ試してみてくださいね。

 

図形についてはお分かりいただけたでしょうか？