AZ::Blog

ハイチ地震救援金を呼びかけるリボンを作ってみました。

ついでなので、このリボンの作り方のチュートリアルを（初心者向き）。
役に立ったら、募金してみてくださいね（役に立たなくても★）。

Inkscapeというフリーソフトを使います。
アドビのイラストレータみたいな、ベクター画像を扱うソフト。

ベクター画像っていうのは、拡大しても画像が荒くならないやつ。
フォトショップやペイントなど、ドロー系のソフトで作った画像は、ラスタ画像と言って、拡大するとギザギザのモザイクみたいになります。
ピクセルという点の集まりとして、描かれているから（でよかったかしら）。
一方、ペクターだと荒くならないのは、こんな色、こんな線の形と、図形の情報として記録されてるから（と思う）。
詳しいことは検索してみてください。
そんなに詳しく知る必要もないけど、なんとなくわかってると、そこはかとなく役立つかも。
◇ベクターイメージ – Wikipedia

STEP１　四角形を描く

まず、長細く四角形を描きます。
左端に並んでるツールの、□の形をしてるボタンがそう。
ここをONにしてから、キャンバス上をクリックしたままドラグすると、四角形が描けます。

ベクタ画像のポイントは、「線（ストローク）＋塗り（フィル）」で出来ているってこと。
子供のお絵描きで、輪郭をクレヨンで描いて、中を水彩絵の具で塗り塗りする感じ。
「一筆の囲み + 一色の塗り」がひとつの単位。
これをいっぱい組み合わせて、複雑な絵を描いていくイメージ（実際には、もうちょっと融通が効きますが）。

さて、描いた四角形を右クリックして、「フィル / ストローク」。
すると、「フィル / ストローク」パネルが右側に出現します。
今回は、フィル（塗り）は赤、ストローク（線）は無し、にします。「無し」は×マーク。

で、狭いんで、いったん「フィル / ストローク」パネルは閉じて。

STEP２　変形する

次に、左側にずらっと並んでるツールから、二番目の「ノードでパスを編集（Edit Pass by Nodes）」をクリック。
上部にへんなマークのアイコンがいっぱい出てきます。
そこから、「選択オブジェクトをパスに変換」というのを選びます。
すると、赤い四角形の四隅のマークがちょっと変化します。「パス」というものに変化したのです。
（赤い四角形を選択状態にしていないと、うまくいきません。
赤い四角形の上をクリックすると選択、まわりの白いところをクリックすると、選択解除。）

四角形の四隅の「◇」マークをクリックしたまま引っ張ると、変形できます。
四隅だけでなく、輪郭線（ストローク）の上あたりで、カーソルが手の形になると、線を引っ張ることができます。（「手の形」は、grab = つかんだ形。）
四隅の「◇」マークからは線が伸びていて、その先端の「○」マークをクリックしたまま引っ張ると、曲線がいろいろ変化します。
どんなふうにしたら、どう変化するか…遊びながら、だいたいの感じをつかみましょう。

より細かく制御するには、線（ストローク）上でダブルクリック。「◇」マーク（「ノード」という）が追加されます（上の絵では、真ん中へんに追加しています）。
ノードが増えると、部分部分にわけてストロークを制御できますが、増やしすぎると難しくなります。
また、「オブジェクト→９０度回転」を使うと、横のものを縦にできます。
そうして、形が変わるさまを楽しみながら、リボンの半分の形を作ります。

同様に、もうひとつ四角形を作って、リボンの残りの半分を作り、重ねます。
慣れないとわりと難しいですが、だいたい上のような形にしてみましょう。

STEP３　影をつける

できたら、左端に並んでるツールの一番上、矢印の形の「選択ツール」をクリック。
リボンのどちらかの上で右クリックして、「複製」。
さらに右クリックして複製したものの「フィル / ストローク」で、フィルの色を黒にします。
そして、ぼかしを４くらいに設定。
「オブジェクト→背面へ」で、元の赤い四角形の下に配置して、シャドウっぽくします。
同じように、もうひとつのリボンも、複製して、黒くして、ぼかしをかけて、下に配置。
重なり具合で影の感じが変わるので、工夫してみてください。

STEP４　グラデーション

赤いリボンのどちらかを選択。
左側のツールの下から二番目、「グラデーションを作成/編集」をクリック。
赤いリボンのちょっと外側あたりをクリックしたまま、リボンをまたぐように引っ張ります。
するとグラデーションがかかります。

上にある「編集」をクリックして、グラデーションの色を編集します。
「色フェーズを追加」をクリックし、パレットから色を選ぶと、その色が追加されます。
ステージ上のグラデーションのガイドの線上に、追加した色の分かれ目が「◆」で表示されます。
それを移動すると、色の境目も移動します。

いろいろグリグリして、感じのいいグラデーションを作ります。
基本は「光と影」なんで、黒っぽい赤や明るい赤のフェーズを追加して、あちこちをグリグリ移動し、感じのいい色合いを探します。
ここが腕の見せ所…というか、いろいろやってるうちに、いいのができますから、「偶然」をうまく取り込むのがコツ（そんな教え方でいいのか…）。
同じように、もうひとつのリボンにもグラデーションをかけます。

STEP5　赤十字のマークをつけて、完成

これでできたようなものですが、リボンに赤十字の印をつけて、アクセント。
ステージのあいてる場所で、四角形（正方形）を作り、フィルは白、ストロークは黒。不透明度を７５％くらい。
その上に赤い長方形を作り、右クリック→複製して、「オブジェクト→９０度回転」で、十字にします。
選択ツール（左ツールの一番上の矢印のやつ）で、できた図形全体をドラグして選択。
すると、白正方形と赤十字が全部選択状態になるので、「オブジェクト→グループ化」。

これで赤十字マークがかたまりになって移動できるので、リボンのどこかに配置します。
クリックすると四隅に大きさ変更の矢印がでるので、大きさが変更できます。さらに図形をクリックすると、今度は回転マークになるので、回転できます。
これらを駆使して、リボン上に赤十字マークを配置。
色が白なんで、ちょっとくらいはみ出たほうが感じがいいです。

これで出来上がり。
選択ツールで全体を選択し、ステージの枠内に収まる大きさにして、保存。

あとはGimpで読み込んで、文字を入れて、jpgで保存したのが、最初の図。
全体ではなくて、部分を切り取ってみたのがミソです。
あまりCGくさくならないように、フリーハンド感のある歪んだ絵にし、さらに部分を切り取って、アバウトな雰囲気を出してみました。
きっちりした「数学的」なリボンにするなら、リボンを左右と上部の三つに分けるとよいかもしれません。

これでInkscapeの基本的なやり口はマスターできました。
この方法を組み合わせれば、もっと複雑な図形や色を描けます。