アニメーションを使った動きのある広告バナーは、静⽌画の広告よりも⽬を引きます。このチュートリアルでは、Photoshopのビデオタイムライン機能を使って、3つのレイヤー画像を切り替えて表⽰するGIFアニメーションの作り⽅をご紹介します。まずは下の動画で⼀連の制作⼯程を確認しましょう。

難易度2/5


 

本チュートリアル内で使⽤する主な機能

スマートオブジェクトレイヤーの編集、ビデオタイムラインの作成、切り替え⽅法、GIFアニメーションの書き出し

 

⼿順

1. レイヤーをグループ化して複製する

2. デザインのバリエーションを作成する

3. ビデオタイムラインを作成する

4. GIFアニメーションとして書き出す

⼿順1/4

レイヤーをグループ化して複製する

Photoshopを起動し、「ファイル」→「開く」から練習⽤サンプルファイル「banner.psd」を選択して開きます。ファッションセールの広告バナーのデザインが表⽰されます。

「ウィンドウ」→「レイヤー」を選択してレイヤーパネルを開きます。表⽰されているレイヤーをすべて選択し、パネル下部の「新規グループを作成」ボタンにドラッグしてグループ化します。次に、作成したレイヤーグループ(グループ1)を選択し、「新規レイヤーを作成」ボタンにドラッグして複製します。

このあと、スマートオブジェクトを使って編集を⾏うため、複製元のレイヤーに影響を与えないようにロックをかけておきます。複製元のレイヤーグループ(グループ1)を展開し、含まれる全てのレイヤーを選択して、「すべてをロック」ボタンをクリックします。

⼿順2/4

デザインのバリエーションを作成する

複製したレイヤーグループ(グループ1のコピー)を展開し、「Flower」レイヤーのスマートオブジェクトサムネールをダブルクリックして、スマートオブジェクトを開きます。

練習⽤サンプルファイルの「flower」フォルダーの中にある「flower_z.jpg」をカンバスにドラッグして配置します。レイヤーパネルで元のピンクの花のレイヤー(レイヤー1のコピー)を選択し、パネル下部の「レイヤーを削除」ボタンをクリックして削除します。スマートオブジェクトを保存してファイルを閉じると、バナー広告のデザインが⻘い花に置き換わります。

次に、テキスト部分の帯の⾊をブルーに変更します。レイヤーパネルで「⻑⽅形」レイヤーのレイヤーサムネールをダブルクリックして「カラーピッカー」ウィンドウを開き、ブルー(#0993fd)を設定して「OK」をクリックします。

同じ要領でレイヤーグループを複製し、「Flower」のスマートオブジェクトを「flower_{.jpg」に置き換え、帯の⾊をグリーン(3fbexx)に変更します。これで3つのバリエーションのデザインが作成できました。

 

作成した3つのレイヤーグループを、それぞれ結合します。レイヤーグループを選択し、右クリックしてメニューから「グループを結合」を選択すると、1枚のレイヤーに結合されます。

⼿順3/4

ビデオタイムラインを作成する

「ウィンドウ」>「タイムライン」を選択すると、「タイムライン」パネルが表⽰されます。「ビデオタイムラインを作成」をクリックすると、3つのレイヤーがビデオタイムラインに配置されます。

レイヤーの両端にポインターを合わせると表⽰が変わるので、その状態でドラッグして左右に動かすと⻑さを調整できます。まず、⼀番下のレイヤー(グループ1)の右端を左にドラッグして45フレームまで短くします。

次に、真ん中のレイヤー(グループ1のコピー)の左端を30フレームまで右に、右端を75フレームまで左にドラッグします。

最後に、⼀番上のレイヤー(グループ1のコピー2)の左端を60フレームまで右に、右端を105フレームまで左にドラッグします。

これで各レイヤーの⻑さが45フレームになり、それぞれのレイヤーの前後が15フレーム重なる状態になりました。

 

タイムラインパネルの「切り替え⽅法」ボタンをクリックし、「フェード」を選択してレイヤーの重なった部分にドラッグします。追加したフェードの右端を左にドラッグして15フレームに設定します。

設定が終わったら、タイムラインパネルの「再⽣」ボタンをクリックしてアニメーションを確認します。

⼿順4/4

GIFアニメーションとして書き出す

アニメーションが完成したら、「ファイル」→「書き出し」→「Web⽤に保存(従来)」を選択し、「Web⽤に保存」ウィンドウを開きます。右上のファイル形式で「GIF」を選択し、「保存」をクリックして指定の場所に保存します。

 

完成したGIFアニメーションはバナー広告に利⽤したり、SNSに投稿することも可能です。容量が軽くて短いGIFアニメーションは、デバイスや通信環境にかかわらず閲覧できるため、スマホユーザーの⽬にも⽌まりやすく、さまざまなプロモーションにご活⽤いただけます。

このページは役に立ちましたか。