ratoblo

色々書いていきます

MENU

【GIF動画:動く画像】たった2枚で簡単に!スムーズに動く画像を作る方法!

色んな人のブログを見ていると、プロフィール画像が動いていたりして楽しいですよね♪

動く画像は『GIF動画』や『GIFアニメーション』と呼ばれる物が主流で、最近ではより高画質の『アニメーションPNG』もあります。

利点としては、何と言っても目立つ事ですね!

私のプロフィール画像もGIF動画にしています♪

 

過去に作った事もあったのですぐに作れると思っていたんですが、かなり

苦戦しました!

苦戦した理由は簡単。

こだわりすぎたから!笑

凝り性なもので...。でも、苦戦したおかげでいい知識が身についたのでそれを皆さんにも共有できればいいかなと書いていきますね。

 

プロフィール画像(PCで見ていれば右、スマホで見ていれば下に表示されています)では、私の分身である「ゴリラ」がエンドレスで土下座をしております。

f:id:ratoblo:20170913210852g:plain

この見事な土下座を見た人はきっと読者登録がしたくなるはず!笑

 

このゴリラの土下座、滑らかに動いていますが、実はたった2枚の画像からできています!

動画・アニメーションは、少しずつ違う何枚もの絵を連続して再生する事で動いているように見せます。

f:id:ratoblo:20170913215452j:plain

つまり、たくさんの画像が必要なんですね。

 

普通に2枚の画像から作ると、

f:id:ratoblo:20170913215904g:plain

こんな感じでパタパタした感じになります。
『高速土下座!』と言えば片付くんでしょうが、やっぱり滑らかさが欲しい...。

自分で絵が描けて、画像がたくさんある人ならいいんですが、2枚の画像から作らないといけない場合には参考になると思います。

2枚で滑らかなGIF動画を作る

まず、素材となる画像を用意します。

  • 動き始めの画像
  • 動き終わりの画像

の2枚ですね。

私の場合は

【動き始め】

f:id:ratoblo:20170913220749j:plain

【動き終わり】

f:id:ratoblo:20170913220828j:plain

の2枚です。

!ポイント!
・この段階で、画像のサイズを調整していてください。
※大きな画像のままでは、作るのに時間がかかるよー。
・この画像は600×600を400×400に縮小済み。
・画像の形式はGIFでなく、JPEGでもPNGでも大丈夫です。

SPONSORED LINK

 

 

使うサイトは

このサイトさえあれば、GIF動画の事は何でもできます。

最強サイト!!!

ただし、全部英語表記。

以下に画像を載せながら詳しく解説していきます。その通りにやれば大丈夫なので安心してください。

f:id:ratoblo:20170914000625j:plain

使い方!

丁寧に解説していきます!

まずはサイトにアクセス!

Animated GIF editor and GIF maker

f:id:ratoblo:20170914002516j:plain

シンプルな作りのサイトです。

※広告が出てきますが、画像では消してあります。

 

次に、『GIF Maker』をクリック!

f:id:ratoblo:20170914002751j:plain

すると、こんな画面になります。

f:id:ratoblo:20170914002817j:plain

【ファイル選択】をクリックし、用意した画像をアップロードします。

f:id:ratoblo:20170914003037j:plain

【開く】をクリック後。

f:id:ratoblo:20170914003130j:plain

【ファイル選択】の横が、『選択されていません』から『2ファイル』に変わりましたね。

そしたら、下の青い【Upload!】をクリック。

こんな画面に変わります。

f:id:ratoblo:20170914003732j:plain

2枚の画像が並んでいますね。

 

下の【Effects】の欄の
crossfade framesにチェックを入れ、Frame countを2にします。

f:id:ratoblo:20170914004354j:plain

できたら、下の青いAnimate it!をクリック!

編集が始まり、下のAnimated GIF:の下に、できたGIF動画が出ます。

f:id:ratoblo:20170914004741j:plain


一応、これでGIF動画は出来上がるんですが、動きの微調整をしていきましょう。
※最初の読み込みは遅いです。しばらくすると速く動きだします。

微調整をするには、framesを使います。

f:id:ratoblo:20170914005032j:plain

これをクリックすると、次の画面に移ります。

f:id:ratoblo:20170914005105j:plain

さっきより画像が増えていますよね?

増えたのが、先ほどFrame countを2にした効果です。

ちなみに、Frame countを3に増やしたら

f:id:ratoblo:20170914005301j:plain

増えます。

1つの画像につき、何個のフレームにするかの設定なんですね。増えれば増えるだけ画像の動きは滑らかになります。

増えた画像が、動きを滑らかにしてくれる鍵です!でも、画像数が増えるとそれだけ容量も増えるので、ブログのプロフィールに使うにはFrame count2がおススメです。

 

ここでは、各画像(フレーム)ごとの表示時間の調整をします。

f:id:ratoblo:20170914010140j:plain

大原則として、

元の画像は長く。
増えた画像は短く。

これを守ってください。

100で1秒なので、ここでは

  • 元画像100
  • 増画像6

に設定しています。

自分の好きなように設定したら、

下のAnimate it!をクリック!

Animated GIF:の下に、完成したGIF動画が出ます。

f:id:ratoblo:20170914010637j:plain

保存は、右クリックからでもsaveからでもOKです!

f:id:ratoblo:20170914010941j:plain

完成した後で、サイズ変更したくなった場合

最初に決めたサイズよりも、やっぱり小さくしたい!とかありますよね?

そんな時は、resizeを使います。

f:id:ratoblo:20170914011226j:plain

resizeをクリックすると、こんな画面になります。

f:id:ratoblo:20170914011449j:plain

New width:とNew height: にお好みの数字を入力。

ちなみに、

  • New width: 幅
  • New height: 高さ

です。

入力したら、Resize it!をクリック!

下に、サイズが変わった画像が表示されますので、先ほどと同じ要領で保存してください。

 

以上で完成です!

 

パソコンで動くのを見たい場合、普通にダブルクリックでは見られません。

私が見ている方法は、右クリックからIEで見ています。

f:id:ratoblo:20170914012919j:plain

こんな感じで表示されて、動きます!

f:id:ratoblo:20170914013019j:plain

いかがだったでしょうか?

結構簡単に作れますよね!しかも、滑らかに!

2枚の画像がパッ!パッ!と切り替わるだけでは物足りない人に、超おススメです!

このサイト、他にも機能があって、完成後に全体のスピードを一気に調整したりエフェクトかけたり、範囲指定して切り取りもできるので、面白いです!

是非やってみてください!

 ※今夜、作ったGIF画像をプロフィール画像に設定する方法を書く予定ですので、やり方が分からない方はちょっと待っていてください!

 プロフィール画像への設定方法(はてなブログ)

 記事にしましたので、こちらを参考にしてください♪

www.ratoblo.com

 

 ~関連記事~

www.ratoblo.com