【gifアニメーション作成方法】photoshopのパペットワープとタイムラインでお父さんに翼を授けてみた

先日アップルストアに行ったのですが、不思議なことに美容院に行った時の気持ちになりました。

将来年をとったら、自動車いすを華麗に操ってアップルストアに入っていく、そういう自分に私はなりたい。

さて、制作現場において、iOSがFlash Playerに対応していないこともあり、アニメーション表現としてgifアニメーションを利用することが多くなりましたね。また、広告バナーについても、クリック率の向上を図るためによりリッチなものにするべく、ここでもgifアニメーションで制作することが増えてきています。

そこで、今回はphotoshopのパペットワープとタイムラインで簡単にgifアニメーションを制作する方法をお伝えしたいと思います。

また、お正月も近いこともあり、今回製作するgifアニメーションで帰省した気分になれるものを作成しますよ。仕事で忙しくて実家に帰る時間がない方はこれで一石二鳥！

用意するものは会社に買ってもらったカッコイイパソコンと、会社に買ってもらったphotoshopというアプリのみです。

原本素材を描く

まずは、原本素材を描きます。今回は導入でお話したとおり、帰省した気分を味わいたいため、お父さんを描きます。

これは会社に買ってもらった「コピック」というペンで描きました。描かなくても写真で代用が可能です。

お父さんを切り抜きます。

この切り抜かれたお父さんが全ての原本です。
これ以後はこの原本を複製して作業していきます。

パペットワープでマーキング

次に、お父さんをスマートオブジェクト化します。

編集からパペットワープを選択します。

すると、網がお父さんに絡まります。

間接っぽいところをクリックしてマーキングしていきます。

マークを選択して、ポーズを変えましょう

ポーズが変わりました。

こうやって原本レイヤーを複製してはポーズを変えていくという作業を繰り返します。

こうなりました。
5回もやればパペット免許皆伝です。

タイムラインでアニメーション作成

次は実際に動かします。ここからは早いです。ウィンドウからタイムラインを選択。

「フレームアニメーションを作成」を選択しましょう。

最後に「レイヤーからフレームを作成」です。

アニメーションが一通り完成しました。
タイムラインの秒数やループ回数等お好みに設定して再生してみましょう。

さて、思った動きにならなくてがっかりした方は次へ進みましょう。

アレンジ

均等に動かしていましたが、もう一手間かけてみます。
内側から外側に向けて力に波を与えていくイメージで表現を付け加えていきます。

肩、肘、手首、指先、という順に動きを加速させていく感じです。

南斗水鳥拳をほんのりイメージしています。

スマートフィルターでパペットワープをかけているので後でいくらでも修正が可能です。

gifアニメーションを作成

photoshopでgifアニメーションを作る時はスマートオブジェクトにしてからパペットすると後で修正しやすいです。
トゥイーンを使わずにアニメーターっぽいアニメーションを作ることができます。

最後にWeb 用に保存 ダイアログボックスのファイル形式で「GIF」を選択し、ファイルを保存します。こちらで完成です。

ああ、お父さん、ありがとう。
来年も私は生きていく。

さいごに

今回はphotoshopのパペットワープとタイムラインで簡単にgifアニメーションを作成する方法をお伝えしました。ぜひ制作現場で役立ててください。

また、今年帰省できないという方は、大晦日はお父さんとお母さんをgifアニメーション化して過ごし、正月に備えるというのも一興ですね。