【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

  • 【AI搭載エディタ】Cursorエディタとは?導入・使い方から制作を効率化するプロンプト(指示)を徹底紹介!

    VIEW MORE
  • metaタグの設定方法・種類をわかりやすく解説!【SEO最適化】

    VIEW MORE
  • WordPressサイトがハッキングされないために行うべき対処法・おすすめプラグインの紹介

    VIEW MORE

CONTACT

contact