InkScape入門 ハニカムビーを描く

2011/4/28 23466hit

Android Nightで発表した
InkScapeを初めて使う人向けの、イラスト講座です。
ドロー系ツールの組み立てながら絵を描いていく感覚を楽しんでもらえたらと思います。

まずはInkScapeを起動。
すると縦長の空白が表示される。

まずはこれを正方形の形にしよう。
現在Androidで使うアイコンの最大サイズはAndroidマーケット用の512x512
ドロー系ツールでは解像度の変更が簡単なんだけれど、
大きな解像度から小さない解像度に変更するほうが楽で綺麗に仕上がるので、
必要なサイズの最大サイズで作ることをおすすめ。

ファイル-ドキュメントの設定を選択

ページサイズをカスタムサイズから縦512横512に設定し☓をクリックする。

キャンバスが小さな正方形に変わる。

このままではサイズが小さすぎて作業しづらいので画面を拡大する
右下にあるZを100%に変更する。

まずは胴体を作る。
胴体は角を丸めた長方形で作ることにする。
ツールパレットから四角い【矩形ツール】を選択する

ハニカム君の体をイメージして大まかにキャンバスへ縦長の長方形を描く
全体のサイズは後でも変更可能なのであまり気にしなくてもOK

ハニカムくんのおしりは丸いので長方形の角を丸めてあげる。
長方形のうち右上の部分(他の3点と違って丸いポインタなのに注意)を選択して真下にドラッグする。

4隅が丸くなるので程よい丸さに調整する

ハニカムくんは頭の部分が別のパーツになっているので、頭の部分は別でつくることにする。
まずは今、頭になっている部分を切り取る
【矩形ツール】で頭の部分と重なるように長方形を描く。
角が丸い長方形になってしまったら、右側の丸いポインタを右上にドラッグして角が尖っている状態にすると作業しやすい。

最初に作った本体と今作った長方形をシフトを押しながら二つとも選択する。

メニューバーの【パス】-【差分】を選択すると、
元の本体のうちあとで作った正方形と重なる部分が切り取られる。

次に頭を作る。
まず、丸を作って先ほどと同じように下半分を切り取る。
ツールバーから丸い【円/弧ツール】を選択する。

頭の位置に大雑把に配置する。
サイズや位置はあとで調整するので画像のように適当でもOK

円の下半分を切るために【矩形ツール】で円の下半分に長方形を重ねる。

シフトキーを押しながら描いた円と長方形を選択する。

メニューバーの【パス】-【差分】を選択する。

半円が出来上がるので、半円を選択して、頭の位置に移動、サイズ調整する。

次におしりの針を描く。
針のもととなる三角形を描くためにメニューバーから星型の
【星形ツール】を選択する。

【角】が3となっていることを確認

おしりの位置に設置する。

ハニカム君の針は三角形というよりは先がより鋭角になる特徴的な形をしているので
三角形が選択されている状態で、メニューバーの【パス】-【オブジェクトをパスへ】を選択

パスを編集するためにツールバーから
【ノードツール】を選ぶ

三角形を選ぶと三角形のパスが編集可能な状態になるので、

左辺の中間にあるポインターをドラッグして先が尖った形とする。

同様に右辺の中間にあるポインターもドラッグして先が尖った形にする

この状態ではくぼみが鋭角でぎこちないので、角を丸めてあげる。
窪みになっているポインターをシフトキーを押しながら二つとも選択する。

【選択ノードの種類を対象に】をクリックする。

ポインターが不思議な形に変わってパスが曲線に変わる。

見えづらい場合は三角形以外をクリックしてみようポインターが消えて曲線が見え易くなる

次にアンテナを描く。
アンテナのような棒状のものはペンツールで作ると便利。
ツールバーから【ペンツール】を選択する。

ここからはちょっと難しいので要注意
まず、頭の視点となる部分をクリックし、そこからアンテナの先端部分までマウスカーソルを持って行き「ダブルクリック」する。
シングルクリックだと線の通過点を設置するだけになってしまうので、まちがってシングルクリックしてしまったときは一度エスケープキーでキャンセルしてもう一度最初からやり直し

アンテナというより針金といった具合に細すぎるので線を太くする。
【フィル/ストローク】を選択する

フィル/ストロークウィンドウが表示されたらストロークのスタイルを選択して、幅を20程度まで増やす。端は丸を選択する。

続けて右側のアンテナも作る。同じ作業を2回やるのもなんなので、
今作ったアンテナを複製する。
アンテナを選択し、メニューバーの【編集】-【複製】をクリックする。

一見すると何も変化がないけれど、アンテナが複製されてピタリ同じ位置に2重に重なった状態になる。

アンテナが選択されたままの状態でメニューバーの【オブジェクト】ー【水平に反転】を選択

選択されていた片方のアンテナのみが左右反転され。ばってん状に表示される。

アンテナの位置を調整して左右からアンテナが出ているようにする。

このままではアンテナというより眉毛なので
頭本体と結合する。
シフトキーを押しながら左右のアンテナ部分を選択する。
この時誤って頭部分をいっしょに選択しないように気をつけよう。

メニューバーの【パス】-【ストロークをパスに変換】を選択する。

ストロークがパスと塗りに変換される。
パッと見では差が見えにくいかもしれないけれど、【フィルとストローク】でパスとストロークに別々の色を設定すると、アンテナがストローク(枠線)とフィル(塗り)で構成されているのが分かる。

次に頭部分と合体させる。
シフトキーを押しながら左右のアンテナと頭部を選択して

メニューバーより【パス】-【統合】を選択する。

頭部とアンテナが結合される。
この際最初に作った頭部のフィルとストロークが優先されて、アンテナ部分のフィルとストロークの設定は破棄される。

羽を作る。
羽も先程のアンテナと同じ要領で、まずはパスを作る。
ツールバーから【ペンツール】を選択する。


開始点でクリック、終了点でダブルクリックする。

フィル/ストロークウィンドウが表示されていない場合
【フィル/ストローク】を選択する

ストロークのスタイルから線の太さを増やして80ほどにする。
端は丸を選択する。

同様に斜め線も【ペンツール】で描き、【フィル/ストローク】で太さを60ほど、端を丸とする。

シフトキーで羽を二つとも選択し、

メニューバー【パス】-【ストロークをパスに変換】を選択する。

ストロークが太くなりすぎた場合などはストロークの幅を1とする。
右側の羽も作るために、メニューバーの【編集】-【複製を選び】

【オブジェクト】-【水平方向に反転】を選択する.

右側のに反転した羽を移動する。

全体のシルエットができたので目を書く。
ツールバーから【円/弧ツール】を選択して、右目の位置に配置する。

メニューバーの【編集】-【複製を選び】左目も作る。

羽が体の前に来ているので、体を最前面に移動する。
体を選択して

【最前面に移動】を選択する。

体が羽よりも前に移動してそれっぽくなった。


ここからは色を塗っていく。
ハニカムくんの体は黒字に青いラインなので、土台となる黒塗りを行う。
シフトキーを押しながらボディと頭を選び
【フィル/ストローク】を選択する
フィルタブで単色を選び
単一色のホイールタブで黒をチョイスする。

ストロークが残っている場合は不要なので、ストロークを消してしまう。
ストロークの塗りタブを選択して、【なし】を選ぶ。と
枠線がない黒一色の顔と体が出来上がり。

目玉を塗る。
シフトキーを押しながら左右の目玉を選択する。
ハニカムくんの目玉は怪しく水色に光る目玉なので水色を選択する。
ストロークの塗りを【なし】として、
フィルを水色に設定する。
体はホイールで塗ったので今度はHSLを使ってみる。
HSLは色相、彩度、明度、不透明度のパラメータを調整する方法で、
SとLが設定されていないとグレーになったり、白黒になったりする。
まず、H(色相)で水色から若干青よりの部分をチョイスする。
この時点では彩度や明度が設定されていないのでまだ色がつかない。
次にS(彩度)で最大値を選択する。
L(明度)は中間より明るめを選択。これでやっと色がつく。
最後にA(不透明度)を最大にセットして完了。

※HSLAに関してはかなり癖があるけれど、色づくりでとても便利なのであえて紹介しました。
 どう便利なのかは今後色づくりを紹介するときにあわせて紹介したいと思っています。

おしりの針も同様に塗っていく。
ストロークの塗りを【なし】にして、
塗りを単色とし、
H(色相)を水色からちょっと青に寄ったところ
S(彩度)を最大
L(明度)を中間より明るめ
A(不透明度)を最大とする。

羽を描く。
ハニカムくんの羽は半透明に透けて見えるので、今回も半透明の塗りを描く。
H(色相)を水色から青に寄ったところ
S(彩度)を最大
L(明度)を中間よりやや暗め
A(不透明度)を中間程度とする。

体の模様をつける
ハニカムくんには3つの模様がある。
今回はこれを模様オブジェクトを付けることで再現してみる。
まず、【矩形ツール】を選び、おおよその大きさで横長の角が尖った矩形を描く。
縦の太さは適当で大丈夫。

メニューバーの【編集】-【複製】を選び
オブジェクトの間隔を開けて配置する。
もう一度メニューバーから【編集】-【複製】を選び、矩形の高さと矩形の間隔がほぼ同じぐらいのところに並べる。
この時、体を大きくはみ出しても大丈夫。

縦の間隔を揃えるために整列と配置ツールを使う。
シフトキーを押しながら3つのオブジェクトを選び
【オブジェクトを整列および配置】を選ぶ。

中心を垂直方向に等間隔で整列を選択する。

これで3つの矩形が綺麗に等間隔で並ぶ。

3つバラバラのオブジェクトだと扱いづらいのでひとつに纏める。
3つの矩形が選択されたままの状態で、メニューバーの【パス】-【統合】を選択する。

これで、3つの矩形が1つのオブジェクトとしてまとまる。
体の位置に合うように、サイズを調整する。
横方向ははみ出してもOK

模様を体に合わせるために、体のパスをもう一つ用意する。
体を選びメニューバーの【編集】-【複製】をクリックする。

複製されたオブジェクトは最前面に置かれるので、3つの模様より前に体が来たように見える。

縞模様の体からはみ出した部分を削るため
Shiftキーを押しながら先ほど複製した体と、縞模様を選択する。

メニューバーの【パス】-【交差】を選択する。

縞模様のうち体からはみ出た部分が削られたのがわかる。

ハニカムくんは意外と腹黒らしく、縞模様も中心部分が暗く、端に行くほど明るくなっている。
グラデーションツールを使ってこの模様を描いていく
縞模様を選択し、【フィルとストローク】で【線形グラデーション】を選択する。

デフォルトのグラデーションが適用されている。

これだと左側が明るくて右側が暗くなっているので腹黒グラデーションになっていない。
グラデーションを調整するには【フィルとストローク】で【線形グラデーション】の【編集】を選択する。

【グラデーション】ウィンドウが開く。
【グラデーション】ウィンドウの上部にあるリストボックスを開くと選択したグラデーションで使用されている色の一覧が出てくる。
色は左半分が透明度、右半分が色を表す。
透明度はチェック模様の透け具合で見ることが出来、チェック模様がくっきり見えるほど透明度が高いということになる。
この場合、stop3859は青の不透明、stop3861は青の透明を表す。
これにより、青の不透明から透明へ直線的なグラデーションで描かれることになる。
縞模様が青から黒のグラデーションになっていたのは、透明部分が下の黒を透かして黒く見えていたから。

体の右側も透明でなくするために、透明の色(図ではstop3861)を選択する。
色を選択するとその色についての詳細が出てくる。
透明度はHSLAのうちA部分。
この値を255にすると完全に不透明になる。

ところが、このままでは開始色と終了色が同じ色になってしまうのでグラデーションにならない。
そこで、中間の色を追加してやる。
色フェーズを追加ボタンを2回選択する。

色フェーズが追加され、リストボックスを開くと4つの色で構成されていることがわかる。
追加された色は前後の色フェーズのちょうど中間となる色で作成される。
例えば白と黒の間に色フェーズを追加すると灰色の色が作成される。
今回は前後の色フェーズが同じため追加された色も前後の色と同じ色で作成されている。
腹黒さを表現するためにこれから中間部分の2色を暗くする。

2色目を選択して【L】を33まで減少させる。
中間部分が暗くなり、グラデーションになっていることが【グラデーション】メニューの上部で確認できる。

同様に、3色目も選択し、【L】を33まで減少させる。
中間の黒い部分の幅が広くなってきたことがわかる。

ところが黒い部分が左側に寄りすぎているように見える。
これはグラデーションに色フェーズを追加するときに、前後の色フェーズの丁度中間となる色で作成されると説明したが、色の位置もちょうど中間となることに起因している。
最初の色フェーズ追加では、左端と右端のちょうど中間として全体の中央に色が追加されたのに対して、
次の色フェーズ追加では、左端と、先ほど追加した中央のちょうど中間として左から1/4の所に色が追加されてしまう。
色の位置は【グラデーション】ツールの【オフセット】を調整することで数値的に編集することができるが、画面上で視覚的に編集することも出来る。
【ツールバー】から【グラデーション】を選択する。
グラデーションツールはツールバーの最後の方にあるので画面のサイズによってははみ出して表示されていないかもしれない。 その場合はツールバーの最後にある【>】を押すと表示されていないツールが出てくる。

グラデーションツールを使用して縞模様を選択すると、グラデーションの向きを示すバーと、色フェーズを表すポインタが表示される。
中央にあるポインタを右側にドラッグして左側とバランスが撮れるように調整する。

目が光っているのを表現する。
ハニカムくんの目は怪しく光っているのだが、今の目はのっぺりしていて光って見えない。
元の目に加えて、光のぼかしを追加することで光を表現する。
目を選択する。

メニューバーの【編集】-【複製】をクリックする。

複製した目に対して【フィルとストローク】で【ぼかし】を選択する。
目の周囲がぼやけて光って見えるのでぼかしの値を調整していく

同様の方法で体の光も表現する。
Shiftキーを押しながら頭部、胴体(縞模様を選択しないように注意)、針を選択する。

メニューバーの【編集】-【複製】をクリックする。

複製されたオブジェクトは最前面に表示されるので目玉や縞模様が消えて見える。

焦らず、そのままメニューバーより【パス】-【統合】を選択する。

頭、胴、針が一色で統一される。

光っているように見せるために、【フィルとストローク】でフィルを調整する。
Hに142、Sに255、Lに130、Aに255を設定し、水色の単色とする。
光を表現するために【ぼかし】に4程度を設定する。

ツールバーの【最背面に移動】を選択して、胴体の後ろから光っているようにみせる。

なかなか怪しい雰囲気

ハニカム君の位置を調整してやる。
全てのオブジェクトを選択して、
メニューバーの【オブジェクトの整列と配置】を選択し、【基準】をページ、【選択オブジェクトをグループとして扱う】にチェックを入れた状態で、
【中心を垂直軸に合わせる】および、【中心を水平軸に合わせる】をクリックする。
ハニカムくんがページの中央に配置される。この状態でサイズなども調整できる。

次にボタンを作る
矩形ツールでハニカムくんがゆったりと隠れるくらいの矩形を作る。

ボタンらしく角を丸める

ハニカムくんを中央に寄せたときと同じ要領で矩形を選び
【オブジェクトの整列と配置】を選択し、【基準】をページにチェックを入れた状態で、
【中心を垂直軸に合わせる】および、【中心を水平軸に合わせる】をクリックする。

ボタンがハニカム君の背後に来るようにツールバーの【最背面に移動】を選択する。

ハニカムくんが表示された。

ボタンが明るすぎてハニカムくんが光っているのが見えづらいので、ボタンの色を調整する。
暗めの色にすると、光が目立ちやすい

ボタンが膨らんでいる様子を表すのにはフィルタを使用する。
メニューバーの【フィルタ】−【ベベル】−【プレスした鉄】を選択する。

塗りの周囲が装飾されてボタンに見えるようになった。
ちなみにフィルターを設定するとSVGに対応したブラウザでもほとんどが表示に不具合が出るようになるので、SVGデータとして使用する場合はフィルターは使用しない方が無難

データをビットマップとして出力するにはメニューバーの【ファイル】ー【ビットマップにエクスポート】を選択する。

なお、ここでいうビットマップはWindowsのビットマップ形式ファイルの事ではなく、PNG等ペイント形式のデータのことを指す。
ページを選択し、ビットマップサイズに出力したいサイズを指定してファイル名を入力後エクスポートを選択するとビットマップ(png形式)で画像が出力される。

注意点として、ここで出力されるデータはビットマップ形式なので、ベクターのデータは保存されない。
ベクターのデータがあれば色を変えたり、解像度を変えたりといったことが容易にできるため、ベクター形式は別に保存しておこう。
メニューバーの【ファイル】−【保存】を使うことで拡張子svgとしてベクターを保存できる。

ベクターを別形式で保存する場合は、
メニューバーの【ファイル】−【名前を付けて保存】を選択する。
この時、右下にファイル形式が選択できるので、出力したい形式を選択する。
なお、この場合においても、Inkscape SVG,Inkscape SVG圧縮以外の形式で保存した場合、データの一部が失われることがあるため、元のInkScape形式も保存するように注意が必要。

以上で駆け足しにてInkScapeの描き方を紹介しました。
InkScapeでより高度な絵を描くためにレイヤーなど今回紹介しなかった沢山の便利機能があります。
けれども、ほとんどのイラストはここまでに紹介してきた機能をメインとして使用します。
まずは、いろんな絵を描いてみて、隠れた機能を探してみてください。

前:支援活動可視化システムdonatterの紹介と協力者募集 次:ニュートン2011年6月号 大特集原発と大震災について

関連キーワード

[Android][イラスト][IT]

コメント

名前:kensei|投稿日:2011/04/29 12:08

良記事♪キャプチャ大変そう(汗)

名前:kenz|投稿日:2011/04/30 10:28

ありがとう、キャプチャーするために、再度ゼロから作り直したんだけれど、内容書いているうちに追加でキャプチャーする物が出てきたりして大変だったよ
今度から動画で撮ろうかな

コメントを投稿する