PhotoShop CCで動画ファイルからgifを作る

Created Date: 2017-03-16/ updated date: 2017-03-16
    • Medium timeline
    Owner & Collaborators
    License
    By
    Summary
    PhotoShopCCを使って動画ファイルからgifを作成します。

    Materials

      Tools

        Blueprints

          Making

          • PhotoShopCCで動画を読み込む

            0
            Thumb asanoqm
            上部のメニューから「ファイル」を選び、
            「読み込み」⇒「ビデオフレームからレイヤー」から任意の動画を選択してください。
            Small      2
            • 読み込みの設定

              0
              Thumb asanoqm
              読み込む範囲を以下のように設定することができます。

              〇最初から最後まで
              〇選択した範囲のみ
               プレビュー下のアイコンで範囲を指定します
              〇速度制限
               フレームの数を間引くことができます。
               容量が大きくなってしまうときなどに利用しましょう。
              〇フレームアニメーションを作成
               チェックを入れておきましょう。
              Small option
          • 「タイムライン」と「レイヤー」

            0
            Thumb asanoqm
            読み込みが終わるとPhotoShopの作業画面に移ります。

            上部メニュー「ウィンドウ」から、
            「タイムライン」と「レイヤー」を表示しておきましょう。

            「タイムライン」には動画が刻まれた「フレーム」が並べられており、「フレーム」ごとに異なるレイヤーが表示され割り当てられています。
            Small      1
            • 「タイムライン」のオプション

              0
              Thumb asanoqm
              「タイムライン」にならんだ「フレーム」です。

              表示されている秒数を変更すればフレーム遷移のスピードが変わります。再生ボタンをクリックすればgifのプレビューが確認できます。
              Small timeline
            • 「フレーム」と「レイヤー」の関係

              0
              Thumb asanoqm
              初期設定では、
              「フレーム1」では「レイヤー1」のみ表示、
              「フレーム2」では「レイヤー2」のみ表示、、
              という状態になっています。

              該当する画像を編集すれば、「フレーム」も変化します。

              Small layer
          • gifを書き出す

            0
            Thumb asanoqm
            「フレーム」などの編集が終わったら、
            gifとしてまとめて書き出します。

            上部メニューから「ファイル」を選び、
            「書き出し」⇒「Web用に保存(従来)」を選択します。
            Small      1
            • 書き出しのオプション

              0
              Thumb asanoqm
              書き出しの設定画面で「GIF」を選びましょう。

              色数や画面サイズなどのオプションが設定できるので、
              用途に応じて調整してから保存してください。
              Small webyouni
          • 完成!

            0
            Thumb asanoqm
            あっという間に無駄なgifが完成しました。

            容量が大きくなりがちなので、
            〇フレームを間引く
            〇画像サイズを小さくする
            〇色数を落とす
            などで適宜対応しましょう!
            Small asano
            Add Card Order

            References

              Usages

                Convert State

                 to Annotation.

                Select the numebr of the state to annotate.

                OK
                cancel
                Loading

                facebook

                , data-width="400", data-show-faces="true" data-send="true"
                , data-width="400", data-order-by="reverse_time"