GIFアニメをつくる(スクリーンショットからつくる) [Photoshop]
PC画面のスクリーンショットでGIFアニメーションをつくりました。
GIFアニメーションはCLIP STUDIO PAINTでもつくれますが
今回はPhotoshopでつくりました。
「PhotoshopCS6」
GIFアニメーションのつくりかたは色々あると思いますが
最近は、こんな感じでつくってます。
全画面のスクリーンショットは
Macだと「shift」+「command」+「3」の 3 つのキーを同時に押します。
作業工程のスクリーンショットをデスクトップに保存します。
デスクトップに保存されたスクリーンショットをフォルダに入れます。
ホルダーの中のスクリーンショットです。
ファイル名が長いですね。( ´•д•`; )
アニメーションにした時、最後のフレームになる画像を01で最初のフレームの画像は09となるように番号を振ります。
Photoshopを開いてメニューバーの「ファイル」>「スクリプト」>「ファイルをレイヤーとして読み込み」を選択します。
画像のクリックで拡大表示できます。
「レイヤーを読み込む」の画面が出たら「使用」はファイルにして「参照」ボタンをクリックします。
先ほど番号を振ったスクリーンショットを全て選択して「開く」をクリックします。
画像のクリックで拡大表示できます。
「レイヤーを読み込む」の画面が出るのでファイルを確認してOKボタンをクリックします。
レイヤーとして読み込まれました。
画像のクリックで拡大表示できます。
画像を切り抜きます。
今回は、Shade3Dの作業画面の透視図を切り抜きました。
この部分をGIFアニメーションにします。
画像のクリックで拡大表示できます。
切り抜き完了。
画像のクリックで拡大表示できます。
メニューバーの「ウインドウ」>「タイムライン」を選択します。
タイムラインの
「フレームアニメーションを作成」をクリックします。
画像のクリックで拡大表示できます。
タイムラインに1フレームだけ表示されてます。
画像のクリックで拡大表示できます。
小さくて分かりにくいですがタイムラインの右端にプルダウンメニューを表示させる箇所があります。
プルダウンメニュー「レイヤーからフレームを作成」を選択します。
画像のクリックで拡大表示できます。
タイムラインにフレームができました。
画像のクリックで拡大表示できます。
これで完成でもいいのですが、エンドレスのGIFアニメーションにしたいので、追加の作業をします。
まず、フレーム2からフレーム8を選択します。
画像のクリックで拡大表示できます。
フレーム2からフレーム8を選択した状態で
プルダウンメニューの「フレームをコピー」を選択します。
画像のクリックで拡大表示できます。
次に、フレーム9を選択した状態でプルダウンメニューの「フレームをペースト」を選択します。
画像のクリックで拡大表示できます。
「ペースト方法」は「選択範囲の後ろにペースト」を選択して「OK」
画像のクリックで拡大表示できます。
次に、フレーム10からフレーム16を選択します。
画像のクリックで拡大表示できます。
フレーム10からフレーム16を選択した状態でプルダウンメニューの「フレームを切り替え」を選択します。
画像のクリックで拡大表示できます。
これでタイムラインの並び順が完成しました。
画像のクリックで拡大表示できます。
タイムラインの再生回数を変更します。
「一度、三回、無限、その他」の4種類あります。
エンドレスにしたいので「無限」を選択します。
画像のクリックで拡大表示できます。
次にフレーム間の秒数を設定します。
これは人それぞれの好みなので自由に設定して良いと思います。
今回は、フレーム1を2秒、その他のフレームは0.5秒にしたいと思います。
まず、プルダウンメニューで「全てのフレームを選択」を選択します。
画像のクリックで拡大表示できます。
各フレームの下に秒数が表示されてます。
全てを選択した状態でどのフレームでも良いので
秒数が表示されてる部分をカーソルで押すとプルダウンメニューが出るので0.5秒を選択します。
全てのフレームが0.5秒に設定されます。
画像のクリックで拡大表示できます。
フレーム1だけ2秒にしました。
画像のクリックで拡大表示できます。
再生して動作確認してみます。
このGIFアニメはQuickTimeの新規画面収録で保存したmovファイルを読み込んでつくりました。
メニューバーの「ファイル」>「WEB用に保存」を選択します。
画像のクリックで拡大表示できます。
WEB用に保存の画面で画像サイズや色数を設定します。
画像のクリックで拡大表示できます。
OKならばGIFで保存して終了です。
ご訪問ありがとうございました。
タグ:Photoshop