GIFアニメーション

お役立ち情報

2022.12.20

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

2018年6月11日 2022.12.20

最近ネット上でよく見かける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

    「アウトドア」をテーマにした無料イラスト素材10選(商用利用可)

    まもなく待ちに待ったゴールデンウイークがやってきます!みなさんどのよう…

  2. イラストAC

    【イラストAC】便利なあしらい「矢印」イラスト素材25選

    デザイン業務を行っていると、「あしらい」のストックを増やしたくなります…

  3. ピアノ

    シルエットAC

    「音楽」をテーマにした無料シルエット素材10選(商用利用可)

    もうすぐ秋がきますね。秋といえば、芸術の秋!そこで今回は、楽器・ミュー…

  4. イラストAC

    【イラストAC】お祝いを華やかに!卒入園・卒入学のイラスト35選<無料>

    春は出会いと別れの季節。卒入園・卒入学を思い浮かべる方も多いでしょ…

  5. お役立ち情報

    お名前シールを簡単に自作したい!デザインツールでオリジナルを作成してみよう

    この記事が参考になる人 お名前シールを自作したい 欲しいデ…

Language

最近の記事

ARCHIVES

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

    新機能「類似イラストを見る」「類似写真を見る」ボタンを紹介!【検索がより便利に】…
  2. デザインAC

    デザインを共有して作業を効率化! デザインAC の「共同編集機能」を紹介
  3. 本のある風景

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

    「本のある風景 」をテーマにした無料写真素材10選(商用利用可)
  4. ダウンロードユーザー向け

    海外の風景写真10選
  5. 写真補正「ACbeautify」

    お知らせ

    無料の画像補正サイト「ACbeautify」公開
PAGE TOP