そこはかとなく好奇心を刺激するクリエイターの秘密基地。

そこはかとなく好奇心を刺激するクリエイターの秘密基地。

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

      2016/02/09

GIFアニメをPhotoshopで作る方法|第3回 トゥイーンの使い方(位置・不透明度・効果)

こんにちは、GIFMAGAZINEでデザイナーをしている大野謙介(@SeKai_SeiFuKu)です。本連載は、Photoshopを用いて、GIFアニメを作成する方法を5回に分けて解説します。タイムラインパネルの使い方、GIF形式の保存の仕方、動画をGIFに変換する方法、2つのフレームだけで簡単にアニメーションが作成できるトゥイーンの使い方、写真1枚からアニメーションが作れるパペットワープ、最後にはシネマグラフという手法を用いて、幻想的なGIFアニメを制作します。

「PhotoshopでGIFアニメを作る方法」(大野謙介 連載)
第1回 タイムラインパネルの使い方、GIF形式の保存方法
第2回 動画をGIFに変換する方法
第3回 トゥイーンの使い方(位置・不透明度・効果)
第4回 パペットワープで写真1枚でGIFアニメを作る方法
第5回 シネマグラフの作り方

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

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

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

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

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

使用した素材ファイル

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

解説の流れ

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

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

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

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

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

1-2.[ウィンドウ]メニュー→[チャンネル]パネルを開きます。

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

レッドのサムネイルをクリックすると、下記のような画面になります。
スクリーンショット 2014-10-27 15.34.27

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

1-4.グリーン、ブルーを表示し、コピー、貼り付けをすると切り抜きが完了

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

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

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

タイムラインパネルの各ボタンの役割は以下のとおりです。
1-3.タイムラインパネルのボタンについて

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

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

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

2-1.フレームをコピーしたら、2フレーム目を選択し、移動ツールを使って、炎のレイヤーを上に移動させます。

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

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

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

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

tween_ichi

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

レイヤー効果をトゥイーンさせて作ったGIFアニメ

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

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

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

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

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

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

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

位置、不透明度、効果すべてをトゥイーンさせて作ったGIFアニメーション
さらにオーバーに作りこむと。

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

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

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

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

PhotoshopでGIFアニメを作る方法[第4回]パペットワープ,写真1枚でGIFアニメを作る方法

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

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

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

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

 - PhotoshopでGIFアニメを作る方法, クリエイター, 大野謙介 , , ,

crem fbpage header
(いいね!で最新記事を毎日受け取れるみたいですよ)

あなたの好奇心を刺激する
コラム、ビジュアルビュース、GIFマンガ、海外映像作品紹介記事を毎日配信

more