2026.02.07 学習記録 ～GIFアニメーション～

本日の実習作品

PhotoshopでGIFアニメーションを作成を行った。

ブラシツールで「ボールのような生き物」の絵を描いて、GIFアニメーションで動いて見えるように作成した。

胴体、塗り、右目、左目でパーツごとにレイヤーを分け、そこからアニメーション1コマ分ごとに1グループにまとめた。

1コマ作るごとにグループを複製して、複製したグループのレイヤーを移動させたり変形させたりした。

塗りは投げ縄ツールで選択範囲を作り、選択範囲を塗りつぶしした。

PhotoshopでGIFアニメーション作成手順

1. Photoshopを開き、上部のメニューバー「ウィンドウ」から「タイムライン」をクリック
2. 「ファイル」→「スクリプト」→ファイルをレイヤーとして読み込み
3. GIFの素材をまとめて取り込む
4. タイムラインパネル→フレームアニメーションを作成
5. 「タイムラインパネル」のハンバーガーメニューから「レイヤーからフレームを作成」
6. 確認や編集が完了したら、「Web用に保存（従来）」からGIFファイルで保存する

• フレームの再生時間を変えたいとき等、フレームをShiftキーで一括選択するとまとめて変更できる。
• フレームを入れ替えで再生順を逆転できる。
• フレームを作成したら、各フレームを選択して「表示したいレイヤー」以外は目隠しマークで見えないようにすること！

備考・メモ

GIFアニメーション（GIF animation）
…Graphics Interchange Format (GIF) の「マルチイメージ」を使ったアニメーション。アニメーションGIF (animated GIF) ともいう。

ワードプレスにアップする際、GIFは画像サイズを「フルサイズ」に設定しないと静止画になってしまう！

その他資料・リンク

• GIFアニメーション
• PhotoshopでアニメーションGIFを作成する方法
• 【動画】GIFアニメーションを作成してみよう（Photoshop …