Particular Projects Vol.2 Light Show 【TUTORIAL】

LME COLLECTIONS TUTORIAL

【TUTORIAL】フィリグリーベクター FILIGREE VECTOR

全てのコンポジション、グラフィックス、編集アプリケーション向けのコレクション

289種類のオリジナルなフィルグリーデザイン

このAdobe Illustrator 7ベクターフォーマットで提供するオリジナルのフィルグリーパターンは、他のコレクションでは手に入らないもので、全てのブロードキャストデザインプロジェクトで使用できます。これに含まれる要素はビットマップや他のどんなフォーマットにでも変換でき、簡単にあなたのグラフィックス、編集、コンポジション用のアプリケーションへインポートできます。

90以上ものデザインと3つのグラフィックススタイルを用意しており、幅広い選択肢を提供します。
単体で使用したり、組み合わせたりすることで複雑なフィルグリーの背景を作成できます。プレゼンテーション、ロゴの表示や他の多くのブロードキャストデザインプロジェクトに使用できます。

ギャラリーにて、コレクションにどんなものが含まれているかをご覧になって下さい。

このチュートリアルでは、マスクを使いながらフィルグリーパターンを出現させていくいくつかの方法をご紹介します。
このチュートリアルでは、After Effectsを使用していますが、マスキング機能を持つどのコンポジション用プログラムでも同じ結果が得られます

■レイヤーをガイドとして使う

フィルグリーパターンがブロードキャストデザインプロジェクトで使われている場合、マスクを使ってクリエイティブな手法で表されていることがよくあります。

このチュートリアルではこれを実現する３つの方法を紹介します。

左記のパターンと5つのマスクを使って部分的にパターンを露出させます。

A. タイムライン上にパターンのコピーを2つ置きます。レイヤーの不透明度を40％より小さくします。これが上のレイヤーにマスクを適用する際にガイドとなります。この作業が終了しましたら一番下のレイヤーは消してもかまいません。

手始めに、ペンツールを使って画像のベースとしてのマスクを１つ作成します。このマスクはタイムライン上に現れます。マスクの4つのパラメータを表示させます。そして、「0」でのキーフレームをMask Shape（マスクのシェイプ）の隣とMask Feather（マスクのぼかし）の所に置きます。タイムラインのもっと後で、ぼかしに値を追加できます。どこで、いつ追加するかはあなた次第です。

■さらにマスクを追加する

全体を表示するのに2～3秒以上はかからないでしょう。（あなたの指定によります。）

5か10フレーム目から、最初のマスクに幾つかキーフレームを追加します。追加するのは、それぞれのキーフレームの間に5から7フレームぐらいにします。これは、後で好みに合わせて変更しましょう。各キーフレームについてマスクをもう少し大きく指定して、デザインのより多くの部分を取り囲むようにします。

3つのマスクの始めの箇所は、ペンツールでそれぞれ1つの点を追加することで作成しました。左図の、黄色い点を見て下さい。赤い矢印が黄色い点を指しています。最初に作成したマスクが、新規の3つのマスクにペンツールで作った点にちょうど重なるあたりで、キーフレームを新しいマスク用にさらに追加して完成させます。

■適切なタイミングでマスクを広げて表示が途切れないようにする

タイムラインの最後の方で、3つの点をペンツールで追加して左端のマスクのシェイプを完成させました。3つの新規のマスクのうち1つ以上に対してキーフレームを追加して、ポインターツールで各プログレッシブキーフレームについて少しマスクを広げました。これは、色々試してみながら、キーフレームと、マスクのサイズやシェイプを調整する過程です。この時点でマスクにもっとぼかしを追加しても良いでしょう。タイムラインの「0」で開始して「20」まで進めます。ぼかしの度合いは好みで決めましょう。

■徐々にマスクを広げる

各マスクについて、さらにタイムライン上に点を幾つか追加して、それぞれを少しずつ広げている様子が左図の画像で見られます。

■フィルグリーの小さな詳細部分を1つずつ表示させていく

ガイドがなぜ重要なのかがここでわかります。赤い矢印はデザインの詳細を指しており、それらの箇所にマスクを追加して、マスクのカーブに沿ってフィルグリーの特定の部分が現れていくようにします。

■必要に応じてマスクを追加する

マスクを追加した結果、グラフィックスの曲線的な小さな一部が現れていく様子が左図で確認できます。

■調整

5つ目のマスクを追加する際に、他の全てのマスクも調整して、グラフィックスのより多くの領域が現れるようにしました。
このチュートリアルではグラフィックスが現れる効果を完全なものにはしません。あなたが取りかかるのに十分な情報を紹介しました。
フィルグリーをどれだけ複雑なものにしたいかによって、ここで紹介した例よりも多くのマスクが必要になるかもしれません。
全ては、どのような見栄えにしたいかによります。

チュートリアルの2番目のパートでは、5つのマスクだけを使ってとても複雑なフィルグリーパターンを出現させる方法を紹介します。

■とても複雑なパターンを出現させる

このチュートリアルの前半部分で行ったように、ここではタイムライン上にグラフィックスを2度インクルードしました。
一番下のレイヤーをガイドとして使用します。
5つのマスクの最初の部分を作成しました。
赤い矢印がそれらを指しています。
デザインのベースにある左端のマスクは最初に拡大されて、それからタイムラインにそって配置されたキーフレームによって4つのマスクが同時に拡大されます。
また、各マスクへぼかしを追加して、ぼかしの度合いを変化させてみてデザインが現れる様子を調整しました。

■ベースを始めに大きくする

フィルグリーが出現して大きくなっていく始点に見える箇所になりますので、左端のマスクを広げました。そして他のマスク用にキーフレームをさらに追加で置き、それを広げています。

■現れていく過程の全体の時間は2、3秒

左図の下の2つの図で、マスクの拡大とぼかしのエフェクトが進行していく様子が見られます。

■出現する効果の3つ目の方法

ここでは、図AとBに見られるように、デザインが現れていく効果を完結するための最後の2つの段階をご紹介します。

このデザインでは重なり合った要素がたくさんあります。もしそれぞれの要素が独立して現れていくようにしたい場合は、次のようにします:
1) ベクトル（vector）ファイルを開きます。
2) 完成したデザインをガイドとしてベクトルファイルの一番下のレイヤーに置き、不透明度を40%に設定します。
3) デザインの各要素をコピーして選択し、そのコピーを置くための別のレイヤーを作成します。
4) 一番下のレイヤーをガイドとして、全ての要素を配置します。
5) ベクトルファイルの全てのレイヤーをあなたが使用するコンポジション編集プログラムへインポートします。
6) コンポジション作成に使用するアプリケーションにおいて、各ベクトルの要素をそれぞれ独立したレイヤーへ置きます。
7) 各要素へ独立したマスクを適用し、キーフレームを各マスクへ追加してマスクを毎回少しだけ拡大するようにします。。