SSブログ

GIFアニメをつくる(スクリーンショットからつくる) [Photoshop]

 

キューブベベル.gif

PC画面のスクリーンショットでGIFアニメーションをつくりました。
GIFアニメーションはCLIP STUDIO PAINTでもつくれますが
今回はPhotoshopでつくりました。






「PhotoshopCS6」
GIFアニメーションのつくりかたは色々あると思いますが
最近は、こんな感じでつくってます。


全画面のスクリーンショットは
Macだと「shift」+「command」+「3」の 3 つのキーを同時に押します。



作業工程のスクリーンショットをデスクトップに保存します。
デスクトップに保存されたスクリーンショットをフォルダに入れます。

01_スクリーンショットをフォルダへ.jpg




ホルダーの中のスクリーンショットです。
ファイル名が長いですね。( ´•д•`; )

02_番号付前.jpg

アニメーションにした時、最後のフレームになる画像を01で最初のフレームの画像は09となるように番号を振ります。

03_番号付.jpg





Photoshopを開いてメニューバーの「ファイル」>「スクリプト」>「ファイルをレイヤーとして読み込み」を選択します。

04_ファイルからレイヤ.jpg
画像のクリックで拡大表示できます。







「レイヤーを読み込む」の画面が出たら「使用」はファイルにして「参照」ボタンをクリックします。

05_ファイル参照.jpg




先ほど番号を振ったスクリーンショットを全て選択して「開く」をクリックします。

06-2_ファイル選択.jpg
画像のクリックで拡大表示できます。






「レイヤーを読み込む」の画面が出るのでファイルを確認してOKボタンをクリックします。

06-3_ファイル選択OK.jpg








レイヤーとして読み込まれました。

06-4_レイヤーとして読込.jpg
画像のクリックで拡大表示できます。





画像を切り抜きます。
今回は、Shade3Dの作業画面の透視図を切り抜きました。
この部分をGIFアニメーションにします。

06-4_切り抜き.jpg
画像のクリックで拡大表示できます。




切り抜き完了。

06-5_切り抜き完了.jpg
画像のクリックで拡大表示できます。






メニューバーの「ウインドウ」>「タイムライン」を選択します。

06-5-1_メニューバーのタイムライン.jpg




タイムラインの
「フレームアニメーションを作成」をクリックします。

07_フレーム作成.jpg
画像のクリックで拡大表示できます。






タイムラインに1フレームだけ表示されてます。

07-2_1フレームできた.jpg
画像のクリックで拡大表示できます。

小さくて分かりにくいですがタイムラインの右端にプルダウンメニューを表示させる箇所があります。







プルダウンメニュー「レイヤーからフレームを作成」を選択します。

07-3_レイヤからフレーム.jpg
画像のクリックで拡大表示できます。






タイムラインにフレームができました。

07-4_9フレーム作成.jpg
画像のクリックで拡大表示できます。






これで完成でもいいのですが、エンドレスのGIFアニメーションにしたいので、追加の作業をします。

まず、フレーム2からフレーム8を選択します。

08-1_2から8を選択.jpg
画像のクリックで拡大表示できます。





フレーム2からフレーム8を選択した状態で
プルダウンメニューの「フレームをコピー」を選択します。

08-2_2から8コピー.jpg
画像のクリックで拡大表示できます。





次に、フレーム9を選択した状態でプルダウンメニューの「フレームをペースト」を選択します。

08-3_フレームペースト.jpg
画像のクリックで拡大表示できます。





「ペースト方法」は「選択範囲の後ろにペースト」を選択して「OK」

08-5_フレーム後にペースト.jpg
画像のクリックで拡大表示できます。






次に、フレーム10からフレーム16を選択します。

08-6_ペースト.jpg
画像のクリックで拡大表示できます。






フレーム10からフレーム16を選択した状態でプルダウンメニューの「フレームを切り替え」を選択します。

08-7_フレーム入れ替え.jpg
画像のクリックで拡大表示できます。





これでタイムラインの並び順が完成しました。

08-8_入れ替え完了.jpg
画像のクリックで拡大表示できます。





タイムラインの再生回数を変更します。
「一度、三回、無限、その他」の4種類あります。
エンドレスにしたいので「無限」を選択します。

08-10_無限ループ.jpg
画像のクリックで拡大表示できます。





次にフレーム間の秒数を設定します。
これは人それぞれの好みなので自由に設定して良いと思います。
今回は、フレーム1を2秒、その他のフレームは0.5秒にしたいと思います。

まず、プルダウンメニューで「全てのフレームを選択」を選択します。

09-9_全て選択.jpg
画像のクリックで拡大表示できます。





各フレームの下に秒数が表示されてます。
全てを選択した状態でどのフレームでも良いので
秒数が表示されてる部分をカーソルで押すとプルダウンメニューが出るので0.5秒を選択します。
全てのフレームが0.5秒に設定されます。

09-10_0.5秒.jpg
画像のクリックで拡大表示できます。







フレーム1だけ2秒にしました。

09-11_1フレームを2秒に.jpg
画像のクリックで拡大表示できます。






再生して動作確認してみます。

10-00_動作確認2.gif
このGIFアニメはQuickTimeの新規画面収録で保存したmovファイルを読み込んでつくりました。






メニューバーの「ファイル」>「WEB用に保存」を選択します。

10-1_WEB用に保存.jpg
画像のクリックで拡大表示できます。






WEB用に保存の画面で画像サイズや色数を設定します。

10-2_GIFで保存.jpg
画像のクリックで拡大表示できます。

OKならばGIFで保存して終了です。







ご訪問ありがとうございました。


m_Thank20You_megaoseizin.gif
タグ:Photoshop
nice!(20)  コメント(0)