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

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


GIFアニメーションとは?

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

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

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

用意するもの

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

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

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

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

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

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

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

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

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

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

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

05
<ファイル>→<web用に保存>

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

保存したら完成です。
IMG_2371

ちなみに上のGIFアニのスピードで作成する場合の、各フレームのディレイ設定はこんなかんじです。
09
いきなり納得のいくスピードにならないものなので、根気よくトライ&エラーしましょう。



毎度、ご贔屓に。