PC作業画面のGIFアニメをPhotoshopとQuickTimeで簡単に作る方法

PC作業画面をGIFアニメにする方法

PCでの作業画面を録画してブログやWEBサイトに使いたいことがよくあります。

しかしYOUTUBEにアップロードしてURLを貼り付けるほどでもない。そんな短時間の動画の場合はGIFアニメーションにするのが便利です。

特にWEBや写真のHOWTO系のブログをやっていると5秒くらいのGIFアニメーションは重宝します。 PCでの作業画面を録画してGIFアニメーションにするアプリケーションは多々ありますが、画像サイズやクオリティを細く設定してサーバー負荷軽減するために、私はMacのQuickTimeとPhotoshopを組み合わせて使用しています。 今回はその手順を解説します。

作業画面をQuickTimeで録画する

QuickTimeの録画機能を使う

まず作業画面を開いてQuickTimeを立ち上げます。ここでファイル>新規画面収録を選択します。 収録開始のボタンが表示されますのでクリックします。

そうするとどの範囲を録画するかを選ぶことができます。 好きな画面を1回クリックすると画面全体の録画、録画範囲をドラッグすると指定した範囲を録画刷ることが可能です。

ここで正確にキャプチャする範囲を指定しても良いですが、後々Photoshopで解像度などを変更しますのでそのときにトリミングすることも可能です。

作業画面を録画を開始する

作業のキャプチャを開始する

【収録を開始】をクリックすると録画が開始されます。ここで動画として欲しい作業を行います。

一通りの作業が終わったらCommand+control+escを押して録画を終了させます。 QuickTimeの録画停止ボタンは作業を開始すると消えてしまい探すのが大変です。そうしているうちに録画がどんどん進んでしましますのでショートカットを使用することをおすすめします。

キャプチャした作業動画をPhotoshopで読み込む

Photoshopで動画を読み込みGIFアニメにする

QuickTimeで録画した作業画面はmov型式です。ブログやWEBサイトに使用するには容量が大きすぎますので、作業が分かるギリギリまで軽量なGIFに変換します。

まずはPhotoshopを立ち上げて、読み込み>ビデオフレームからレイヤーを選択し、movファイルを読み込みます。

movファイルをgifアニメに変換する

キャプチャ時点で17秒で6.7MB。流石にこれをレンタルサーバーにアップロードして使うとサーバー負荷が大きすぎます。

Photoshopで500kB以下を目安にGIFアニメーションに変換します。

動画の読み込む範囲とフレームを調整する

Photoshopで動画の読み込む範囲を決める

QuickTimeで録画した動画ファイルのどこからどこまでをPhotoshopで読み込むかを調整できるので不要な部分はカットできます。

作業画面をキャプチャする際、開始と終了で焦る必要はありません。

読み込むフレーム数を少なくする

読み込む範囲が決まったら次は読み込むフレームの間隔を設定します。デフォルト設定だと滑らかな動画になるように大量のフレームを使用するので容量が大きくなりすぎます。

あくまで作業の解説画面なのでカクカクなもので大丈夫です。作業の説明が分かる範囲内で最軽量を目指すとサーバー負荷が軽くなります。

私はフレーム制限を20にして読み込ませています。この数値が少ないほどなめらかな動画になります。

Photoshopでフレームレートと解像度を調整する

すべてのフレームを選択する

動画をPhotoshopで飲み込んだら、ウィンドウ>タイムラインを選択して動画を編集できるようにします。

タイムラインに読み込んだフレームが表示されます。 読み込んだ段階だと1枚の画像の表示間隔が0.02秒です。速すぎて作業画面の説明には不向きなのでゆっくりしたものに編集します。

レイヤーの表示間隔を調整する

表示の間隔を調整する

アプリケーションの説明動画として使用するために0.02秒の間隔を0.5秒に修正してみます。

タイムラインのタブを開き【すべてのフレームを選択】をクリックします。こうすることで表示されているすべてのフレームの表示間隔を一括で編集できます。 好きなレイヤーの表示間隔を0.5に変更すると他のレイヤーもすべて同じ数値になります。 アニメーションの再生ボタンを推して速度の確認をしながら丁度いいスピードになるまで調整します。

トリミングして画像サイズを調整する

JPEGなどをの解像度を変更するのとまったく同じ手順で動画のトリミングやサイズ変更できます。トリミングが終了したらcommand+shift+Iでブログに合わせた解像度にします。 GIFアニメーションで基本的な容量はJPEGに比べて大きいため、閲覧に支障が出ない範囲で小さくすることをおすすめします。

ループ回数と色数を決めて書き出す

GIFアニメの書き出し設定

最後にWEB用に保存(comment+shift+alt+S)でGIF画像を書き出します。

【ループオプション】で何回動画をリピートさせるかの設定を行えます。 ブログ内に入れるGIFアニメであればユーザーがいつその画像にたどり着くのかがわからないため基本は無限でよいでしょう。 書き出す直前に色数を指定してファイルサイズを軽くします。私は色数が多いものは128色にすることでかなりの軽量化になります。

ブログで使えるGIFアニメーションの完成

画像を一括変換

これがMacのQuickTimeとPhotoshopを組み合わせて作ったGIFアニメーションです。

作業画面に合わせてクオリティを自由にコントロールできるのが強みです。 アプリケーション操作など静止画では伝わりにくい、けれども動画にとってYouTubeにアップロードするまでもない。そんな使用用途に最適です。GIFアニメーションはHOW TO系のブログとの相性がよいと思います。 Camera RAWなどちょっとしたレタッチ作業もできるし、動画変換もできるPhotoshop。ブログのクオリティにを上げるには便利なツールになってきました。

 

コメントを残す

メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

スポンサーリンク

0
0
0
0
0
0
PC作業画面をGIFアニメにする方法

この記事が役に立ったらいいねをしよう!

Facebookで最新情報をお届けします。

関連記事

同じカテゴリーで読まれている記事