linkerは「人と人」「人と情報」「人と物」をつなぐデザインユニットです。

PhotoshopのTips:ロゴアニメーションを3D機能を使って作る

090829_00.jpg

こんにちは、taku-workです。
もう梨が美味しい季節になったのですね。秋も間近です。

さて今回はAdobe Photoshop CS4 Extendedの3D機能のお話。
Photoshop CS4 Extendedには3D機能やアニメーション機能がいろいろあるのですが、どう生かすかなかなか難しいところです。
ということでお試しもかねて、簡単なロゴアニメーションを3D機能を使って作ってみます。

レイヤーを使って3D効果をつける

Photoshop CS4ではメニューに「3D」という項目があります。
これはPhotoshop CS4 Extendedで使用可能な機能で3Dモデルを取り込んで扱ったり、レイヤーを3Dのように扱えるようになります。

今回はロゴを3D空間で動かしてみます。

まずはレイヤーにロゴを読み込みます。
linkerのロゴを3つのレイヤーにわけて読み込んでおきます。

次に各レイヤーを選んで[メニュー] → [3D] → [レイヤーから新規ポストカードを作成] を選択します。
これでレイヤーが3D空間内のオブジェクトとして扱えます。
ツールボックスの「3D回転ツール」を使うことでドキュメント内でXYZ軸に動かすことができます。

090829_01.jpg

ポストカード化したレイヤーは複数を1つのレイヤーにまとめて同じ空間内で扱うことが可能です。

2つのレイヤーを選択して[メニュー] → [3D] → [3Dレイヤーを結合] を選択します。
これで2つのレイヤーが結合されて1つの空間内に置かれます。
[3Dレイヤーを結合] は3つ以上のレイヤーを一度には結合はできないので追加したい場合はあとから1つずつ追加します。

レイヤーはこのようになります。

090829_02.jpg

3Dオブジェクト化したレイヤーは「3D回転ツール」で向きを変えることができます。

090829_03.jpg

結合された3Dオブジェクトのレイヤーの重ね順を入れ替えるなどの操作をするには「3Dパネル」を使います。
[メニュー] → [ウィンドウ] → [3D]から3Dパネルを表示します。
3つのオブジェクトとして配置されているのでレイヤーが3つ表示されています。

090829_04.jpg

このパネルでレイヤーの順番をいれ変えればオブジェクトの重なり順が変わります。
アニメーションをつける時に効果的な重なり順になおしたりできます。
また、レンダリングやライティングの設定もできます。
これはやりすぎるとムービーの書き出しがものすごい時間がかかるので注意が必要です。

ここまででひとまずロゴの3D化は準備OKです。

アニメーションを設定する

Photoshop CS4ではアニメーションにタイムラインアニメーションが用意されています。
これはflashやAfterEffectなどのアニメーションを作成するアプリケーションで使われている形式です。

[メニュー] → [ウィンドウ] → [アニメーション]からアニメーションパネルを開きます。
右下のアイコンをクリックすることでタイムラインアニメーションとレイヤーアニメーションを切り替えます。

タイムラインアニメーションではキーフレームをつかってアニメーションを管理します。
アニメーションパネルのリストの左にあるストップウォッチのアイコンをクリックすることでキーフレームが打たれます。 0フレーム目でキーフレームを打ちます。これがスタート時の状態になります。
そして任意のフレームにあわせて透明度を変えたり、位置を変えたり、3Dオブジェクトのの向きを変えます。
アニメーションを再生するとキーフレーム間を補完してアニメーションしてくれます。

今回のロゴアニメーションではこんな感じです。

090829_05.jpg

アニメーションを書き出す

アニメーションは[メニュー] → [書き出し] → [ムービーをレンダリング] で書き出されます。
形式はクイックタイム形式(.mov)です。
gifアニメで書き出したい場合は[メニュー] → [webおよびデバイスに保存] でgifにします。
プレビューの作成に少し時間がかかりますが我慢です。

gifで書き出したアニメーションはこんな感じです。

logo_anime_loop.gif

ということで

ということでPhotoshop CS4 Extendedで3Dとアニメーションを使ってロゴアニメーションを作ってみました。
Flashや3ds maxなんかでやればなんてコトはない部分ですが、Photoshop CS4 Extended内で完結できるのはステキです。
実務レベルの話となるとエフェクトの部分ではFlashやAfterEffectなどの映像作成の得意なアプリがありますし、複雑なカメラワークやライティング、レイトレーシングなどの高性能なレンダリングとなると3ds maxやMayaなどの3Dアプリには到底及びません。
というわけで、ささっと簡単なアニメーションを、となったときに使ってみるのが良いのではないでしょうか。