君色少年: Photoshopでアニメーションを作ろう！

2011年02月21日

Photoshopでアニメーションを作ろう！

あまり使いやすい機能とは言えませんが、Photoshopでも動画編集ソフトにあるような「タイムライン」を扱う事が出来ます。
イラストを描くのが好きな人なら本格的なフレームアニメーションを作れるし、ドット絵を描くのが好きな人ならデコメ素材を作れるし、映像の中に字幕スーパーを入れたい人は、モーショントゥイーンで動く文字も作れます。
そんなPhotoshopのアニメーション機能を、ちょっとだけ見てみましょう。

まずはPhotoshopを起動して、ワークスペースを「モーション」にしてみます。
Photoshop編集画面1

すると、アニメーション制作に必要なタイムラインとレイヤーが表示されて、なんともFiashっぽい見た目になります。
タイムラインは、フレーム表示にも切り替えられるので、例えばデコメ素材なんかも簡単に作る事ができるというわけです。
少しずつ変化のあるイラストをレイヤーに分けて描いておけば、各レイヤーをフレームとして読み込む事ができるし、各フレームの表示秒数や繰り返しの方法も自由自在に設定できます。
試しに、フレーム表示でデコメ素材を作ってみました。
Photoshop編集画面2

「Webおよびデバイス用に保存」からアニメーションGIFとして書き出せば、以下のようなデコメ素材の完成です。

オリジナルのデコメ素材は、誕生日プレゼントなどにも最適かもしれませんね。

次に、タイムライン表示に切り替えてみます。
通常の動画編集ソフトのような見た目になり、各レイヤーを時間軸で編集できるようになります。
タイムライン編集では、Flashでいうところの「モーショントゥイーン」のような機能があり、オブジェクトの中間の動きを自動的に作成してくれたりもします。
また、Flashと同じく「オニオンスキン」機能もあり、フレームの前後1フレームを玉葱の薄皮を通して見たように、半透明で表示させる事もできます。
試しに、タイムライン表示でトゥイーン機能を使って遊んでみました。
Photoshop編集画面3

上記のように編集したものを、デコメ素材と同じくアニメーションGIFで書き出してみました。
アニメーションGIFサンプル

トゥイーンが使えるというところがいいですね。
直線的な動きのアニメーションなら、かなり楽ができると思います。

その他の機能として、Photoshopらしくないかもしれませんが、動画ファイルも読み込む事ができます。
ただし、私のPCはCore i7搭載なので問題無く動いていますが、環境によっては読み込みすらできないという状況があるかもしれません。
読み込む際は、フレームに変換されるので、あまりサイズの大きいものでなければ、通常の動画編集ソフトと同じような感覚で扱えます。
レイヤーを追加して字幕スーパーを入れ込むといった事もできるわけですね。
試しに、EOSムービーで撮影したMOVファイルを読み込み、テキストレイヤーを追加してみました。
Photoshop編集画面4

上記のように編集したものを、MOVファイルで書き出してみました。
さらに、今回はブログ掲載用ということで、MOVファイルで書き出したものを、Adobe Media Encorder でFLVファイルに変換後、FlashでSWFファイルに埋め込んでみました。

さすがにFlashほど自由なモーションを設定する事はできませんが、Photoshopしか持っていない人にとっては、使う機会がいつかどこかであるかもしれません。

Photoshopも、さすがにこれ以上追加する機能は無くなってきているような気がするのですが・・・
使いこなす事ができれば、ほんとPhotoshopって高機能すぎるソフトだと思います。