- 2009年2月 4日 19:46
- Filter Effect | ロゴ・フォント
今回は Inkscape のFilter Effect（フィルター イフェクト） の機能を紹介します。まだインクスケープはSVG の Filter Effect の一部がサポートされてないので時期バージョン(0.47)を待ってから紹介しようと思ってましたが、いろんなところで活用できそうな面白いＦｉｌｔｅｒができましたのでアップすることにしました。今回のチュートリアルは少し長めです。説明不足なところもあるかと思いますが、ＳＶＧファイルをダウンロードして、実際に出来上がったファイルを見ながら説明を見ると分かりやすいと思います。
Inkscape の時期バージョン（ver. 0.47）でこのＦｉｌｔｅｒ Effect 機能が少し手が加えられるみたいです。
（Inkscape の） Filter Effect 機能は使いやすいように作られているとは思いますが、そもそもＳＶＧのFilter Effect 自体が複雑で理解するのに時間がかかります。まだこの機能の一部しか理解してませんが、Ｆｉｌｔｅｒパターンは大きく分類してみるとある程度限られているように思えます。今回紹介するＦｉｌｔｅｒパターンはロゴなどに使える面白いものだと思います。Perspective とノードをジッタリングしたものなどでテキストを加工してFilter Effect を加えています。
フォントを日本語で書く場合は、日本語対応のフォントを選択します。日本語に対応してない海外製のフォントが多いです。
今回の講座のSVGファイルのダウンロード Filter_Effect.zip
まず、テキストツールでＩＮＫＳＣＡＰＥという文字を書いてみます。図のテキストのフォントファミリーはＧｏｅｒｇｉａの太字です。文字間の間隔を少し開けています。文字を書くときに点滅しているキャレットを各文字の間に移動させて、Ａｌｔキーを押したまま方向キーを押すと間隔が開きます。
次にPerspective で文字を加工するために複製を作って、「オブジェクトをパス」にしています。
ベジエツールで台形を描きます。左下から時計回りに描きます。もし反時計回りに描くと文字が反転します。左下から描くのは文字を横書きのままにするためです。
（Windowsの場合は）パスにした文字を先に選択して、Ｓｈｉｆｔキーを押したまま台形を選択します。そして、図のように エフェクト→パスの変形→Perspectiveをクリックします。
図のように、ＩＮＫＳＣＡＰＥの文字が変形しました。ベジエツールで描いた台形の型にあった形になっています。もっと角度をつけたいのであれば台形の形に角度をつけます。
次に、ジッタリングで文字を加工してみます。図は、新しく文字を書いてパスにしているところです。
次にパスにした文字を選択したまま、エフェクト→パスの変形→ノードの追加を選択します。これはノードを等間隔に追加するツールです。
ノードの追加ダイアログで、ノードの長さを５ｐｘにしています。文字の幅が８００だったのでこれくらいに設定しました。もし文字の幅が小さければもっと小さい数値にします。これでノード数は１０００個くらいになります。あまりノード数が増えすぎるとフリーズする原因になりますので注意します。
Apply ボタンを押します。
確認のために文字をダブルクリックしてみると、図のようにノードがたくさん追加されました。
次に、ノードを追加した文字オブジェクトを選択した状態で、エフェクト→パスの変形→ノードをジッタリングを選択します。
ジッタリングの最大変位量の数値を指定して、「ノードをずらす」または「ノードハンドルをずらす」、そして正規分布を使用にチェックを入れてApply をクリックします。図の２種類の設定値（最大変位量の数値）は文字オブジェクトの幅８００に対するものです。
図は「ノードをジッタリング」で文字オブジェクトを加工したときのものです。２種類作りました。
次にFilter Effect の設定をします。ここで一度保存しておくといいでしょう。
図のように、オブジェクト→Filter Effect をクリックします。
まず、Ｎｅｗボタンを押して新しいFilter を作ります。次にコンボボックスから Gaussian Blur を選択して Add Effect ボタンを押します。そうすると上にGuassian Blur が追加されました。
次にGuassion Blur の字の右にある薄いグレーの▲の部分から右側のSource Alpha までドラッグして線をつなぎます。
次に、Specular Lighting を追加します。同じようにAdd Effect ボタンを押して追加します。
Specular Color ：グレー
Surface Scale ：5.0
Contant ：0.75 くらい
指数 ：20 前後
Light Source のコンボボックスから「Point Light」を選択して、Location を -5000、 -10000、 20000 に設定します。この数値はＦｉｌｔｅｒ効果を得るためのおおよその定数みたいなものです。
次に同じ要領で、Ｃｏｍｐｏｓｉｔｅを追加します。２番目の線をドラッグしてSource Alpha につなぎます。そして下にある Operator をコンボボックスから Ｉn を選択します。
もうひとつ Composite を追加します。上の線を右の Source Graphic につなぎます。そして、下の Operator のコンボボックスから Arithmetic を選択して K2 と K3 を1.00に設定します。
次に、Merge を追加します。上の線をすぐ上にある Composite に、下の線を２つ上にある Composite につなぎます。
最初に追加した Gaussian Blur をクリックして下の Standard Deviation（標準偏差）の数値を設定します。数値は10くらいまでの数値に設定するといいと思います。ダウンロードファイルでは、4と8の２種類に設定しています。メイン画面のオブジェクトを選択した状態で左上のＦｉｌｔｅｒのチェックボックスにチェックを入れるとＦｉｌｔｅｒ効果が得られます。
いろんな形の文字にFilter Effect が加わりました。すごいですねぇ～ lol
Thank you for watching :-)
このドイツのサイト(chrisdesign)ではいろんなFilter Effect が紹介されてSVGファイルをダウンロードして見ることが出来ます。
Chrisdesign Blog