blog

BLOGブログ

ARCHIVES

かなぴょん

簡単!PhotoshopでアニメーションGIFをつくろう!バナーをピカピカさせるあれです

 

 

1010-1

 

こんにちは 中西です

 

今日は久しぶりに 制作スタッフぽいブログ書いてみたいと思います。

アニメーションGIFをPhotoshopだけで作る方法です。

 

 

私が使用しているのはCS6のPhotoshopです。

バージョンによってなかったり、呼び方が違ったりするかもしれませんが

そこはご了承くださいませ!

 

 

それではいざ!

 

 

 

デザインと動きを最初に決めよう

 

1010-b1

 

今回は、上記のような文字と背景が同時に点滅するバナーを作りたいと思います。

このくらいの動きなら、同じサイズで2枚作って

アニメーションGIfを作れるサイトのツールを使ってもいいのですが

 

私はこの、一旦 画像を2回保存する という工程がめんどくさいと感じてしまうので

Photoshopで作る方が簡単だと思っちゃいます。

 

 

 

最初にパーツを全部作っちゃおう

 

とりあえず、特設セール会場はコチラ というテキストと、背景2こずついるなというのがわかります。

 

点滅した時に文字がずれたりするといやなので

色を変えたりするだけの場合は コピーしちゃいましょう!

1010-2

 

この Ctrl+J はどのレイヤーでも複製できるので

非常によく使うショートカットキーです。

 

覚えておいて損はないですよッ

 

コピーしたら、好きな色に変えましょう。

 

すると レイヤーパネルがこんな感じになります。

1010-3

下の2つが 1コマ目用(背景赤の文字白抜き)

上の2つが 2コマ目用(背景黄の文字赤)になっています。

 

 

タイムラインパネルを表示させよう

1010-4

もう動きを付ける作業に入りたいと思います!

上記の要領でタイムラインパネルを出しちゃってください。

 

 

一コマ目を作ろう

1010-5

タイムラインパネルを選択し フレームアニメーションを作成 を押すと 一コマ目が表示されます。
一コマ目が作成されたら 表示されるレイヤーが上のレイヤーパネルで確認できますので

最初に見せたいもの以外は隠してしまいます。

 

 

2コマ目を作ろう

1010-6

パネルのごみ箱マークの横にある 複製ボタンでコマを増やしましょう!

 

2のコマにカーソルがあっているのを確認した状態で

上のレイヤーパネルを操作して、2コマ目用のレイヤーだけ表示させます。

 

タイムラインパネルでも 状態が見えます。

 

 

表示速度を調整しよう

1010-7

一コマずつどのくらいの時間表示させるか決められます。

今回は0.5秒ずつ表示させるように設定しました。

その他…から任意の表示時間も設定できます。

 

 

再生回数を設定しよう

1010-8

コマの下に再生回数を設定できる部分があります。

ずーっと ちかちか させ続けたい場合は無限にするとループします。

お察しの通り、 その他… で任意の回数も設定できます。

 

 

プレビューで確認しよう

1010-9

私はこれがあるのでPhotoshopでやる方が便利だなーと思ってしまいます。

速さも回数も確認できますし、重ねた時のずれなども保存する前に確認できます。

 

 

GIF形式で保存しよう

1010-10

ファイル>web用に保存 !

その際保存形式をGIFにするのをお忘れなく!

さらに、この段階でもGIF形式を選択したら再生ボタンが出てきて動きの確認ができます!

 

 

まとめ

 

1010-b1

 

これにセール会場をリンクさせておけば、目立つこと間違いなしですね!

 

ちなみにアイキャッチ画像は21コマ使っています。

 

でもやることは同じで最初に全部のパーツを準備したら

あとは チクチクと表示するレイヤーを変えていきながらコマ数を増やして、

プレビューで確認しながら、文字によって表示速度を変えるというのを繰り返して

理想的な動きになったところで保存しました。

 

手っ取り早く目を引くバナーを作るには動かすのが一番!

あぁっ!時間がないけどバナーがいる!!

という時には 是非お試しください。

 

 

それでは!!

 

 

この人が書いた記事

かなぴょんの記事をもっと見る

関連する記事