初心者のための動画作成講座|仕事で使える映像制作 初心者のための動画作成講座

ホーム動画の作成 > (32)GIFアニメの作り方

GIFアニメの作り方

vol.32 GIFアニメの作り方

GIFアニメについて

GIFアニメの作り方については、
動画っぽいバナー」という記事で、
実は以前も書いたのですが、
あの時は、かなりの部分をはしょっていたので、
もう一度、詳しく作り方を書いてみたいと思います。

GIFアニメは、
静止画をパラパラマンガ的に動かして、
なんとなく動画的に見せられるものです。

凝ったものがいろいろと作られていて、
GIFアニメを配布しているサイトも多いようです。

人間は止まっているものよりも、
動くものに目が行く習性があるらしく、
同じようなバナーが並んでいる場合は、
少しでも動きのあるものの方が、目立つようなので、
GIFアニメを使ってバナーを作ることは
意味があると言われています。

今回は、フォトショップエレメンツ7を使って、
まずは2カットだけのGIFアニメを作ってみます。

GIFアニメの作り方

まずは、こちらのGIFアニメをご覧ください。

GIFアニメの作り方・完成例

「困ったわ」というせりふを言いながら、
困った表情をする女性と、

「まあ、ステキ!」というせりふを言いながら、
喜んでいる女性が、
1秒ごとに切り替わるというGIFアニメです。

しかも、切り替わった後は、
再び最初のカットに戻ることで、
永遠にループするという状態になっています。

非常に単純ですが、
説明しやすいので、まずは2カットだけのGIFアニメを
フォトショップエレメンツ7を使って、
作ってみることにします。

では、具体的な作り方です。

1)イラスト画像を用意する

  まずは、女性のイラスト画像を2枚用意します。
  今回は、ちびくら:FREE Download Illusutrationさんから
  イラスト素材をダウンロードしてきて、
  使用させていただきました。
  ありがとうございます。

  これをフォトショップエレメンツ7で読み込みます。

2)GIFアニメのサイズを決める

  最終的に作りたいGIFアニメのサイズをまず指定します。
  ファイル→新規→白紙ファイルを選択し、
  幅   300 px
  高さ  125 px
  解像度 72 ppi に設定します。

GIFアニメの作り方・白紙ファイルの設定

3)1カット目を作る

  1カット目として
  「まあステキ!」と言っている画像を作ります。

  先程読みこんだイラストをドラッグ&ドロップして、
  2)で作ったファイルに配置します。

GIFアニメの作り方・イラストを配置

  続いて横書き文字ツールで、テロップを入れます。
  今回は、「まあステキ!」と、ポップ体で打ち込みました。

GIFアニメの作り方・テロップを配置

  さらに、背景を薄いグレーにするために、
  レイヤー → 新規塗りつぶしレイヤー → べた塗り
  を選択し、OKを押し、
  ややグレーの色を選択します。

  すると画面がグレー一色で塗りつぶされるので、
  そのグレーのレイヤーを一番下に移動させます。

  ここまでで、
  画像はこんな感じに、

GIFアニメの作り方・まあステキの画像

  レイヤーの構造はこんな感じに
  なっていると思います。

GIFアニメの作り方・レイヤーの構造

4)2カット目を作る

  次に、「困ったわ」のカットを作ります。
  要領としては全く同じですが、
  先程作ったファイルに追加するように
  作っていきます。

  この時のコツとしては、
  同じファイルのレイヤーの上に、
  積み重ねるように作ることです。

GIFアニメの作り方・目のマークを使って位置をそろえる

  「まあステキ!」レイヤーの
  「目のマーク」をクリックすると、
  上に重なっている「まあステキ!」レイヤーが
  一時的に表示されなくなるので、
  これを使って、
  「困ったわ」レイヤーのイラストが
  大体同じ位置に来るように調整します。

GIFアニメの作り方・レイヤーを重ねる

  同じようにして、せりふのテロップも、
  似たような位置にくるように調整します。

5)レイヤーを整理する

  ここまでで、
  レイヤーはこうなっているはずです。

GIFアニメの作り方・レイヤーを再確認

  ここで、「べた塗り1」レイヤーを右クリックして、
  レイヤーを複製をクリックすると、
  「べた塗り1のコピー」というレイヤーが出来るので、
  これをドラッグして「まあステキ!」レイヤーの
  すぐ下に配置します。

  さらに、余分なレイヤー1を右クリックして
  レイヤーを削除をクリックし、削除します。

  ここまでで、
  レイヤーの構造はこんな感じになっているはずです。

GIFアニメの作り方・レイヤーを再確認2

6)レイヤーを別名で保存する

  ここで一度保存した後に、
  ファイル → 別名で保存 をクリックし、
  別の名前を付けて保存します。
  ファイル名は何でも大丈夫ですが、
  僕はよく最後に小文字で「b」と付けるようにしています。
  ほとんど同じ内容なのがわかりやすいからです。

7)レイヤーを統合する

  このままだと、レイヤーが6枚あることになるので、
  2枚にまとめます。

  上の3つのレイヤーをシフトキーを押しながらクリックし、
  レイヤー → レイヤーを統合をクリックします。

  同様にして、下の3つのレイヤーも統合します。

  ここまでで、
  レイヤーは「まあステキ!」と、
  「困ったわ」の2つだけになっているはずです。

GIFアニメの作り方・レイヤーを統合

 ※ちなみに、こうしてレイヤーを統合してしまうと、
  後でテロップを修正したくなっても、
  文字を書きかえられない状態になります。

  工程をさかのぼってテロップを直せるように、
  6)で一度保存しているというわけです。

8)GIFアニメとして保存する

  意外と長い工程になりましたが、
  もうちょっとです。

  ファイル → WEB用に保存 をクリックします。

  すると、設定する画面が出てくるので、
  「アニメーション」のところにチェックを入れます。

  また、下の方にある「ループ」にチェックを入れ、
  「フレームディレイ」というのが、
  1カットあたりの秒数ですので、ここでは「1」にします。

GIFアニメの作り方・アニメーションの設定

  さらに下の方にある、プレビューの文字の横にある
  地球?みたいなマークをクリックすると、
  ブラウザでGIFアニメが実際にどういう風に
  見えるかをチェックできます。

GIFアニメの作り方・プレビューマーク

  これをチェックして満足行くものであれば、
  OKを押して保存すれば完成です。

GIFアニメの作り方・完成例

いかがでしょうか?
パラパラマンガ的になりましたでしょうか?

GIFアニメは、GIFという画像ファイルとして
扱えるので、WEB初心者の僕でも扱いやすいファイルです。
そのままリンクを付ければGIFアニメバナーとしても
機能するので、非常に使い勝手のいいやつです。

是非、挑戦してみて下さい。




 

このような記事をメルマガで毎週金曜日14時から配信しています。もちろん無料です。 映像作りに興味をお持ちの方は、メルマガへの登録は以下のフォームをご利用下さい。

メルマガ購読・解除
仕事で使える映像制作
読者購読規約
>> バックナンバーpowered by まぐまぐ!
 

 

カスタム検索




ニュース

お問合せ

copyright 仕事で使える映像制作 Since 2010