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

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

2015.12.24
main
ノウハウ

先日アップルストアに行ったのですが、不思議なことに美容院に行った時の気持ちになりました。ドワンゴデザイナーのsaraeです。

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

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

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

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

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

原本素材を描く

まずは、原本素材を描きます。今回は導入でお話したとおり、帰省した気分を味わいたいため、お父さんを描きます。
1
これは会社に買ってもらった「コピック」というペンで描きました。描かなくても写真で代用が可能です。

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

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

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

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

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

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

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

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

ポーズが変わりました。

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

8

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

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

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

10

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

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

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

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

9

アレンジ

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

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

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

5

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

gifアニメーションを作成

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

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

anime
ああ、お父さん、ありがとう。

来年も私は生きていく。

さいごに

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

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

 

編集部オススメ

  • このエントリーをはてなブックマークに追加

あわせて読みたい記事

この記事を書いたメンバー

sarae

sarae

Designer

方眼画素単位の奇術師という二つ名をもつ、天寸デザイナー。雑な絵柄と社風がマッチし居心地良く在籍する。文章と日本語が苦手。

ドワンゴデザイナー メンバー募集 ! !