【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

  • 【jQuery】特定範囲内で表示・スクロール追従するメニュー / サイドバー【レスポンシブ対応】

    VIEW MORE
  • 【WordPress】タイトルにマッチしたタグの記事一覧を表示する方法と注意点

    VIEW MORE
  • コンテンツ内(要素内)でのスクロールを作成・制御する方法【overflowプロパティ】

    VIEW MORE

CONTACT

contact