Photoshopを使ってGIFアニメーションバナーを作る方法

By YDO, 2015年1月16日


今回は、最近また注目され直している「GIF」バナーをPhotoshopで簡単に作れるチュートリアルをご紹介したいと思います。

「GIF」バナーというとどうも如何わしいとか嘘っぽいイメージがあるのではないかと思いますが、これは安易に作られたものが横行してしまったためのイメージであって、本来であれば高クリック率を期待できる素晴らしい拡張子だと思います。ウェブ画面を見ていて”動いているバナー”に目がいくのはある意味本能的な部分でもあるのでこの時点でアイキャッチとしては成り立っているという事になりますよね♪

 

それでは今回の制作物がこちら↓

GIFバナーサンプル 300×250

 

 

 

 

 

 

 

特に内容にはこだわっていないのですが(笑)、一眼レフで写真を撮っているようなイメージなんですが(・∀・)300×250pixelのサイズにしています。

早速作ってみましょう。。。

まず、Photoshopでこのバナーに使う素材を作ります。今回はこちらの6点を先に作りました。

GIF仕様素材

 

 

 

 

 

 

そして、まずは静止画バナーを作るように各レイヤーに分けてバナーを作ります。
例画像

ちょっと「パシャ!」の効果音だけ映っていませんがあしかず…。

 

 

 

 

この状態ができあがりましたら、メニューバーより「ウィンドウ→タイムライン」を選択します。

タイムライン選択

 

 

 

 

 

 

 

 

そうすると、画面の下の方にタイムラインパネルが表示されます。

フレームアニメドロップ設定

 

 

ここで「フレームアニメーションを作成」を選びます。

まず一枚のパネルが表示されるので、コマの数だけ複製します。

タイムライン表示

 

 

 

 

いつもPhotoshopを使っている人であればこのあたりでだいたい作業の想像はついてくるかもしれないですね♪

複製したものを一枚目から順に「レイヤーの非表示」を使ってコマ割りします。

表示時間を一枚ずつ設定できるのでお好みで設定して下さい。あと、繰り返し表示の設定もここでできます。

ずっと繰り返す場合は、「無限」を選択しておきます。

途中でプレビューを確認したい場合は画面下部にある再生ボタンを押すと確認できます。

web用に保存画面

 

 

 

 

 

 

 

最後に「web用に保存」を選択して保存形式を「GIF」にして完了です♪

 

最近は、6秒動画やストップモーションムービーなどの作品が見直されてきていますのでみなさんもぜひ一度挑戦して見て下さい♪面倒な時はお問い合わせよりご連絡下さい(^^♪

 

 

 

 

この記事を書いた人

YDO
YDOグラフィックデザイナー
2013年山﨑デザイン事務所を開業。仕事場に入る時はだいたい自家製珈琲とミネラルウォーターを持参します。Adobe Photoshop、Illustrator、AfterEffectsなどのグラフィックソフトを中心に商用デザインを制作しています。最近はイラスト制作の時間が増えています。
【趣味】アウトドア、DIY、園芸、掃除、三児の父親

スポンサーリンク

スポンサーリンク

follow us in feedly