超簡単!画像が動くGIFアニメーション作成方法

1450345677frPe1te3ZIacehj1450345625

こんばんは。

今日は、仕事でGIFアニメーションを作成する方法を学んだので、メモとして書き残しておきます。

 

GIFアニメーションとは?

Wikipedia によると、

GIFアニメーション(ジフアニメーション、GIF animation)は、Graphics Interchange Format (GIF) の「マルチイメージ」を使ったアニメーションアニメーションGIF (animated GIF) ともいう。

マルチイメージは GIF87a で導入された機能で、複数のフレームを順に表示できる。GIF89a では待ち時間が指定できるようになった。

要は、複数の画像を、順に表示して、パラパラ動くアニメーションが作成できるという技術です。

Webサイトで、よく画像が動いているように表示されるものがありますよね?

 

1450345677frPe1te3ZIacehj1450345625

↑こんなような感じのものです。

 

GIFアニメーション作成に必要なもの

 

GIFアニメーションは、パラパラ漫画のように複数枚の画像を順に表示させていくので、複数画像が必要です。

 

作成方法

 

GIFアニメーションの作成方法はいろいろありますが、今回は、「バナー工房」というサイトを使います。

スクリーンショット 2015-12-17 22.51.24

 

 

 

 

こちらのサイトの下の方に、画像を設定する箇所があります↓

スクリーンショット 2015-12-17 18.50.38

 

スクリーンショット 2015-12-17 18.49.36

準備しておいた画像を表示順にアップロードして、

スクリーンショット 2015-12-17 18.50.47

画像1枚あたりの表示間隔と、ループ設定を設定し、

「GIFアニメーションを作成する」ボタンを押します。

 

スクリーンショット 2015-12-17 18.51.22

作成が正常に終了すると、上記のような画面が表示されます。

画面下の方にある「ダウンロード」をクリックすると、

作成したGIFアニメーションがダウンロードできます。

 

この手順で作ったGIFアニメーションがこちら↓です。

1450345677frPe1te3ZIacehj1450345625

 

以上です!

お疲れ様でした!

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

主に芸能ニュース・エンタメ・WordPress・iOS・Android・ゲームについて書いてます。 楽しいこと、面白いことが大好き。本業はシステムエンジニア。芸能ニュース、アフィリエイト、スマホゲーム、アプリ開発についての記事を書いていきます。