風で抑える制服スカート gifアニメを作るときに重要なポイントは自然な動きです。
一番初めに挑戦したいgifアニメといえば、風で揺れるスカートの動きです。
その動きを実現させることが出来るのが、photoshopのパペットワークです。

スカートが揺れて見えるgifアニメを作成する技術さえあれば、カーテンを動かしたり、髪を動かす事もできるようになります。
今回の作り方を見て研究してください。

前回はphotoshopのパペットワークを使って、1枚の画像からgifアニメを作る方法をご紹介しましたが、
今回はパペットワークの応用でスカートがめくれるgifアニメを作ります。

youtube動画も作りましたのであわせてご覧ください。


スカートが動くgifアニメを作り方

スカートが風で揺れるgifアニメ
簡単に手順を書いくとこうなります。
  1. 動く部分と動かない部分を切断する
  2. パペットワークのピンで固定
  3. 動かした画像を複数作ってタイムラインでgifアニメにする

慣れれば10分程度で作れそうですね。


動く部分と動かない部分を切断する

足を切り取る
photoshopのパペットワークを使うときは、動かない画像部分と動く画像の部分をあらかじめカットして、別のレイヤーにしておくと楽に作れます。
特定の画像をカットする方法
[クイック選択ツールで指定]→[別のレイヤーにコピーorカット]
そのまま使うと、手や足などが一緒に動くので不自然な画像になってしまいます。

カットしておくと便利な画像
  • 背景
  • 手や足
  • 髪の毛
など


パペットワークのピンで固定

パペットワープピンで留める手順
パペットワープがある場所
[編集]→[パペットワープ] ※メッシュ(網目)は表示非表示がチェックで選べます

パペットワークを使うときは、画像のようにピンで体を固定することから始まります。
これをしておかないと、他の部分が勝手に動いてしまいます。

ピンを止めるときは、拡大をして細かく止めて置くと確実です。
また、gifアニメは全体を見ながら調整したほうがいいので、動作をつけるときは下の倍率に戻すことをおすすめします。
動画ではそのままやってますが、後から気が付きました(笑)


動かした画像を複数作ってタイムラインでgifアニメにする

タイムラインで仕上げる
イラストや静止した漫画なら一枚でいいのですが、gifアニメの場合少しずつ動作を変化させなくてはいけません。
そんな時は、切り抜いた画像のレイヤーを複数枚コピーしておくと便利です。
※photoshopではコピーの事を複製といいます

もちろんパペットワークで加工した画像を複製してもいいのですが、おおもとの画像と食い違う部分も出てきます。
自然な動きをさせるのであれば、オリジナルに近い画像を使ったほうが確実です。

photoshopにはアニメーション機能がありますので、そのままgifアニメを作ることが出来ます。
gifアニメ用のタイムラインの出し方
[ウインドウ]→[タイムライン]→[フレームアニメーションを作成] ※複製し表示したいレイヤーを選択して作っていきます。(目玉ボタンで表示非表示が可能)

最後にgifアニメとして出力すれば完成

スカートを抑える制服少女gifアニメ
photoshopでは再生回数も選べるので便利です。
大抵は無限でセットしておくことをおすすめします。
もちろん秒数は1枚ずつ選べるので、動きは自由自在に作ることが出来ます。
gifアニメで出力する方法
[ファイル]→[web用に保存]→[gifを選択]

photoshopのようなソフトで作ると、うごイラなどの無料ツールよりも高度なgifアニメも作れます。
この機会に使ってみてはいかがでしょうか?