キャラクターが動いているように見えるGIFファイルの作成方法

シェアする

インターネットで色んなサイトやブログを見ていると、このようなキャラクターが簡単な動きをする画像が目に留まることがあります。

これはどうやってつくると思いますか?GIFファイルといいますが、原理はアニメと同じなんです。

テレビや映画のアニメは1秒間に数十枚の絵を連続で表示させてスムーズな動きを表現していますが、GIFファイルはほんの数枚の絵で簡単な動きを表示させます。

GIFファイルを作成するのは難しそうに思えますが、誰でも簡単に作成できるフリーソフトがいくつかあります。

今回はその中でも、画像の加工などが一緒にできるPhotoScapeという無料で優秀なソフトを紹介します。

スポンサーリンク

PhotoScapeの導入方法

PhotoScapeダウンロード←こちらからダウンロードできます。

①はWindows NT/2000/XP/Vista/7/8/10用でPhotoScape3.7になります。
②はWindows 10用のPhotoScape Xなります。

PhotoScape XはPhotoScape3.7より高機能ですが、使いこなすまでに時間がかかります。

GIFアニメーションの作成方法

今回は使い方がより簡単なPhotoScapeを使って説明します。

まずはアニメの元になる画像素材を手に入れなければいけません。今回は無料素材集サイト・アフィピクで適当なものを見つけてきました。

ご覧いただければわかると思いますが、上のGIFアニメには下の4枚の絵を使っています。

この4枚の画像素材を使ってGIFアニメを作成する手順を説明します。

PhotoScapeをダウンロード&インストールして起動します。

「GIFアニメ」をクリック。

素材画像が入っているフォルダーを選択すると①に表示されるので、表示したい順番にドラッグ&ドロップで落とし込んでいきます。

②の再生ボタンをクリックすると再生されますので、確認しながら③で動作速度と表示効果と画像サイズなどを設定します。

設定がすんだら④をクリックしてブラウザーでちゃんと再生されるか確認します。

ちゃんと再生されることが確認できたら、⑤をクリックして保存します。

再生速度や効果の設定を変えることによって、同じ素材でも様々な見せ方ができます。

また、PhotoScapeの「画像編集」で画像素材1枚1枚に吹き出しとセリフを入れていけばこのようなアピールもできます。

どのようなパターンを作成することができるのか

無料素材集サイト・アフィピクに無料会員登録すると、アピールに使える矢印などの素材が特典としてもらえるので、それを使ってどのような表示効果を表現できるのかいくつかの例を紹介します。

「効果の変更」をクリックすると7パターンの中から選択ができます。上下左右の移動は読んで字のごとく、その方向に移動しているように見えます。

例えば右に移動だとこんな感じです。

「現在のフレームを黒色に移行」ならこんな感じです。

 

「現在のフレームを白色に移行」ならこんな感じです。

 

ちなみにWindows 10用のPhotoScape Xを使えばこんな感じの効果も選べます。

              

テキストを入れることもでき、再生回数も1~5回と無限を選択できます。

まとめ

いかがでしょうか?思っていたより簡単ですね!ブログやサイトに使用すれば使い方次第ではアピール度を増すことができます。

ただし、面白いからといって使い過ぎにはご注意ください!

実はこのGIFファイルは結構サイズが大きくなりますので、読み込みに時間がかかる可能性が高くなります。

そして、1ページに沢山の動きがあると逆にうっとうしく感じてしまいます。絵の種類にもよりますが、1ページに1~2カ所くらいが丁度いいんじゃないでしょうか?

最後までお付き合いいただき、ありがとうございました。

スポンサーリンク