貴方も PhotoshopでGIFアニメの広告 を制作してみませんか? 日本、アメリカ、ヨーロッパだけでなく、中国などでも急速にスマホが普及。 実店舗からネットショップへと人々の消費行動が移っている中で、販売とマーケティング戦略の中でネット広告はますます重要なポジションを占めるようになりました。

そんな状況の中で、ネット広告にGIFアニメを取り入れる動きが広まっています。 どうして? 画像が少し動くだけで、広告の注目度がグッとアップします。 生物の本能として、動くものには自然と注目してしまう・・ でも動画だど、動画広告枠になってしまいます。 GIFアニメなら、静止画と同じ条件で、画像が動く。 だから広告に注目が集まる! このメリットを利用しない手はありません。 今週のブログ記事は Adobe Photoshop を使って、簡単にGIFアニメのバナー広告を作成する方法をご紹介します。

Step-1

今回は最も一般的なバナー広告枠、300 x 250 pix で作成します。Photoshopのメニュー ファイル –> 新規を選び、プリセット Web の中から、300 250 pix を選択してください。こちらが白背景となります。

  

Step-2

今回は例として、スノボ商品のオンラインショップのウェブ広告をGIFアニメで作成してみます。 背景はスノボ画像とコピースペースのバランスから、741607504 を選択しました。 Shutterstock Editor で300 x 250 pixに切り出して、Photoshopの背景に配置します。

  

Step-3

広告をご覧頂いた方へのクリック要請ボタン(CTA: Call to Action ボタン)を作成します。 角丸長方形ツールでボタンを制作して、目立つようにオレンジ色を配色します。

  

Step-4

レイヤー効果(fx)を使い、クリック要請ボタンを立体的に演出します。 ボタンを配置したレイヤー右下のfxプルダウンから、「ベベルとエンボス」を選択し、「ベベル内側」、「深さ50%」、「サイズ 5pix」に設定します。

  

Step-5

クリック要請ボタンにキャッチコピー「セール会場はこちら!」を配置します。

 
別レイヤーに、バナー広告のコピー「スノボ用品 お年玉セール 絶賛開催中!」を配置します。

  

Step-6

いよいよここからGIFアニメを制作して行きます。 まず、Photoshop全体のメニュー「ウインドウ」から「タイムライン」を選択、タイムラインウインドウを表示します。 スノボ画像のみ表示(その他のレイヤーは非表示)して、「フレームアニメーションを作成」ボタンをクリック。 GIFアニメの1枚目を配置します。

  

Step-7

タイムラインウインドウの下に、「選択したフレームを複製」ボタンがありますので、このボタンを押して、フレームを追加します。 背景からコピーが浮き上がる感じに演出したいので、2枚目のフレームにはバナー広告のコピー「スノボ用品 お年玉セール 絶賛開催中!」のレイヤーを表示した上で、不透明度30%に調整して配置します。

  

Step-8

同じようにプレームを複製して、3枚目のフレームには、バナー広告のコピー「スノボ用品 お年玉セール 絶賛開催中!」のコピーを不透明度70%に調整して配置、4枚目のフレームには、バナー広告のコピー「スノボ用品 お年玉セール 絶賛開催中!」のコピーを不透明度100%に調整して配置します。

  

Step-9

5枚目のフレームには、クリック要請ボタンを表示させた画像を配置します。

  

Step-10

いよいよ最後の仕上げです。5枚目のフレームを複製して、7枚目、9枚目のフレームを配置します。6枚目と8枚目のフレームには、4枚目のクリック要請ボタンがないものを複製して配置します。 その上で、GIFアニメの表示時間を、1枚〜3枚目は0.1秒、4枚目、5枚目と7枚目を0.5秒、6枚目と8枚目を0.2秒、最後の9枚目を2秒に設定します。

  

Step-11

完成したGIFアニメをタイムラインでチェック。フレームの表示時間など、微調整をして、最後にPhotoshopのメニューから、「ファイル」–> 「Web用に保存」して、完成したGIFアニメのファイルを保存します。 もちろん実際の広告では、クリック要請ボタンにオンラインショップのリンクを貼っておいてくださいね!

今回はバナー広告用の 300x 250pixの作品でしたが、同じ方法で、もっと大きなGIFアニメや、背景の木の葉だけ風に揺れている・・ そんな演出も。 GIFアニメを広告に使っているサンプルはブログ記事「GIFアニメを広告に使ってみよう!」にも掲載されていますので、合わせてご覧ください。

 
こちらの記事は shutterstock Blog 英文の翻訳です。

原文の記事(英語)

原文の著者:Ashley Kemper

 
ブログホームページ: Shutterstockのブログには、様々なテーマでの画像集や、ビジネスに役立つ情報が満載です。

Shutterstock Editor: Eメールやソーシャル・メディアのキャンペーンなどに画像をお考えの場合、とても簡単に目的に合ったデザインが作成できる Shutterstock Editor をぜひご利用ください。

定額利用: Shutterstockの画像がお気に召した方は、ご利用形態に合った定額料金をこちらよりお選びください。