Photoshopでアニメーション作成!?／Adobe（アドビ）であそぼ！#02

  • 4,161 PicoN

 

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

写真を合成したり、

加工を加えたり、

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

絵を描いたり、

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

 

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

 

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

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

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

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

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

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

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

を表示させます。

フレームレート（FPS）を設定

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

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

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

 

新規レイヤーを作成

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

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

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

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

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

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

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

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

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

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

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

完成！

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

こちら！

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

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

PicoN!編集部　横山

関連記事