【かんたん】PhotoshopでGIFアニメーションをつくってみよう

Photoshop

PhotoshopでGIFアニメーションを作る方法を紹介します。

GIFアニメは、みていると表示が変わったり動いたりする画像のことです。

PhotoshopでGIFアニメーションを作る 作例

 

GIFアニメは単体で使うほか、写真やイラストに組み合わせることもできます。

PhotoshopでGIFアニメーション サンプル画像

こうした効果はバナーや広告などでもよく使われていますね。

というわけで今回は、PhotoshopでGIFアニメをつくる方法をお届けします。

簡単にできますので、よかったら参考にしてみてください。

GIFアニメをつくる準備

今回はこんな感じのGIFアニメをつくってみます。

GIFアニメ サンプル

これができれば、複雑に動かす場合もやり方は同じですのでいろいろな応用ができます。

画像の準備とレイヤー分け

GIFアニメーションの構造

今回つくるGIFアニメは、4コマで構成されています。

GIFアニメにするには、各コマのパーツを別々のレイヤーに入れておく必要があります。

この作例では次のようなレイヤー構成になっています。

 

【1コマ目のレイヤー】いちばん小さいまる

1コマ目のレイヤー

 

【2コマ目のレイヤー】小さいまる

2コマ目のレイヤー

 

【3コマ目のレイヤー】大きいまる

3コマ目のレイヤー

 

【4コマ目のレイヤー】

4コマ目のレイヤー

こんな感じで各コマのパーツをレイヤーに分けておくんですね。

レイヤーパレットは次のようになっています。

PhotoshopでGIFアニメーションを作る レイヤー構成

ここまでできたら準備は完了です。さっそくGIFアニメにしていきます。

GIFアニメをつくる手順

1コマ目~2コマ目

1.レイヤーパレットから、各コマのレイヤーを非表示にします。左にある「目のようなマーク」をクリックすると非表示にできます。

すべてのコマを非表示にする

 

どのコマも表示されていない状態になります。

どのコマも表示されていない状態

 

2.レイヤーパレットから、最初のコマに使うレイヤーを「表示」の状態にします。

1コマ目を表示

 

最初のコマが表示されます。

1コマ目が表示された状態

 

3.メニューバーの「ウインドウ」から「タイムライン」をクリックします。

タイムラインを表示

 

4.画面の下部に「タイムライン」というウインドウが開きます。右下にあるタブから「フレームアニメーションを作成」を選択します。

フレームアニメーションを作成

 

すると、左側にフレームが表示されます。これが1コマ目の登録が完了しました。

1コマ目(1フレーム目)ができました

 

5.つづいて、2コマ目をつくります。赤で囲んだアイコンをクリックします。

フレームの複製

 

すると、1コマ目を複製したものができます。

複製したフレームができました

 

6.レイヤーパレットから、2コマ目に使うレイヤーを「表示」の状態にします。

2コマ目を表示

 

2コマ目が表示された状態になりました。

2コマ目が表示された状態

これで2コマ目の登録は完了です。

スポンサーリンク

3コマ目~4コマ目

3コマ目~4コマ目も、先ほどと同じ手順で行っていきます。

 

1.まずは3コマ目をつくります。「タイムライン」の赤で囲んだところをクリックします。

フレームの複製

 

すると、2コマ目が複製されます。

フレームが複製されました 

 

2.レイヤーパレットから、3コマ目のレイヤーを「表示」の状態にします。

3コマ目を表示
 

3コマ目が表示された状態になります。これで3コマ目の登録ができました。

3コマ目が表示されました

 

3.4コマ目も同じ要領でつくっていきます。「タイムライン」の赤で囲んだところをクリックすると

フレームの複製

 

3コマ目を複製したものができます。

フレームが複製できました

 

これで、レイヤーパレットで4コマ目を「表示」にすれば

4コマ目を表示

 

4コマ目の登録が完了します。

4コマ目が表示されました

これでベースの準備ができました。さっそくアニメーションにしていきましょう。

アニメーションにする

表示時間の調整

まずは、各コマの表示を「どれだけの時間で切り替えるか」を設定します。

 

「タイムライン」の各コマ(フレーム)の下をクリックすると、表示時間の設定ができます(クリックする時は、1つずつクリックします)。

フレームの表示時間の設定

 

クリックすると、このように「時間を設定するメニュー」が出ます。

時間を設定するメニュー

ここで任意の時間を選択します。「その他」をクリックすると、好きな時間を設定できます。

 

今回はどのフレームも「1秒」に設定してみました。1秒ごとに表示が切り替わるというわけですね。

プレビューで表示を確認

表示時間の設定ができたら、赤で囲んだ部分を使ってアニメーションの確認をします。

再生ボタンを押すと、アニメーションが再生されます。それをみながら、表示時間を調整していきます。

表示回数の設定

ここまでの設定ができたら、アニメーションを何回表示するかを決めます。

赤で囲んだところをクリックすると

 

アニメーションを何度表示するかの設定ができます。

ループオプションの選択

繰り返し表示する場合は「無限」にしておくと、ずっとリピート(ループ)します。

GIFアニメを保存する

GIFアニメができたら保存をしましょう。

 

1.メニューバーの「ファイル」→「書き出し」から「Web用に保存」を選択します。

GIFアニメを保存する

 

2.保存形式を「GIF」にして保存すれば完了です。

保存形式をGIFにする

 

これでGIFアニメができました。

おしまいに

Photoshopを使うと、このように簡単にGIFアニメを作ることができます。

Photoshop 「はじおつ。」風 GIFアニメ

ちなみに、今回作ったこのGIFアニメ↑は、「はじおつ。」というマンガの表紙がかわいかったので、それっぽくつくってみました。

 

GIFアニメが使えるといろいろと遊べるかと思います。今回はイラストで作ってみましたが、写真でも同じようにできますよ。よかったら参考にしてみてくださいね。