30日間人気動画が無料!映画やドラマ、人気アイドルやバラエティなど5,000本以上。見放題ch ライト - DMM.com

PhotoshopでGIFアニメーションの作り方

PhotoshopでGIFアニメーションを作ろうPhotoshop
この記事は約4分で読めます。

Adobe Photoshop Tips

PhotoshopでGIFアニメ-ションの簡単な作り方を説明します。

GIFアニメ-ションを作れるとパラパラ漫画を作ったり、リモコンの点滅を表示したりと表現の幅が広がります。

Photoshop GIFアニメーション完成

画面を録画してGIFアニメを作るソフトは下記で紹介しています。

ScreenToGifでGIF画像を録画する
アニメーションGIF画像を簡単に制作するための録画ソフトの紹介。フリーソフト(無料ソフト)です。使い方は直感的にわかるので最初から日本語対応なおかつインストール不要、もちろん気に入ればインストールして利用してください。

Adobe Photoshop の公式ハウツーはこちら

PhotoshopでアニメーションGIFを作成
連続写真を使ってアニメーションGIFを作成します。
アニメーションGIFを作成する
Adobe Photoshopから画像を書き出して、タイムラインとレイヤーを使用してループするアニメーションを作成することで、アニメーションGIFを完成させる方法を説明します。
アニメーション GIF を作成する方法 (Photoshop Elements 14)

レイヤーでアニメーションGIFを作成する

アニメ-ションにする画像をレイヤーとして取り込みます。

Photoshopで複数の写真をレイヤーとして一つのファイルにする方法
Photoshopで複数のファイルを選択してレイヤーとして読み込んで一つのファイルにする方法です。全写真の不要部分をまとめてカットしたり、画像サイズを一括変更したり、全レイヤーに反映するウォーターマークを差し込んだりと作業効率があがります。

4枚のレイヤーを利用したGIFアニメ-ションを作ります。

1枚目レイヤー

Photoshop 1枚目レイヤー

2枚目レイヤー

Photoshop 2枚目レイヤー

3枚目レイヤー

Photoshop 3枚目レイヤー

4枚目レイヤー

背景が透明のテキストレイヤーです。

Photoshop 4枚目レイヤー

 

上メニューの[ウインドウ]内[アニメーション]をクリック。

Photoshop ウインドウ内アニメーション

Photoshop CCの場合

上メニューの[ウインドウ]内[タイムライン]をクリック。

タイムラインパネルが開いたらパネルの中央にある矢印ボタンをクリックして[フレームアニメーションを作成]を選択します。

アニメーションウインドウが開きます。

今回はフレームアニメーションウインドウを使います。

 

フレームアニメーションウインドウ

右下の[タイムラインアニメーションに変換]ボタンで変換できます。

Photoshop フレームアニメーション

タイムラインアニメーションウインドウ

右下の[フレームアニメーションに変換]ボタンで変換できます。

Photoshop タイムラインアニメーション

フレームアニメーションのフレームはレイヤーの表示状態が1コマになります。
Photoshop アニメーションウインドウ

1フレーム

1つめのフレームに1枚目レイヤーをセットします。

レイヤーパネルの1枚目レイヤーの表示状態にします。

Photoshop GIFアニメーション 1フレーム目 

2フレーム

2つめのフレームを作ります。

アニメーションウインドウの[選択したフレームを複製]をクリック。

レイヤーパネルの2枚目レイヤーの表示状態にします。

Photoshop GIFアニメーション 2フレーム目

ここからは必要なフレーム分、2フレームの繰り返しになります。

3フレーム

3つめのフレームを作ります。

アニメーションウインドウの[選択したフレームを複製]をクリック。

レイヤーパネルの3枚目レイヤーの表示状態にします。

Photoshop GIFアニメーション 3フレーム目

4フレーム

4つめのフレームは、複数レイヤーを1フレームに利用して作ります。

フレームには複数レイヤーを使用できます。

例えば1枚目レイヤーとテキストレイヤーをレイヤーの表示にして1フレームにすることができます。

Photoshop GIFアニメーション 4フレーム目

フレームの削除

いらないフレームは選択してゴミ箱に捨てて削除できます。

Photoshop GIFアニメーション フレームの削除

フレームのディレイを設定

フレーム下の[X秒]をクリックすると、選択したフレームの時間を設定することができます。

ディレイなし
0秒
その他
好みに時間を設定できます。

Photoshop GIFアニメーション フレームのディレイを設定

プレビュー

リアルタイムでアニメーションの仕上がりを確認できます。

左から[先頭に戻る][1フレーム戻る][再生(停止)][1フレーム進む]

[再生(停止)]はキーボードのスペースバーでも可能です。
Photoshop GIFアニメーション プレビュー

ループ数を設定

アニメの繰り返し回数を設定します。

  • 一度
  • 無限
  • その他 を選ぶと好みの再生回数を記入できます。

Photoshop GIFアニメーション ループ数を設定

PhotoshopでアニメーションGIFの書き出し設定

上メニュー[ファイル]内[Webおよびデバイス用に保存]をクリック

Photoshop Webおよびデバイス用に保存

プリセットは[GIF 128 ディザ]を選択

写真など劣化を少なくしたい(色数が欲しい)ときはカラーを[256]に設定します。

カラー数を変更するとプリセットが[名前なし]になりますが、先に[GIF 128 ディザ]を選択した時点でカラー以外の設定が完了しているので気にしなくて良いです。

必要があれば[画像サイズ]や[ループオプション]等も設定します。

[保存]をクリックして完了します。

Photoshop GIF 書き出し 設定

Photoshopでgifが保存できない場合は上記設定を再確認してください。

まとめ

PhotoshopでアニメーションGIFを作ってみました。

写真だけでは伝わりにくいけど動画を見せるほどでもないって時に役に立ちます。

リモコンの点滅とか

L336リモコン 学習手順6

PhotoshopCCは少しメニューなどは違いますが、ほとんど同じやり方なので参考にはなると思います。

GIFアニメーションで画像ファイルが大きくなりすぎたら

  • フレームを減らす
  • 色数を少なくする
  • 幅や高さのピクセル数を少なくする

などで調節してください。

コメント

タイトルとURLをコピーしました