【Photoshop】GIFアニメーションの作成方法

はじめに

どうも、NNCの石上です。
いつもコーディングの記事が中心なのですが、たまには気分を変えてPhotoshopでも触って見ましょう。GIFアニメーションの作り方を見ていこうと思います。

GIFアニメーション

まず最初にどんなアニメーションを作るのかを確認しましょう。内容は至ってシンプルで、4つの正方形が順番に現れては消えていくものになります。

作成方法

まずはコマ送りにしたい画像をレイヤーごとに分割して作成します。

ここまでできたら、上に並んでいるメニューから「ウィンドウ」を開き、その中にある「タイムライン」という項目を選択しましょう。そうすると、画面下部にタイムラインパネルが展開されると思います。

タイムラインパネルが開きましたら、続けて「フレームアニメーションを作成」というボタンを押しましょう。

画面が切り替わって下のようになったらOKです。

タイムラインパネル右上のボタンから、「レイヤーからフレームを作成」を選びましょう。これによって、レイヤーをフレームに分割することができ、それぞれの表示時間や再生回数を設定することができるようになります。

完成したら、上のメニューから「ファイル」を開き、「書き出し > Web用に保存」を選択しましょう。

以下のような画面が表示されると思います。拡張子を「GIF」に設定し、右下の再生ボタンでアニメーションを確認したら、「保存」ボタンを押してGIFアニメーションを書き出しましょう。

以上で完成です!

こちらの記事はいかがでしたか?
+1
0
+1
0
+1
0
+1
0

【PR】Tech Tech Zoo

【PR】オリジナルキャラクター「てくてくず」を公開しました!

作品は、随時X(旧Twitter)で公開していきます!
ぜひ「てくてくず」の作品を応援していただけたら嬉しいです。

X(旧Twitter)アカウントはこちら:
https://twitter.com/tech_tech_zoo

RECENT ENTRIES

  • 【2025年版】Googleが推奨するSEO最新アップデートと対策

    VIEW MORE
  • カスタム投稿タイプの投稿一覧をカテゴリーごとにタブで切り替える【WP】

    VIEW MORE
  • CSSのline-heightを使って行間を調整しよう!余白の調整方法も解説

    VIEW MORE

CONTACT

contact