初めてでも簡単！photoshopでGIFアニメーションをつくる方法【動画素材編】
最近GIFアニ制作にハマっているトムです。
前回は画像素材を使ったGIFアニメーションのつくり方を紹介しました。その後、GIFについて色々調べているとある言葉に出会いました。
その言葉は「シネマグラフ」
【シネマグラフとは】
一部だけアニメーションで動いているGIF画像のこと
「シネマグラフ…」ちょっとこの言葉かっこよくないですか！？うん、かっこいい！
その名の通りただの静止画に一部動きを入れるだけでとてもかっこよく演出できるんです。
今回は画像をより魅力的にできる「動画素材を使ったつくり方」を紹介します。
では早速つくってみましょう！
動画素材を使ったつくり方
まず初めに動画素材を用意してください。
その動画を元にシネマグラフを作成していきます。
動画を読み込む
Photoshopで【ファイル】⇒【読み込み】⇒【ビデオフレームからレイヤー】を選択し動画を読み込みます。
【選択した範囲のみ】を選択し、サムネイル下にあるつまみを調整して動画の繰り返し使いたい部分を読み込みます。
読み込んだら【ウィンドウ】⇒【タイムライン】を開きます。
タイムラインを開くといくつかレイヤーが並んでいます。
ループさせる
動きに違和感がないか繰り返して再生し確認したいので、ループ数を【無限】に設定します。
スピードの調整
再生してみてスピードを調整したい場合は、タイムライン上の数字部分をクリックし秒数を変更できます。この画像では「0.03秒」に設定しています。
フレームの調整
フレームが多いとデータが重くなってしまうのでタイムラインのフレームの数を減らします。このデザインではタイムラインに57フレームありましたが、再生して確認しながら必要なフレームを18まで減らしました。その際に、使わなくなったレイヤーも削除します。
GIFで書き出す
再生して違和感がなければGIFで書き出しましょう。
データが重くなってしまった場合は【カラー】や【劣化】の数値を調整します。このデザインでは【劣化】を「10」に設定し1M容量を落としました。
描きだしたGIF画像がこちら。
動画を読み込んでフレームを調整しただけであっという間に出来てしまいました。
これがただの静止画だと全く風を感じることができません。アニメーションを入れることで風を感じることが出来ます。
デザインを入れる
あとは人物を配置して全体にエフェクトをかけたりと、自分の好きなようデザインするだけ。あっという間にかっこいいシネマグラフの完成です。
まとめ
最近はシネマグラフを使ったオシャレなサイトも増えており、その場の雰囲気を伝えるのにとても有効的な方法だと思いました。
この他にもGIFで3Dのように見せる方法などもあるので、またノウハウが溜まってきたら紹介させていただきますね！
では、またお会いしましょう！
