ホーム ⇒ フォトショップ講座  ⇒ GIFアニメ講座5

  5:写真でGIFアニメ! 
◆◇トゥイーンって何?アニメ作りの便利な機能◇◆

ImageReadyでアニメを作る時に、最もよく使う機能が「トゥイーン」です。
トゥイーンは作業の手間を省いてくれる便利なツールなんですよ。
2006年07月29日更新

前バナーを作ろう!

戻る

写真の一部をアニメにしてみよう!次

GIFアニメ作りに欠かせない「トゥイーン」とは?

「トゥイーン」は、コマとコマの間をつなぐ画像を自動的に作ってくれる機能です。写真だけでなく、イラストのアニメを作るときにも使えます。今回は写真を使ったナンセンスアニメです。あなたもユニークな超短編映画をGIFアニメで作ってみませんか?

材料

レイヤー1
(背景)
レイヤー2
(福助)
レイヤー3
(人物1)
レイヤー4
(人物2)
背景 福助 人物 人物
レイヤー5
(ふきだし1)
レイヤー6
(ふきだし2)
レイヤー7
(ふきだし3)
レイヤー8
(ふきだし4)
ふきだし ふきだし ふきだし ふきだし

完成作品

「心霊写真?」

福助!

あれ? 今、何かが……!?

作り方

最初の3コマを作る最初の3コマを作る

元画像は200×150ピクセルで作ることにしました。

最初の3コマはこんな感じで作ります。まだ秒数の設定はしてありません。

コマの作り方はGIFアニメ講座3 : 「超カンタンGIFアニメ!」でやりましたね。

4コマ目で福助は右側、5コマ目で福助は左側に移動4コマ目で福助は右側、5コマ目で福助は左側に移動

いよいよトゥイーン登場です。

4コマ目で、「福助のレイヤー」を表示させます。この福助を移動ツールを使って右端に移動します。

5コマ目を作って、「福助のレイヤー」を移動ツールを使って左端に移動します。この時シフトキーを押しながらドラッグして移動すると、水平に移動することができます。

大切なのは同じ福助のレイヤーを移動するということです。福助のレイヤーの複製を作って移動してはいけません。

4コマ目と5コマ目を選択4コマ目と5コマ目を選択

アニメーションパレットを見てください。4コマ目と5コマ目をシフトキーを押しながらクリックして下さい。4コマ目、5コマ目がアクティブになりましたか? つまり2つのコマが選択されている状態ですね。

4コマ、5コマがアクティブな状態で、トゥイーンを選ぶ4コマ、5コマがアクティブな状態で、トゥイーンを選ぶ

その状態で、画像のの赤い□の部分をドラッグして下さい。その項目の中に、「トゥイーン」というものがありますからそれを選択します。

トゥイーンのウィンドウの設定

するとこのようなウィンドウが開きます。これを左の画像のように設定します。

追加するフレームは「5」。これは自動で作ってくれるコマ数を表しています。

パラメータは「位置」にチェック。

そしてOKをクリックします。

5コマができた!

あっという間に5コマが追加されました! コマを見てみると、福助が右から左に移動していることが分かります。

さらに3コマを作る

その後の3コマを作りましょう。そしてコマの表示時間を設定します。全部で13コマあります。

最適化した重さは58.47キロバイト。重い。最適化した重さは58.47キロバイト。重い。

最適化パレットを見て下さい。ビューウィンドウを見ながら、GIFの減色処理をします。

減色処理についてはGIFアニメ講座2 :「画像の種類と減色・透過を学ぼう」でやりましたね。

左の画像では64色にしています。200×150ピクセルで作っているため、58.47キロにもなってしまっています。これは重い! そこで画像を小さくすることにします。

画像解像度を変更して、小さくしよう画像解像度を変更して、小さくしよう

【イメージ→画像解像度】を選んで下さい。すると左のようなウィンドウが開きます。今回は□で囲んだ部分の数値を30%にしました。

これで元画像の30%の大きさ(200×150ピクセル→60×45ピクセル)になります。

最初からこの大きさで作ればいいのでは? と思われるかも知れませんが、小さい画像で作ると、細かくて作業が大変です。全て作り終わった後に一気に小さくする方が効率的ですよ。

画像が小さくなって軽くなった。画像が小さくなって軽くなった。

ビューウィンドウを見てみると、重さが7.75キロバイトになっています。 もちろんもっと軽くするために減色したり、大きさを変えてみてもOKです。

最後に【ファイル→最適化ファイルを保存】で保存します。

完成作品とおまけ

福助!

完成!なんで福助なのかは聞かないように。

モノクロ福助

モノクロバージョンです。

おまけ

おまけに作ってみましたー。えへ。

前バナーを作ろう!

戻る

写真の一部をアニメにしてみよう!次

幻想画廊」 (c) Maria Garcia, 2002-2008

ホーム ⇒ フォトショップ講座  ⇒ GIFアニメ講座5