さんみりぼうず

作れるものをつくってみる。ブログ

絶対に見てしまうGIFアニメーションバナーを作ってみた

f:id:sanmiri:20181224203718g:plain

 

ホームページにバナーはよく見かけます

しかし動くGIFバナーは少ないように思います

 我々動物はどう言うわけだか動くものを見てしまう傾向がある

動きのないバナーと比べて動くバナーはインパクトが強い

 

Youtubeなどの動画CMなどはよく見かけますが

押すといちいちYoutubeが別で起動するのがめんどくさいし

音が出て煩わしいなんてことを僕は思ってしまいます

 

しかしGIFアニメーションはブラウザでなんの操作もなしで動いてくれるため

見やすいし見てもらいやすい

ということで動きのある無駄のないGIFアニメーションバナーを作ってみました

 

f:id:sanmiri:20181224204058p:plain

まずは背景と動かしたい人を用意します。

背景と人は別レイヤーで用意しましょう

僕は顔も少し動かしたかったので顔だけコピーしレイヤーを一つ複製します。

 

f:id:sanmiri:20181224204526j:plain

「フレームアニメーションを作成」を有効にします。

 

f:id:sanmiri:20181224204839p:plain

パペットワープで体に動きをつけていきます。

 

f:id:sanmiri:20181224204851p:plain

関節の部分にピンを打ちます。

 

f:id:sanmiri:20181224204902p:plain

あとはピンをつかんで動かすと動かせます。

 

f:id:sanmiri:20181224204912p:plain

2枚目が完成

f:id:sanmiri:20181224204935p:plain

3枚目が完成

 

f:id:sanmiri:20181224205439g:plain

 

次は下のタイムラインでパラパラ漫画の要領で作ります。

1、2、3、4の順番で作った画像を順番に配置していきます。

作った画像は3枚ですが手がマックスから戻るときに

2の画像をもう一度使っているために4コマになっています

ちなみに顔も少しづつヅラして動くようにしています。

 

f:id:sanmiri:20181224205803p:plain

最後にgifで書き出します。

ファイル→webに保存

ここで注意なのが右下のループオプションを

「一度」ではなく「無限」にします。

保存して完成。

 

確認はファイルをクリックでは動きが見れないので

インターネットエクスプローラーsafariなどのブラウザで確認してください。

 

f:id:sanmiri:20181224203718g:plain