PhotoshopでGIFアニメを作る方法[第3回]トゥイーンの使い方
2016/02/09
「PhotoshopでGIFアニメを作る方法」(大野謙介 連載)
第1回 タイムラインパネルの使い方、GIF形式の保存方法
第2回 動画をGIFに変換する方法
第3回 トゥイーンの使い方(位置・不透明度・効果)
第4回 パペットワープで写真1枚でGIFアニメを作る方法
第5回 シネマグラフの作り方
クリエイター:大野謙介(@SeKai_SeiFuKu)
GIFアニメ好きのためのGIF作品の投稿・共有サービス「GIFMAGAZINE」デザイナー。Adobe Pinch Inにて「Photoshopで作るGIFアニメバナー」を連載
本記事で制作するGIFアニメ
![PhotoshopでGIFアニメを作る方法[第3回]トゥイーンの使い方](http://sinkr.main.jp/creators_magazine/wp-content/uploads/2014/10/photoshop_gif_03_fire.gif)
このような炎が燃え上がるGIFアニメを制作します。
使用した素材ファイル
※炎のサンプル画像は、フリー写真素材サイトの「Free Stock Photography」の「Fire, Fire Balls, Flames」を利用しています。こちらのサイトから入手してみてください。
解説の流れ
- 炎を綺麗に切り抜く方法を解説します。
- トゥイーンを使って2フレーム間の「位置」の変化を補完します。
- トゥイーンを使って2フレーム間の「不透明度」の変化を補完します。
- トゥイーンを使って2フレーム間の「効果」の変化を補完します。
- 2フレーム間の「位置」「不透明度」「効果」を補完して燃え上がる様子を表現します。
1.炎を綺麗に切り抜く方法
1-1.炎のサンプルファイルを読み込みます。
1-2.[ウィンドウ]メニュー→[チャンネル]パネルを開きます。その後、グリーンとブルーを非表示にします。
1-3.[自動選択ツール]を選択し、⌘(command)キーを押しながら、レッドのサムネイルをクリックします。
レッドのサムネイルをクリックすると、下記のような画面になります。
1-4.グリーン、ブルーを表示し、⌘[command]キー+Cでコピー、⌘[command]キー+Vで貼付けをすると切り抜きが完了します。
このように炎が綺麗に切り抜けました。
この後の作業が見やすいように、背景をぬりつぶしました。
それでは実際にGIFアニメーションを作っていきましょう。[ウィンドウ]メニュー→[タイムライン]を選択してタイムラインパネルを開きます。
タイムラインパネルの各ボタンの役割は以下のとおりです。
ここで、1フレーム目をコピーしておきましょう。
この後トゥイーンによって、位置、不透明度、レイヤー効果をそれぞれ解説をしていきます。GIF形式の保存方法は、第1回の最後に解説をしていますので、そちらをご覧下さい。
GIF形式の保存方法について
2.トゥイーンを使って2フレーム間の「位置」の変化を補完する。
2-1.まずフレームをコピーし、2フレーム目を選択します。その後、移動ツールを使って、「炎のレイヤー」をカンバス上部の位置に移動させます。
2-2.トゥイーンボタンを選択し、[前のフレーム]、保管するフレームを[5]、パラメーターの[位置]にチェックが付いていることを確認して[OK]を選択します。
ここまで完了すると下図のようになります。
[位置]をトゥイーンさせて作ったGIFアニメーション
位置のみを補完するとこのようなGIFアニメが作成できます。それでは不透明度を変化させてみたGIFはどうなるか見てみましょう。
3.トゥイーンを使って2フレーム間の「不透明度」の変化を補完する。
3-1.2フレーム目を選択し、不透明度を[0%]に指定します。
3-2.トゥイーンボタンを選択し、[前のフレーム]、保管するフレームを[5]、パラメーターの[不透明度]にチェックが付いていることを確認して[OK]を選択します。
不透明度の補完が完了すると下図のようになります。
[不透明度]をトゥイーンさせて作ったGIFアニメーション
続いて、レイヤー効果の補完をしたGIFアニメーションはどうなるか見てみましょう。
4.トゥイーンを使って2フレーム間の「効果」の変化を補完する。
4-1.2フレーム目を選択し、炎レイヤーでレイヤー効果の[光彩(外側)]を選択します。
4-2.任意の値で炎らしい値を選びます。今回は、不透明度75%、スプレッド0%、サイズ5pxとしています。
4-2.トゥイーンボタンを選択し、[前のフレーム]、保管するフレームを[5]、パラメーターの[効果]にチェックが付いていることを確認して[OK]を選択します。
[効果]をトゥイーンさせて作ったGIFアニメーション
「位置」「不透明度」「効果」それぞれのトゥイーンで作られた炎を比較してみましょう。
左から順に「位置」「不透明度」「効果」となっています。

![[不透明度]をトゥイーンさせて作ったGIFアニメーション](http://sinkr.main.jp/creators_magazine/wp-content/uploads/2014/10/tween_futoumei.gif)

それでは最後に[位置][不透明度][効果]全てのトゥイーンを用いるともっと燃え盛る炎を表現してみましょう。
5.2フレーム間の「位置」「不透明度」「効果」を補完して燃え上がる様子を表現します。
あらかじめ炎レイヤーをコピーするなどして、ボリュームを増やすとより炎のリアル感が表現できます。また、炎のパターンも1パターンだけでなく、複数の炎を入れるとより臨場感がでるでしょう。
位置、不透明度、効果すべてをトゥイーンさせて作ったGIFアニメーション
さらにオーバーに作りこむと。
![PhotoshopでGIFアニメを作る方法[第3回]トゥイーンの使い方](http://sinkr.main.jp/creators_magazine/wp-content/uploads/2014/10/photoshop_gif_03_fire.gif)
炎ごとにスピードや不透明度を微妙に変化させ、カンバス上部に行くほど、不透明度を低く、移動のスピードを遅くすると雰囲気がでると思います。
次回はPhotoshopのパペットワープ機能を使って写真1枚からGIFアニメを作ります。
今回は、タイムラインパネルのトゥイーン機能を用いて「位置」「不透明度」「効果」の変化を1ボタンで補完させてアニメーションを作りました。次回は、パペットワープ機能を用いて、1枚の静止画からアニメーションを作成します。動物の写真や、フィギュアの写真が1枚あればアニメーションが作成できます。それらを活用してGIFアニメを作ってみましょう。
![PhotoshopでGIFアニメを作る方法[第4回]パペットワープ,写真1枚でGIFアニメを作る方法](http://sinkr.main.jp/creators_magazine/wp-content/uploads/2014/10/fire_bird.gif)
次回と合わせるとこのようなGIFアニメが作れます。
次回記事はこちら:第4回PhotoshopでつくるGIFアニメ[パペットワープ,写真1枚でGIFアニメを作る方法]
クリエイター:大野謙介(@SeKai_SeiFuKu)
GIFアニメ好きのためのGIF作品の投稿・共有サービス「GIFMAGAZINE」デザイナー。Adobe Pinch Inにて「Photoshopで作るGIFアニメバナー」を連載
Follow @SeKai_SeiFuKu

(いいね!で最新記事を毎日受け取れるみたいですよ)
あなたの好奇心を刺激する
コラム、ビジュアルビュース、GIFマンガ、海外映像作品紹介記事を毎日配信