ナイチンゲールにはなれない!

看護師おかえりなさいの情報共有所

GIF(次々と切り替わる)アニメーション画像を作成する方法!!

GIF(次々と切り替わる)アニメーション画像を作成する方法!!

おかえりなさい @okaerinasainet です。

以前当サイトアクセストリガーをイメージして「アクセストリガー誕生秘話」を制作しました。

このページは全28話で作っており、全て固定ページで作成しています。その話へのリンクはアニメーションのように次々を画像が切り替わるようにGIF形式で作成しました。

なぜGIFを使用したのかと言えば、話に登場するシーンをポイントで表示させる事でイメージしやすいのではないかと想像したからです。

GIF画像を作成する

GIF画像は基本的に私の場合、ソフトを使用せずWebサービスで作成できる方法を探しました。

実際に使用して抜群に利用しやすかったページ(サービス)を紹介します。

GIFアニメ(アニメーション)作成 | 画像加工編集サイト・フリーソフト:無料写真加工ならバナー工房

国内最大の登録・インストール・アプリ不要の画像加工編集サイト。写真や画像を簡単に加工編集できるソフトです。GIFアニメも簡単ラクチンに作成できます!

こちらのサービスではWeb上で自分で用意した画像(JPEG・PNG等)を複数合わせて一つのGIFファイルとして合成してくれます。

アニメーションの切り替える秒数とかを指定するくらいで非常に簡単に作成できるのでお勧めです!!

サービスを利用する際に事前に(JPEG・PNG)画像を準備する

GIF画像を作成するにはもちろん複数の静止画像が必要です。

複数の画像を順番に表示させるのがGIF画像ですので!

その場合、一つ一つの画像サイズを同じサイズに揃えておきましょう。

縦と横のサイズ(Px)を揃えておかないと合成がバラバラでアンバランスになりうまくいきません。

そのような画像サイズを揃えるといっても、初めに意識して作っていない場合は画像サイズなんてバラバラであると思います。

そんな時は画像編集ソフトの出番です。

JTrimという画像編集ソフトがあれば、画像サイズを編集するのなんて簡単です!

フリーソフトのJTrimは結構万能です。

これまでもJTrimを何度か紹介していますが、今回は、その中でも基本機能の「切り抜き」と「リサイズ」を使用します。

JTrimを立ち上げたらメニューの

「フォルダ」のアイコンからファイルを開きます。任意のファイルで良いです。

画像編集ソフトJTrim 次にその画像を編集していきますが、「イメージ」➡「切り抜き」で切り抜きを行います。

座標指定でも可能ですが、直接囲み枠をマウスで移動させながら切り抜く大きさを選択していくことも可能です。

全ての画像をサイズ統一しましょう。始めに「イメージ」➡「リサイズ」で縦か横の幅を決めてから「切り抜き」と進んだ方が他の画像にサイズが合わせやすいかもしれません。

キャプチャ

一つ目の画像を切り抜きしておくと、「座標2」というところの値が次から「切り抜き」をする際にも反映されるため、次々と作業をする場合にとっても楽になります。

簡単に言うと、切り抜きを指定した際の破線の四角い枠が次からも同じ大きさで残ってくれるので、その枠をあてはめたら良いだけなのです。

この辺りは実際に作業をしてみて感覚を掴んでくださいね!

このように順番に複数のファイルを同じ大きさで作成出来たら、始めに紹介したWebサイトへGoです!

ちなみにこれが今回作成したというGIF画像です。全部で6つの画像が組み合わされてアニメーション表示されています。

GIFアニメはクリックすると実際にページへ移動します。BGMを28話すべてのページに設定しています。PCでは自動で音楽が流れるので音量に気を付けて下さいね(^^♪

GIFアクセストリガー誕生秘話

アニメーションの切り替え設定スピードは3秒送りです。

GIFアニメは結構ファイルサイズが重たくなりがちですので、元の画像サイズを抑えるようにしておくといいでしょう。

Web上で画像を圧縮してくれるこちらのサービスをどうぞ!!


コメントフォーム

*
*
* (公開されません)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

FACEBOOKコメント

Return Top