線を針金風に変換する Inkscape のフィルタを作る
パソコンの画面を説明するときに，アイコンやボタンを枠で囲みたいことがある。その枠を立体的に描ければオシャレになる。しかもワンタッチでできればかなり嬉しい。一発変換のために Inkscape のフィルタを作成する。
ここで使用するソフトは，ドロー系ソフトの Inkscape である。最新版の 0.47 が 2009年11月24日にリリースされた (Inkscape - Wikipedia)。以下の例は1つ前のバージョン 0.46 を使っている。
Inkscape では「線」のことを「ストローク」と呼ぶ。ストロークで四角形の枠を描いたら，その枠を針金風に「てかり」と「影」をつけたい。フィルタをうまく設計しておけば，簡単に「平面的な線」が「立体的な針金」に変換できる。
上の図は，元になる画像と，フィルタ処理後の画像。処理後がゴール。フィルタを作っておくと，一発でゴールの画像が得られる。
作った動機は，上のようにウィンドウの説明などで「ここ」を指すときに枠で囲むことがよくあり，その枠を立体的にしたかったから。例えば上のような例である。線の幅は 5 ピクセルを使うことにする。線の太さが違う場合は，ライティングの設定を変える必要があるだろう。
以下にフィルタ作成の手順を示す。
フィルタ効果がリアルタイムで分かるように，枠を描いておく。この枠にフィルタを重ねて効果を加えていくことにする。
左端の「矩形や正方形を作成」をクリックし，枠を描く。
ここで重要なことは，ストロークをパスに変えないことである。パスにしてしまうと，枠の大きさを変えたときに線の幅も同時に変わってしまい，その線の幅は変更するのがとても面倒になる。ストロークのままであれば，変形で線の幅が変わっても，その幅を変えることが容易だからである。
赤枠を選択したままでフィルタを作成する。「オブジェクト」メニュー→「Filter Effects...」を選択する。
「Filter Effects」ウィンドウは縦の長さを長くとりたいので，「フィル／ストローク」窓をしまっておく。「フィル／ストローク」のタイトルバーの右端の「>」マークをクリックすればよい (上述の「動機」の図参照)。「Filter Effects」窓の高さが足りないときは，「Filter Effects」窓の一番下にマウスカーソルを合わせて，カーソルが「↑=↓」を合わせた形に変わったら，下に引っ張ればよい。
テカリをつけるフィルタは，INKSCAPE Drawing Weblog インクスケープ・実践講座 - Inkscape : Filter Effect テキスト・ロゴ の通り。また，影を作るフィルタは，ドロー系描画ソフト Inkscape フィルターで、オブジェクトを加工・編集します の通りやれば作れる。両サイトに感謝する。テカリと影の両方をつければ，作りたかったフィルタが完成する。
以下では各フィルタの機能と設定について簡単にまとめておく。
説明の中で「Source Alpha」という用語が出てくる。これは「アルファチャンネル」と呼ばれるもので，色表現のデータとは別の補助データのことである (アルファチャンネル - Wikipedia)。パソコン上では R, G, B の色表現と同じで 0 から 255 の整数値をとる。形式は色表現と同じだが，色は表現しないため，別の用途に利用できる。例えば，上の赤枠の色指定で出てきた「不透明度」がそれである。「A」は「Alpha」の意味である。
Gaussian Blur {ガウシアン・ブラー} は，各点の光量がガウス分布により広がっているとして画像に加えるぼかし
のこと (Gaussian blur の意味とは - 英和辞典 Weblio辞書)。
Gaussian Blur は Source Alpha に対してかける。つまり，設定は次のようになる。
Specular Lighting {スペキュラー・ライティング} は，鏡面反射性の照明のこと。Inkscape の Specular Lighting フィルタに用意されている光源には，Distant Light (平行照明)，Point Light (点照明)，Spot Light (円錐状照明，スポットライト) がある。これらの照明によってどのような効果があるかは Lighting Filters Primitives のサンプルを見てみれば感じがつかめる。
設定は次の通り。
光源の位置 (Location) は，光源の x, y, z 軸上の座標を表わしている。x: -3000 はターゲットとなる図より左の方で，y: -5000 なので上の方，z: 10000 なので，手前側のかなりこちら側ということになる。
ここでは，元画像をぼかした画像に対して光を当てることで，「ある程度つやつや」しているが「ピカピカ」ではないテカリ感を作っている。ポイントライトの照明は割と遠目から当てることで，全体を照らしている。平行照明ではないので，立体感を若干は残している。
Composite {コンポジット} は，2つの画像を入力し，その組み合わせを出力するフィルタである。上の入力は背景画像，下の入力は前景画像を指定する。Composite で指定できる Operator (オペレータ，演算子) による効果は，Filter Effects Developer: Filter effects: Composite のサンプルで見ることができる。
1つ目の Composite フィルタの設定は次の通り。
2つ目の Composite フィルタの設定は次の通り。
ここで行っているのは，1つ目のフィルタでテカリ部分を元画像内に限定し，2つ目のフィルタで元画像と1つ目の Composite フィルタ通過画像の色を加え合わせている。1つ目のフィルタの出力画像と，2つ目のフィルタ出力画像は，最後にどちらも加え合わせることになる。
Offset {オフセット} は，入力画像を設定した分だけずらして出力するフィルタである。影を右下にずらすために用いる。設定は次の通り。
Merge {マージ} は，入力を順番に重ね合わせるフィルタである。入力の一番上が最背面の画像，入力の一番下が最前面の画像になる。順番が大切である。設定は次の通り。
フィルタ全体の接続は上の図のようになる。
これで完成。ワンタッチ。
Posted by n at 2009-11-27 22:59 | Edit | Comments (2) | Trackback(0)
Master Archive Index
Total Entry Count: 1957
こんにちわ。
Inkscapeって知りませんでした。かなり強力っぽいですね。
その分、使い方が難しそう。
私はGimpを使ってましたが、同じ種類のソフトなのでしょうか。
MACに乗り換えてから余り画像を作る事もなくなったのですが、また近々WEB用に簡単な画像を作らねばならなくなりました。
nさん、ずばり素人向けの（フリーの）ソフトでお勧めは何？
Posted by: おお at December 01, 2009 07:36おお さん
分類するなら，Gimp はペイント系，Inkscape はドロー系になります。それぞれ得意分野があります。
商用の Adobe 社製ソフトで言うなら，Gimp は Photoshop，Inkscape は Illustrator に対応します。
どちらを使うかは，描きたい画像によります。
Web 用の画像を作るのには Fireworks が使いやすかったのですが (使っていた当時は Macromedia，現在 Adobe)，売り物ですね。今は使っていません。
素人向けというのは分からないですが，ペイント系なら Gimp，ドロー系なら Inkscape や OpenOffice.org Draw でしょうか。クロスプラットフォームなので使えるようになって損はないと思います。
Posted by: n at December 01, 2009 22:02最近の Mac は使っていないのですが，「ペイント系」の元祖である MacPaint はもうないのでしょうか。