PhotoshopでGIFアニメを作る方法[第3回]トゥイーンの使い方

本記事で制作するGIFアニメ

このような炎が燃え上がるGIFアニメを制作します。

使用した素材ファイル

※炎のサンプル画像は、フリー写真素材サイトの「Free Stock Photography」の「Fire, Fire Balls, Flames」を利用しています。こちらのサイトから入手してみてください。

解説の流れ

1. 炎を綺麗に切り抜く方法を解説します。
2. トゥイーンを使って２フレーム間の「位置」の変化を補完します。
3. トゥイーンを使って２フレーム間の「不透明度」の変化を補完します。
4. トゥイーンを使って２フレーム間の「効果」の変化を補完します。
5. ２フレーム間の「位置」「不透明度」「効果」を補完して燃え上がる様子を表現します。

1.炎を綺麗に切り抜く方法

1-1.炎のサンプルファイルを読み込みます。

1-2.[ウィンドウ]メニュー→[チャンネル]パネルを開きます。その後、グリーンとブルーを非表示にします。

1-3.[自動選択ツール]を選択し、⌘(command)キーを押しながら、レッドのサムネイルをクリックします。

レッドのサムネイルをクリックすると、下記のような画面になります。

1-4.グリーン、ブルーを表示し、⌘[command]キー+Cでコピー、⌘[command]キー+Vで貼付けをすると切り抜きが完了します。

このように炎が綺麗に切り抜けました。

この後の作業が見やすいように、背景をぬりつぶしました。

それでは実際にGIFアニメーションを作っていきましょう。[ウィンドウ]メニュー→[タイムライン]を選択してタイムラインパネルを開きます。

タイムラインパネルの各ボタンの役割は以下のとおりです。

ここで、１フレーム目をコピーしておきましょう。

この後トゥイーンによって、位置、不透明度、レイヤー効果をそれぞれ解説をしていきます。GIF形式の保存方法は、第1回の最後に解説をしていますので、そちらをご覧下さい。
GIF形式の保存方法について

2.トゥイーンを使って２フレーム間の「位置」の変化を補完する。

2-1.まずフレームをコピーし、2フレーム目を選択します。その後、移動ツールを使って、「炎のレイヤー」をカンバス上部の位置に移動させます。

2-2.トゥイーンボタンを選択し、[前のフレーム]、保管するフレームを[5]、パラメーターの[位置]にチェックが付いていることを確認して[OK]を選択します。

ここまで完了すると下図のようになります。

[位置]をトゥイーンさせて作ったGIFアニメーション

位置のみを補完するとこのようなGIFアニメが作成できます。それでは不透明度を変化させてみたGIFはどうなるか見てみましょう。

3.トゥイーンを使って２フレーム間の「不透明度」の変化を補完する。

3-1.２フレーム目を選択し、不透明度を[0%]に指定します。

3-2.トゥイーンボタンを選択し、[前のフレーム]、保管するフレームを[5]、パラメーターの[不透明度]にチェックが付いていることを確認して[OK]を選択します。

不透明度の補完が完了すると下図のようになります。

[不透明度]をトゥイーンさせて作ったGIFアニメーション

続いて、レイヤー効果の補完をしたGIFアニメーションはどうなるか見てみましょう。

4.トゥイーンを使って２フレーム間の「効果」の変化を補完する。

4-1.２フレーム目を選択し、炎レイヤーでレイヤー効果の[光彩(外側)]を選択します。

4-2.任意の値で炎らしい値を選びます。今回は、不透明度75%、スプレッド0%、サイズ5pxとしています。

4-2.トゥイーンボタンを選択し、[前のフレーム]、保管するフレームを[5]、パラメーターの[効果]にチェックが付いていることを確認して[OK]を選択します。

[効果]をトゥイーンさせて作ったGIFアニメーション

「位置」「不透明度」「効果」それぞれのトゥイーンで作られた炎を比較してみましょう。

左から順に「位置」「不透明度」「効果」となっています。

それでは最後に[位置][不透明度][効果]全てのトゥイーンを用いるともっと燃え盛る炎を表現してみましょう。

5.２フレーム間の「位置」「不透明度」「効果」を補完して燃え上がる様子を表現します。

あらかじめ炎レイヤーをコピーするなどして、ボリュームを増やすとより炎のリアル感が表現できます。また、炎のパターンも１パターンだけでなく、複数の炎を入れるとより臨場感がでるでしょう。

位置、不透明度、効果すべてをトゥイーンさせて作ったGIFアニメーション

さらにオーバーに作りこむと。

炎ごとにスピードや不透明度を微妙に変化させ、カンバス上部に行くほど、不透明度を低く、移動のスピードを遅くすると雰囲気がでると思います。

次回はPhotoshopのパペットワープ機能を使って写真１枚からGIFアニメを作ります。

今回は、タイムラインパネルのトゥイーン機能を用いて「位置」「不透明度」「効果」の変化を１ボタンで補完させてアニメーションを作りました。次回は、パペットワープ機能を用いて、１枚の静止画からアニメーションを作成します。動物の写真や、フィギュアの写真が１枚あればアニメーションが作成できます。それらを活用してGIFアニメを作ってみましょう。

次回と合わせるとこのようなGIFアニメが作れます。

次回記事はこちら：第４回PhotoshopでつくるGIFアニメ[パペットワープ,写真１枚でGIFアニメを作る方法]

クリエイター：大野謙介(@SeKai_SeiFuKu)

GIFアニメ好きのためのGIF作品の投稿・共有サービス「GIFMAGAZINE」デザイナー。Adobe Pinch Inにて「Photoshopで作るGIFアニメバナー」を連載
Follow @SeKai_SeiFuKu