3分メイキング：動画からGIFアニメーションを作る方法 : 谷口マサト観察日記

テレテッテッテッテッテ、テレテッテッテッテッテ、
テレテッテッテッテッテッテッテッテ、テッ、テッ、テッ、

こんにちわ。今日は本日公開した記事、「デートの歴史」のろしからポケベルに黒電話、デートの連絡手段の進化を見るのGIFアニメーションを作っていきたいと思います。

GIFアニメーションとは？

GIF画像を複数枚つなげることによって、パラパラ漫画みたいに動かしています。

GIFアニの長所は、ほとんどのブラウザで再生できること。＜a＞タグや＜img＞タグが使えること。ファイルサイズを抑えることができるなどがあげられます。

また、短所は、音声をつけることができない。最大256色しかつかえないので、画像が劣化するなどがあげられます。

用意するもの

・Photoshop（※使っているバージョンは、CC 2014です）
・動画素材

1.動画をPhotoshopに読み込みます

＜ファイル＞→＜読み込み＞→＜ビデオフレームからレイヤー＞
ここからGIFにしたい動画を読み込みます。

「ビデオをレイヤーに読み込み」というウィンドウが開きます。
①「選択した範囲のみ」にチェックを入れてから、④と⑤のインジケーターで範囲を選択すると、その部分だけ読み込んでくれます。
②「頻度制限」は、任意で数字を変えられます。数字が小さければ小さいほど、なめらかな動きになります。
③「フレームアニメーションを作成」にチェックを入れます。

2.タイムラインから、不要なフレームを削除する

GIFアニをつくる際に気をつけておかなければいけないポイントは、ファイルサイズです。だいたい3M以内を目標に作っています。あまり大きいサイズだと、環境によってはきちんと読み込むことができないからです。
フレーム数が少ない程、ファイルサイズは小さくなります。

＜ウィンドウ＞→＜タイムライン＞を選択して、タイムラインを表示させましょう。

「タイムライン」から、不要なフレームを「ゴミ箱」のアイコンにドラッグ＆ドロップして削除していきます。何度も再生しながら、いらないフレームをどんどん削除していきましょう。
再生ボタンのショートカットは「スペースキー」なので使いましょう。便利です。

3.フレームのディレイ設定を変更する

再生スピードが早いと感じたら、フレームのディレイの秒数を変更しましょう。
「その他」を選択すると、任意の数字を入れられます。

4.GIFアニとして保存する

＜ファイル＞→＜web用に保存＞

①カラーは最大256色ですが、色の数を落としていくと、ファイルサイズも小さくなります。
②タテ・ヨコサイズを変更します。
③無限ループにする場合は、「無限」を選択。1回や2回に設定することもできます。
④ファイルサイズはここで確認できます。
⑤再生ボタン
⑥再生ボタンの再生スピードと、実際の再生スピードが異なる場合があるので、保存する前にブラウザでプレビューしておくことをおすすめします。

保存したら完成です。

ちなみに上のGIFアニのスピードで作成する場合の、各フレームのディレイ設定はこんなかんじです。

いきなり納得のいくスピードにならないものなので、根気よくトライ＆エラーしましょう。

毎度、ご贔屓に。