6：写真の一部をアニメにしてみよう！　
◆◇軽くて見栄えのする大きなアニメを作ろう！◇◆

写真でGIFアニメ！

絵の一部だけを動かすアニメ作り

GIFアニメは重さとの戦いです。でもサイトで大きな絵を動かしてみたいというのもよく分かります。そんな時は絵の一部のみをアニメにしてみてはいかがでしょうか？　最後の講座となりましたが、ぜひアニメ作りにお役立て下さい。

材料

今回は架空のホームページ「わんこハウス」のトップページアニメを作ってみます。

ワンコの写真を用意した

■使用素材

「Incredible Image Pak 65,000」

ウィンクする目を作成するための元画像

■使用素材

「Incredible Image Pak 65,000」

完成作品

こちらをご覧下さい。中央の犬がウィンクします。

作り方

フォトショップとイラストレータで元画像を作成

まずは、犬の写真を使って、このような画像を作ってみました。使ったソフトはフォトショップとイラストレータです。

タイトルは「わんこハウス」にしましたが、このタイトルに見覚えがある方は熱心にGIFアニメ講座を見てくださっている方かとても記憶力が良い方ですね。

切り抜きの方法については、フォトショップ道場18日目「いろんな切り抜きの方法」で学びましたね。

フィルタの「ゆがみ」でウィンクする目を作る

ウィンクする犬の目は、フィルタの「ゆがみ」で簡単に作ることができます。

犬の目の部分をコピーして、複製を作ります。作った複製を長方形選択ツールで囲んで、【フィルタ→ゆがみ】を選びます。すると左のようなウィンドウが開きますので、少しずつ形をゆがませて、ウィンクしているような目に変形させます。

この「ゆがみ」を使って変形させたウィンクのコマを2種類作っておきます。

目の部分を利用してコマを作る

完全に目をつむったコマは、眠っている犬の写真を使いました。ゆがみで作っても良かったのですが、より自然に見えるかなと思って。

目の所を長方形選択ツールで囲んでコピーして、上の1で作った画像にペーストします。

上手くなじむように、大きさや色調を変えた後、周りを消しゴムツールで消します。

レイヤーはこんな感じ

ウィンクのためのアニメのコマは

（1）ゆがみで変形させた目1

（2）ゆがみで変形させた目2

（3）目をつむった犬の目

の3コマを元画像の他に用意したことになります。

ガイドをひいて、目の部分を囲む

犬の目の部分を囲むように、ガイドをひきます。

ガイドのひきかたについては、フォトショップ道場09日目「ガイド・グリッドを使おう」で学びましたね。

ウィンクのレイヤーの表示、非表示を変えてみて、ガイドの位置を調節して下さい。ウィンクする部分がガイドで囲まれた範囲に上手く収まればOKです。

スライスツールでガイドにそって切り離す

ここでImageReadyを起動して下さい。

ツールパレットの中からスライスツールを選びます。

ツールパレットについては、GIFアニメ講座1「 Adobe ImageReadyの機能を学ぼう」で学びましたね。

次に、【ビュー→スナップ先→ガイド】を選びます。これによって、ガイドにそってスライスすることができるので、ずれることがありません。ガイドのスナップは非常に重要なので忘れないで下さいね。

スライスツールで画像を切り分けます。切り分け方はご自由になさって構いません。

切り分け方を分かりやすくするとこんな感じ

下の図は、切り分け方が分かりやすいように、それぞれの画像を離して表示させたものです。

全て切り分けたら、最適化パレットでそれぞれの画像の形式を選びます。今回は目の部分以外は写真に適した「jpeg」形式を選びました。

ここで【ファイル→最適化ファイルを保存】を選び、画像とHTMLの両方を保存しておきます。

目の部分だけのアニメを作る

次にウィンクの部分のアニメを作りましょう。切り抜きツールで、目の部分をガイドにそって切り抜きます。

左のように、目の部分だけになりましたね。別の名前で保存しておきましょう。

アニメーションパレットの秒数設定

アニメーションパレットを見て下さい。ウィンクしているようにコマを作っていきます。時間設定は何度か再生ボタンを見ながら自然に見えるように調節して下さい。

これでOKということであれば【ファイル→最適化ファイルを保存】で保存します。

サイト作成ソフトで確認

さきほど作っておいたHTMLファイルを、お持ちのサイト作成ソフトで開いてみて下さい。

左のように自動的に作られたテーブルの中に画像がピッタリ収まっていますね。

この目の部分をウィンクのアニメと入れ替えます。プレビューやブラウザーで上手くウィンクしているかどうか確認して下さい。

後はボタンや文字を加えて、サイトを作ったら完成です。

完成作品

こちらをご覧下さい。中央の犬がウィンクします。

なぜ絵の一部だけをアニメにするのか？

「スライスで切り分けなど面倒！　犬の画像全体で1枚のGIFアニメを作れば良いじゃないか」という方もいらっしゃるかもしれません。でも1枚の絵でGIFアニメを作ってしまうと約80キロバイトとかなり重くなってしまうんです。スライスで切り分ければ、ページの重さは約30キロバイト。50キロバイトも節約できます。

それに写真でアニメを作る場合、GIF形式よりもJPEG形式の方がキレイですよ。ということで多少面倒ですが、この方法を使ってみました。

最後に

GIFアニメ講座を見てくださってありがとうございました。以上で全6講座終了です。この講座で「なんだか面白そう！　やってみたい」と思ってもらえたら私にとって大きな喜びです。ぜひぜひGIFアニメ作りを楽しんで下さいね♪

写真でGIFアニメ！