ネットを見ていると、画像なのに動いている事がありますよね♪
動く画像は『GIF動画』や『GIFアニメーション』と呼ばれる物が主流で、最近ではより高画質の『アニメーションPNG』もあります。
利点としては、とにかく目立つ事ですね！
今回は、その作り方をお伝えしようと思います。
特に今回は、『２枚の画像から、滑らかに動いているように見えるGIF動画』を作る方法にフォーカスを当ててやっていきます！
GIF動画：動く画像
動画・アニメーションは、少しずつ違う何枚もの絵を連続して再生する事で動いているように見せます。
たくさんの、ちょっとずつ違う画像が必要なんですね。
最も少ない枚数の２枚の画像から普通に作ると、
こんな感じでパタパタした感じになります。
『高速土下座！』と言えば片付くんでしょうが、やっぱり滑らかさが欲しい…。
２枚の画像から、少しでも滑らかに作ると
こうなります。
-SPONSORED LINK-
２枚でも、『滑らかなGIF動画』を作る
まず、素材となる画像を用意します。
- 動き始めの画像
- 動き終わりの画像
の２枚ですね。
【動き始め】
【動き終わり】
の２枚です。
※大きな画像のままでは、作るのに時間がかかります。
・この画像は600×600を400×400に縮小済み。
・画像の形式はGIFでなく、JPEGでもPNGでも大丈夫です。
使うサイト
このサイトさえあれば、GIF動画の事は何でもできます。
最強サイト！！！
ただし、全部英語表記。
以下に画像を載せながら詳しく解説していきますので、その通りにやれば大丈夫です。
作り方！
丁寧に解説していきます！
-SPONSORED LINK-
まずはサイトにアクセス！
Animated GIF editor and GIF maker
シンプルな作りのサイトです。
※広告が出てきますが、画像では消してあります。
GIF Maker
次に、『GIF Maker』をクリック！
すると、こんな画面になります。
画像のアップロード
【ファイル選択】をクリックし、用意した画像をアップロードします。
【開く】をクリック後。
【ファイル選択】の横が、『選択されていません』から『２ファイル』に変わりましたね。
そしたら、下の青い【Upload!】をクリック。
こんな画面に変わります。
２枚の画像が並んでいますね。
フレームカウント
下の【Effects】の欄の
crossfade framesにチェックを入れ、Frame countを２にします。
できたら、下の青いAnimate it!をクリック！
編集が始まり、下のAnimated GIF:の下に、できたGIF動画が出ます。
一応、これでGIF動画は出来上がるんですが、動きの微調整をしていきましょう。
※最初の読み込みは遅いです。しばらくすると速く動きだします。
微調整をするには、framesを使います。
これをクリックすると、次の画面に移ります。
さっきより画像が増えていますよね？
増えたのが、先ほどFrame countを２にした効果です。
ちなみに、Frame countを３に増やしたら
増えます。
1つの画像につき、何個のフレームにするかの設定なんですね。増えれば増えるだけ画像の動きは滑らかになります。
増えた画像が、動きを滑らかにしてくれる鍵です！でも、画像数が増えるとそれだけ容量も増えるので、ブログのプロフィールに使うにはFrame count２がおススメです。
時間調整
ここでは、各画像（フレーム）ごとの表示時間の調整をします。
大原則として、
元の画像は長く。
増えた画像は短く。
これを守ってください。
100で１秒なので、ここでは
- 元画像100
- 増画像6
に設定しています。
自分の好きなように設定したら、
下のAnimate it!をクリック！
完成！＆保存！
Animated GIF:の下に、完成したGIF動画が出ます。
保存は、右クリックからでもsaveからでもOKです！
-SPONSORED LINK-
完成した後で、サイズ変更したくなった場合
最初に決めたサイズよりも、やっぱり小さくしたい！とかありますよね？
そんな時は、resizeを使います。
resizeをクリックすると、こんな画面になります。
New width:とNew height: にお好みの数字を入力。
ちなみに、
- New width: 幅
- New height: 高さ
です。
入力したら、Resize it!をクリック！
下に、サイズが変わった画像が表示されますので、先ほどと同じ要領で保存してください。
以上で完成です！
保存したGIF動画が見れない場合
パソコンで動くのを見たい場合、普通にダブルクリックでは見られ無いこともあります。（Windowsの【フォト】が対応していない場合）
そんな時に私が見ている方法は、右クリックからIEで見ています。
こんな感じで表示されて、動き出します！
最後に
結構簡単に作れますよね！しかも、２枚なのに結構滑らかに！
２枚の画像がパッ！パッ！と切り替わるだけでは物足りない人に、超おススメです！
３枚以上の画像を使えば、もちろんもっと滑らかにできます！
是非やってみてください！
この話題に関しては以上です！
