PhotoshopでつくるGIFアニメバナー 第1回:スピンぼかしとトゥイーンで躍動感あるGIFアニメバナーをつくろう

BY 公開

Dreamweaver入門

Photoshop CC(2014年06月公開) 対応

本連載では、PhotoshopでGIFアニメバナーを制作する方法を解説します。本記事では、1枚のクルマの写真をもとに、スピンぼかしとトゥイーン機能を使って躍動感あるGIFアニメバナーをつくります。

Photoshop CC の体験版をダウンロード

再度注目されているGIFアニメーション

はじめまして、東京都・秋葉原で、GIFアニメーション(以下、GIFアニメ)好きのための投稿・共有サービス「GIFMAGAZINE」のデザインを担当している大野謙介と申します。

皆さんは「GIFアニメ」と聞いてどのような印象を受けるでしょうか?
「懐かしい」「古い」など、様々な声が聞こえてきそうです。GIFフォーマットは1987年に誕生し、翌々年にアニメーションや透過の機能が実装されました。

オックスフォード米語辞典の「Word of the year 2012」にGIFが選出されたり、2014年6月19日にはTwitterがGIFアニメ投稿に対応するなど、最近になってGIFが再度注目されています。その理由として、次の3点が挙げられるでしょう。

  • モバイルデバイスの普及により、クロスプラットフォームな動画再生ニーズの高まり
  • 動画広告表現との高い親和性
  • ループ表現の面白さからアートとしての復興

本連載では、PhotoshopでGIFアニメバナーを制作する方法を解説します。「バナー」をテーマに基本的、実用的なテクニックを取り上げます。

最近のGIFアニメでは、タイムラプスやシネマグラフ、ストップモーションなど、様々なアート手法が取り入れられています。これらのキーワード+GIFで検索してみてください。きっと、面白い作品に出会えるでしょう。皆さんの創造性の第一歩として、今回の連載がお役に立てれば幸いです。

GIFアニメを作成したら、ぜひ「GIFMAGAZINE」に投稿してください。また、2014年12月上旬にGIFアニメクリエイターの祭典「the GIFs -Award of GIF Creator-」を開催します。これを機にGIFアニメ制作に挑戦してみてはいかがでしょうか。

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

1枚のクルマの写真をもとに、スピンぼかしとトゥイーン機能を使って、次のような躍動感あるGIFアニメバナーをつくります。

クルマの写真は、フリー写真素材サイト「PAKUTASO(ぱくたそ)」の「雪の中の車」を使用しています。PAKUTASOサイトから入手してください。

下記の手順で制作していきます。

<解説の流れ>

  1. パスぼかしで躍動的な回転を表現する。
  2. トゥイーン機能で2フレーム間を補完する。
  3. テキストやフッターを載せてGIFアニメバナーに仕上げる。

1 パスぼかしで躍動的な回転を表現する

1-1 新規ファイルを作成し、写真を読み込む

[ファイル]メニュー→[新規]を選択し、幅350px、高さ240pxで新規ファイルを作成します。

[ファイル]メニュー→[埋め込みを配置]あるいは[リンクを配置]を選択し、クルマの写真を読み込みます。読み込み後は、適当なサイズに調整し、レイヤー名を「タイヤ1」と変更します。

1-2 タイヤのレイヤーを複製する

タイヤの回転の速さ(停止状態含む)を5段階で表現するため、「タイヤ1」レイヤーを4回コピーします。レイヤー名を「タイヤ2」~「タイヤ5」と変更し、すべてのレイヤーを「タイヤ」グループにまとめます。ここでグループにまとめることで、後ほどトゥイーン機能を用いる際に作業が容易になります。

1-3 スマートオブジェクトに変換する

スピンぼかしをかける前に、画像をスマートオブジェクトに変換しておきます。そうすることで、変更に強いレイヤーになります。

各レイヤーを選択して、右クリックメニューから[スマートオブジェクトに変換]を選択します。

1-4 タイヤにぼかしをかける

[フィルター]メニュー→[ぼかしギャラリー]→[スピンぼかし]を選択します。

[スピンぼかし]では、ぼかし領域の中心部のポインタを動かすと「位置」を変更することができ、周囲にある4つのポインタを動かすことで「形」を変更することができます。

また、[ぼかしツール]パネルに表示される[スピンぼかし]→[ぼかし角度]でスピンぼかしの強度を設定できます。数字が大きいほど、スピンぼかしの強度が強くなり、スピンの速度が速い見た目となります。

スピンぼかしの範囲と強度を設定したら、上部のツールオプションバーにある[OK]ボタンをクリックして確定させます。このように非常に直感的な操作で、円形・楕円形の物体の回転移動に対してぼかしをかけることができます。

それでは、各タイヤレイヤーに、スピンぼかしをかけましょう。段階的に停止する様子を表現するため、[ぼかし角度]を「タイヤ1」レイヤーは20°、「タイヤ2」レイヤーは15°、「タイヤ3」レイヤーは10°、「タイヤ4」レイヤーは5°と段階的に値を変えます。なお、「タイヤ5」レイヤーは停止した状態にするので、スピンぼかしはかけません。

2 トゥイーン機能で2フレーム間を補完する

2-1 [タイムライン]パネルを開き、フレームをコピーする

[ウィンドウ]メニュー→[タイムライン]を選択します。[タイムライン]パネルが開き、タイムラインの形式を選ぶボタンが表示されているので、[フレームアニメーションを作成]を選んでクリックします。

[タイムライン]パネルには、フレームの[コピー]、フレームの[削除]、2フレーム間を保管してくれる[トゥイーン]、[プレビュー]などのボタンがあります。1フレームごとに、レイヤーの[位置]、[不透明度]などを変更することで、レイヤーに躍動感のある動きをつけることができ、アニメーションを制作することができます。

[タイムライン]パネルのフレームのサムネイル画像の下を選択すると、1フレームあたりの秒数を設定することができます。今回は0.1秒としました。

そして、フレーム1を選択した状態で[コピー]ボタンを押して、フレーム1をコピーし、フレーム2を作成します。

今回のアニメでは、右側から左側へとクルマを移動させるので、フレーム1を選択した状態で、[移動ツール]を使って「タイヤ」グループ全体をキャンパスの右側に移動させます。次の図は、フレーム1の最終的な状態です。

続いて、フレーム2を選択した状態で、[移動ツール]を使って「タイヤ」グループ全体を左側に移動させます。次の図はフレーム2の最終的な様子です。

これでアニメーションの最初と最後の状態が作成できました。

2-2 トゥイーンでフレーム間を補完する

フレーム1とフレーム2の間のフレームを補完するために、フレーム2を選択した状態で、[タイムライン]パネルの[トゥイーン]ボタンをクリックします。

[トゥイーン]ダイアログボックスが開くので、[追加するフレーム]を数値を入力します。今回、タイヤの回転の速さ(停止状態含む)を5段階で表現し、「タイヤ」グループに5つのレイヤーを作成しているので、全体が5フレームとなるように[追加するフレーム]を「3」としています。

[パラメーター]は、今回[不透明度][効果]は不要なのでチェックを外しています。設定したら、[OK]ボタンをクリックします。

全部で5フレームとなりました。各フレームごとにタイヤレイヤーの表示・非表示の設定を行います。

  • フレーム1では「タイヤ1」レイヤーのみを表示。
  • フレーム2では「タイヤ2」レイヤーのみを表示。
  • フレーム3では「タイヤ3」レイヤーのみを表示。
  • フレーム4では「タイヤ4」レイヤーのみを表示。
  • フレーム5では「タイヤ5」レイヤーのみを表示。

これで無事タイヤ部分のGIFアニメが完成しました。

3 テキストやフッターをのせてGIFアニメバナーに仕上げる

3-1 テキストやフッターを作成する

バナーの最終調整をします。テキストやフッターを作成し、好みの場所に配置します。今回は文字のアニメーションに関しての説明は割愛させていただきますが、タイヤ同様に[タイムライン]パネルのトゥイーン機能を利用しています。今回の作例では最終的に14フレームとなりました。

3-2 GIFで書き出す

バナーのデザインが完成したら、GIFアニメに書き出します。[ファイル]メニュー→[Web用に保存]を選択します。

保存形式を[GIF]にして、[保存]ボタンをクリックして作業終了です。

今回は、スピンぼかしとトゥイーン機能で躍動感のあるGIFアニメバナーを制作しました。スピンぼかしを用いると、回転表現をしたアニメーションが非常に簡単に制作することができます。次回は、動画を読み込んでGIFアニメバナーを制作します。ご期待ください。

  TAGS