GIFアニメーション

お役立ち情報

2025.04.17

簡単すぎる!PhotoshopでつくるGIFアニメーション

2018年6月11日 2025.4.17

最近ネット上でよく見かけるGIFアニメーション。GIFアニメーションとは静止画をパラパラ漫画のようにつなぎ合わせて、ひとつの動画のようにコマ送りで表示する画像ファイルです。

やってみたいけど何枚も画像を作らないといけないなんてめんどくさい・・・そう思っている方も多いのではないでしょうか。

ところがPhotoshopのある機能で、それはそれはすぐにGIFアニメーションが作れてしまうんです!さっそく作り方をご紹介していきましょう。

オブジェクトが移動するアニメーション(イラスト編)

①まずは背景画像と移動させたい画像の2点を用意します。動かしたい画像は、ベクターデータやpngデータなど背景のない状態のデータを使いましょう。

GIFアニメーション

【使用した背景素材】https://www.ac-illust.com/main/detail.php?id=813688
【使用した飛行機素材】https://www.ac-illust.com/main/detail.php?id=617509
※練習用にぜひダウンロードしてみてください。

②Photoshopを開き、背景画像と動かしたい画像を下記のようにレイヤーを分けて配置します。

GIFアニメーション

③次に「ウィンドウ」→「タイムライン」でタイムライン機能を表示させ、下部に表示された「フレームアニメーションを作成」をクリックします。

GIFアニメーション

④すると勝手に1フレーム目が作成されますので、秒数を0.1秒に変更し、飛行機の位置を始点にしたい場所に移動させます。

GIFアニメーション

⑤次に2フレーム目を作成する為に、1フレーム目を選択したまま「選択をしたフレームを複製する」をクリックします。その後、飛行機を終点にしたい位置に移動させます。飛行機の動きをスムーズに見せたいので、飛行機が画面から飛び出した状態まで移動させました。

GIFアニメーション

⑥さらに始点と終点の間の中間フレームを作成する為に、「トゥイーン」をクリックします。追加したい数のフレーム数を入力します。今回は20フレームを追加しました。

GIFアニメーション

⑦すると、中間地点の飛行機の位置が自動で20フレーム分作成されます。最後に、ループオプションを「無限」に変更し、GIFで書き出せば完了です!めちゃくちゃ簡単です♪

GIFアニメーション

せっかくなので文字を乗せて、動くバナーを作ってみました!飛行機が動くことで、見る人にインパクトを与えることができます。GIFアニメは静止画よりも注目を引きやすく、マーケティングにも効果があると言われていますので、ぜひこのような活用もしてみてくださいね!

GIFアニメーション

オブジェクトが移動するアニメーション(写真編)

つぎに写真素材でもGIFアニメを作ってみました。写真ACにはPSD素材がありますが、PSD素材ならすでにレイヤーが分かれている状態なので、画像をいくつも用意したり、切り抜きしなくてもパパっとGIFアニメが作れてしまいます。先ほどとまったく同じ方法ではありますが少しだけ応用し、下記の画像の気球と花びら両方を動かしてみたいと思います!

GIFアニメーション
【使用した写真素材】https://www.photo-ac.com/main/detail/1562908

①PSD素材を開くと、下記のようにすでにレイヤーが分かれています。今回動かしたいレイヤーは「ballon」「flower」になります。タイムラインで1フレーム目を表示させたら、「ballon」「flower」のレイヤーをそれぞれ、始点にしたい位置に移動させます。動かすレイヤーを2つに増やしただけで、先ほどと全く同じ方法です。滑らかな動きにする為に花びらも気球も画面から飛び出す位置まで移動させました。

GIFアニメーション

②2フレーム目を表示させたら、「ballon」「flower」のレイヤーをそれぞれ、終点にしたい位置に移動させます。こちらも始点と同じく画面からはみ出す位置まで移動させました。

GIFアニメーション

③先ほどと同じく、「トゥイーン」をクリックして20フレーム追加します。

GIFアニメーション

④最後にGIFファイルに書き出して・・・完成!いかがでしょうか?花びらとバルーンが同時に動くことにより、奥行も出てより動きのあるロマンチックなアニメーションになったのではないでしょうか。秒数やコマ数を変更することで、また違った印象の画像を作成できますので、みなさん色々試してみてくださいね!

GIFアニメーション

いかがでしたか?どのようなアニメーションにするかイメージを決めて材料さえ用意すれば、3分くらいで出来てしまいます。また、応用すればアイデア次第でいろんなアニメーションが作れますよ。

GIFアニメはWebコンテンツやWeb広告等で使用すると、ユーザーの心理を動かすのにとても効果的だと言われています。ぜひチャレンジしてみてくださいね。

 

この記事の内容は掲載された時点での情報です。最新の情報とは異なるおそれがあります。

親子シルエット「親子」無料シルエット素材10選(商用利用可)前のページ

「日本の夏」をテーマにした無料写真素材10選(商用利用可)次のページ蚊取り線香

ピックアップ記事

  1. 【写真AC】<無料>日本人女性ポートレートおすすめ33選

関連記事

  1. お役立ち情報

    ワードが苦手でも「おたより」を可愛く作る方法【テンプレートで簡単に作成してみよう】

    この記事が参考になる人 可愛いおたよりを作りたい ワードを…

  2. 写真AC

    【写真AC】どんな場合に必要?プロパティリリースについて詳しく解説!

    施設や建物の写真をアップロードして、著作権に引っかからないか不安に感じ…

  3. 企画書素材

    イラストAC

    イラストや写真を使って、企画書・プレゼン資料をイメージ豊かに作ろう

    どんな職場でも職種でも、会議資料や企画書・報告書・プレゼン資…

  4. 春パターン素材

    イラストAC

    「春」をテーマにしたパターン素材10選(商用利用可)

    今回は、これからの季節にぴったりな春らしい優しいカラーのパターン素材を…

  5. クリスマスカード

    イラストAC

    「クリスマスカード」無料素材10選(商用利用可)

    今年のクリスマスはプレゼントに添えて、素敵なオリジナルカードを贈りませ…

  6. Mr.ビーのFreebieACメルマガ講座

    ダウンロードユーザー向け

    Mr.ビーのFreebieACメルマガ講座

    こんにちは、くまのMr.ビーです!今日は大人気のFreeb…

Language

最近の記事

ARCHIVES

  1. 死神イラスト

    イラストAC

    「ホラー」をテーマにした無料イラスト素材10選(商用利用可)
  2. イラストAC

    「アイソメトリックイラスト」の無料素材10選!(商用利用可)
  3. ダウンロードユーザー向け

    【写真AC】花粉症おすすめ写真素材30選
  4. 長靴

    ダウンロードユーザー向け

    「雨の風景」をテーマにした無料写真素材10選(商用利用可)
  5. 無料写真素材をダウンロードしてみよう!

    ダウンロードユーザー向け

    動画で解説。無料写真素材をダウンロードしてみよう!【初級編】登録からダウンロード…
PAGE TOP