creatersnest2

Photoshopで出来る簡単GIFアニメーション作成方法


アニメーションに興味はあるけれど、なんだか難しそうで…という方は少なくないのではないでしょうか。
実は、Photoshopで簡単にGIFアニメーションを作ることができます。
基本をご紹介しますので、みなさんも挑戦してみてください。

アニメーションの準備

新規ファイルを作成し、上部にあるメニューから「ウインドウ」をクリックします。
クリックしたら、一覧が表示されますので、その中の「タイムライン」を選択します。

「タイムライン」を選択

 

次に、タイムラインパネルの箇所の「ビデオタイムラインを作成」を変更するために、右にある三角マークを
クリックします。
「フレームアニメーションを作成」を選択し、文字をクリックします。

「フレームアニメーションを作成」を選択

 

以下の画像のようになっていれば、準備はこれで終わりです。
実際にGIFアニメーションを作成していきましょう。

準備完了

アニメーションをさせてみよう(基本編)

どういうアニメーションをさせたいのか考えながら、作ってみましょう。
基本編では、吹き出しが出てくるアニメーションを作ります。

アニメーションさせる画像を用意

アニメーションさせる画像を用意します。
例として、女性の写真に吹き出しとハートを付けてみました。
この時、バラバラにアニメーションをしたい場合は、必ずレイヤー毎に分けておくことがポイントです。

アニメーションさせる画像

 

タイムラインの最初のフレームを作成する

最初のフレームでは、背景しか見えていない状態にしたいため、星のレイヤーを全て「非表示」にします。

背景のみ

 

タイムラインのフレームを複製する

タイムラインにフレームが1つしかありませんので、複製します。
パネル下部にあるメニューから「選択したフレームを複製する」を選択します。
フレームが増えたことが確認できれば、問題ありません。

フレームを複製

 

吹き出しを表示させる

2のフレームを選択したまま、レイヤーパネルより、吹き出しのレイヤーを表示させます。
吹き出しが、だんだん大きくなるアニメーションをしたいので、縮小した吹き出しと、元の大きさの吹き出しを用意します。

吹き出しを表示

 

複製したレイヤーを「非表示」にし、2のフレームを選択した状態で、吹き出しのレイヤーを選択します。
吹き出しのサイズを、形が少しわかる程度まで縮小します。
この時、吹き出しの下を揃えることがポイントです。

吹き出しのサイズ変更

 

次に、フレームを複製し、3のフレームを作ります。
先程縮小したレイヤーを複製し、レイヤーを「非表示」にします。
3のフレームを選択した状態で、縮小したレイヤーのコピーのレイヤーを選択します。
縮小されたサイズから、少しだけ大きくサイズを調整してください。

3のフレームを作成

 

この作業を5回ほど繰り返すと、パラパラ漫画のように、少しずつ吹き出しが大きくなるフレームが出来上がります。
最後は、最初に作っていたサイズで終わります。

吹き出しにアニメーション

 

文字を表示させる

吹き出しと同様に、タイムラインのフレームを複製します。
複製されてできた9のフレームを選択した状態で、レイヤーパネルより、文字のレイヤーを表示させます。
この時、9のフレームに文字が表示されたことを確認してください。

文字を表示

 

ハートを表示させる

吹き出し、文字と同様に、タイムラインのフレームを複製します。
複製されてできた10のフレームを選択した状態で、レイヤーパネルより、ハートのレイヤーを表示させます。
他のレイヤーと同様に、10のフレームにハートが表示されたことを確認してください。

ハートを表示

 

最後のハートも同様にフレームを複製します。

ハートを表示

 

表示させる秒数を変更する

表示させる秒数を変更させることができます。
各フレーム毎の秒数の右に三角がありますので、クリックしお好きな時間に調整してください。

秒数を変更

 

繰り返しの設定をする

ループを設定する場合は、赤い矢印の箇所を設定します。

繰り返しの設定

 

完成

保存して完成です。

完成

 

アニメーションをさせてみよう(フェードインフェードアウト編)

フラッシュなどでもよく使用されている、フェードインフェードアウトをGIFアニメーションで表現してみましょう。
ちょっとした動きでもプロのような仕上がりになります。

フェードインフェードアウトさせたいレイヤーを準備

今回は例として、文字をフェードインフェードアウトしてみようと思います。
文字ツールを使用して、Photoshopと書いてみました。

フェードインフェードアウトのサンプル文字

 

タイムラインのフレームを複製する

タイムラインにフレームが1つしかありませんので、複製します。
この時、Photoshopと書いたレイヤーは、レイヤーパネルより「非表示」にしておくことがポイントです。

パネル下部にあるメニューから「選択したフレームを複製する」を選択します。
フレームが増えたことが確認できれば、問題ありません。

フレームを複製

 

フェードイン前後のフレームを作成する

タイムラインパネルの2のフレームを選択し、非表示にしていたPhotoshopと書いたレイヤーを表示させます。
1のフレームがフェード前の画像で、2のフレームがフェード後の画像です。

animation09

 

フェードインをさせる

2のフレームを選択した状態で、メニューより「アニメーションフレームをトゥイーン」をクリックします。
以下のようなトゥイーンパネルが出てくるので、設定をします。
追加するフレームの数を大きくすると、細かく動きを付けることが可能です。

アニメーションフレームをトゥイーン

 

フェードインを確認する

フレームが増えて準備は整いましたので、実際の動きを見てみましょう。
メニューの「アニメーションを再生」をクリックすると、アニメーションが動くことを確認できます。
この時に、動きが早い、または遅いことがあり調整したい場合は、秒数の右の三角を押して調整しましょう。

アニメーションを再生

 

フェードアウト前後のフレームを作成する

フェードアウトはフェードインと逆のフレームを作るだけなので、とても簡単です。
まずは、5のフレームを選択した状態で、「選択したフレームを複製する」を2回クリックします。
すると、6のフレームと7のフレームが出来上がりました。

フェードアウトのフレームを作る

 

フェードアウトさせる

7のフレームを選択した状態で、レイヤーパネルよりPhotoshopと書いたレイヤーを「非表示」にします。
次に、メニューより「アニメーションフレームをトゥイーン」をクリックし、設定します。

フェードアウト

お好みのアニメーションの動きに設定

秒数などを整えます。
ループを設定する場合は、赤い矢印の箇所を設定します。

繰り返しの設定

 

完成

保存して完成です。

完成

GIFアニメーションを保存する

Photoshop上部のメニューの「ファイル」をクリックし、「Web用に保存」を選択します。

Web用に保存

 

保存形式がGIFになっていることを確認し、保存します。

保存

 

これでGIFアニメーションが保存できました。

animation00

GIFアニメーションの使い道

フラッシュが見られない端末の登場

フラッシュが見られない端末(iPhoneやiPad)の登場で、フラッシュの代用としてGIFアニメーションを見かけるようになりました。
レスポンシブデザインを取り入れているサイトなどは、特に使用しているところが多いと思います。

動きがあるだけで目線が集中

今までフラッシュで制作するのも細かくて面倒だった、小さい画像のアニメーションも可能になりました。
動きがあると自然と目線が移動するので、目立たせたいバナーなどに活用されています。
最近は、フッター箇所の上に人や動物が歩いていたりしますね。

まとめ

GIFアニメーションについてご紹介しましたが、いかがだったでしょうか。
今までアニメーションを難しいと感じていた人も、作りやすいものがGIFアニメーションだと思っています。

見る人に効果的なアニメーションを作りましょう!

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


NESTonlineBlog編集部

NESTonlineBlog編集部です。ご寄稿頂いた記事などを公開していきます。

Next Article写真が動く!おしゃれすぎるシネマグラフ30選