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

Dreamweaver入門

Photoshop CC（2014年06月公開）対応

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

再度注目されている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サイトから入手してください。

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

＜解説の流れ＞

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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