そこはかとなく好奇心を刺激するクリエイターの秘密基地。CREMとは取材のリクエストライター募集RSSそこはかとなく好奇心を刺激するクリエイターの秘密基地。そこはかとなく好奇心を刺激するクリエイターの秘密基地。2016/02/09こんにちは、GIFMAGAZINEでデザイナーをしている大野謙介(@SeKai_SeiFuKu)です。本連載は、Photoshopを用いて、GIFアニメを作成する方法を5回に分けて解説します。タイムラインパネルの使い方、GIF形式の保存の仕方、動画をGIFに変換する方法、2つのフレームだけで簡単にアニメーションが作成できるトゥイーンの使い方、写真1枚からアニメーションが作れるパペットワープ、最後にはシネマグラフという手法を用いて、幻想的なGIFアニメを制作します。シネマグラフの作り方クリエイター:大野謙介(@SeKai_SeiFuKu)GIFアニメ好きのためのGIF作品の投稿・共有サービス「GIFMAGAZINE」デザイナー。本記事で制作するGIFアニメこのような炎が燃え上がるGIFアニメを制作します。Flames」を利用しています。こちらのサイトから入手してみてください。解説の流れ炎を綺麗に切り抜く方法を解説します。トゥイーンを使って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アニメーションさらにオーバーに作りこむと。炎ごとにスピードや不透明度を微妙に変化させ、カンバス上部に行くほど、不透明度を低く、移動のスピードを遅くすると雰囲気がでると思います。次回はPhotoshopのパペットワープ機能を使って写真1枚からGIFアニメを作ります。変化を1ボタンで補完させてアニメーションを作りました。次回は、パペットワープ機能を用いて、1枚の静止画からアニメーションを作成します。動物の写真や、フィギュアの写真が1枚あればアニメーションが作成できます。それらを活用してGIFアニメを作ってみましょう。次回と合わせるとこのようなGIFアニメが作れます。次回記事はこちら:第4回PhotoshopでつくるGIFアニメ[パペットワープ,写真1枚でGIFアニメを作る方法]クリエイター:大野謙介(@SeKai_SeiFuKu)GIFアニメ好きのためのGIF作品の投稿・共有サービス「GIFMAGAZINE」デザイナー。最後までお読みいただきありがとうございました。