Photoshopでアニメーション作成!?/Adobe(アドビ)であそぼ!#02

 

Adobeのソフトの中でも一般的にも有名な〈Photoshop〉

写真を合成したり、

加工を加えたり、

レタッチで写真をキレイにしたり、

絵を描いたり、

などの使い方をされている方がほとんどだと思いますが、

 

〈動画〉を作成・編集できること知ってましたか?

 

知ってる!
という人もいると思いますが
知らなかった人も多いのではないでしょうか?\

Photoshopを使って
冒頭のようなアニメーションを作ることができちゃうんです

今回は
実写動画をトレースして制作する
「ロトスコープアニメーション」
作り方の手順を簡単に書き留めていきます

トレースしたい動画ファイルをPhotoshopで開く

わたしは初めのころはPhotoshopで動画ファイルが開けること自体知らず最初は驚きました

ここで今回の作業で大切な2つのウィンドウ、

「レイヤー」「タイムライン」

を表示させます。

フレームレート(FPS)を設定

フレームレート(fps)は、動画1秒間の中に何枚の静止画が入っているか、の数字です。
一般的な動画データだと30fps(1秒間に30枚)が多いかなと思います。
この30fpsのままトレースをしていけばすごく滑らかなヌルヌル動くアニメーションができるのですが、手間がすごくかかってしまうので今回は充分動いて見える12fpsまで下げたいと思います。

「タイムライン」ウィンドウのメニューから
「タイムラインのフレームレートを設定」を開きます。

するとフレームレートが設定できるので
「12fps」を設定し、OKを押します。

 

新規レイヤーを作成

「レイヤー」ウィンドウで新規のレイヤーを作成します。
新規のレイヤーが「ビデオグループ1」に入ってしまった場合はグループの外に出してください。

そうするとタイムライン上でもこのように表示されます。

レイヤーを1フレームまで短くし、コピペで並べる

さきほど作った新規レイヤーをタイムライン上で1フレームまでドラックして短くします。

タイムライン上の1フレームのレイヤーを
コピー&ペーストをして、横一列に並ばせます。

レイヤーに動画をトレースしていく

ここからは、どんどん描いていく作業です。
タイムラインの赤い再生バーとレイヤーと合わせながら、そのレイヤーにどんどん描いていきます。

どんどん描いていきます。

描き終わったら、書き出し

トレースが描き終わったら、背景にした動画データを非表示にして
データの書き出しです。
今回はせっかくなのでGIFアニメーションの形式で保存していきます。
「ファイル」から、「書き出し」、「Web用に保存」をクリックします。

「Web用に保存」のウィンドウで
ファイル形式を「GIF」を選択、
アニメーションループオプションを「無限」に設定します。

完成!

そうして出来上がるアニメーションが

こちら!

今回は歩いている動画をトレースしたので、ちょうどよいところでリピートするようにすればこのように延々歩き続けてくれるアニメーションが完成します!

いかがでしたでしょうか
いつもは画像編集に使っているPhotoshopですが、こんな動きのある作品も作れるのでぜひアニメーション作り試してみてください。

PicoN!編集部 横山

関連記事