今回は Photoshop を使って複数の写真からコマ送り動画を作成する方法を図解します。最終的にアニメーション Gif として保存します。

Photoshop を使ってコマ送り動画を作成する アニメーションGif

1.複数の写真から動画を作成する

下記のような連続する複数の写真を用意します。

1)Photoshop でレイヤーとして複数の写真を読み込む

Photoshop でレイヤーとして複数の画像ファイルを読み込むには、「ファイル」メニューの、

「スクリプト」>「ファイルをレイヤーとして読み込み」をクリックします。
「参照」をクリックします。
動画としたい複数のファイルを選択します。
選択したファイルが表示されるので「OK」をクリックします。
複数のレイヤーとして写真が読み込まれます。

2)タイムラインを表示する

コマ送り動画を作成するにはタイムラインのパネルを表示します。

「ウィンドウ」>「タイムライン」をクリックします。
タイムラインのパネルが表示されます。

3)フレームアニメーションを作成する

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

4)アニメーションのコマ時間(フレームディレイ)を設定する

アニメーションのコマ時間(フレームディレイ)を設定するには、

「0秒」をクリックします。
複数の値から選択できます。あるいは「その他」をクリックすることで任意の値に設定できます。

5)アニメーションのフレームを複製する

タイムラインのパネルの下記のアイコン、

「フレームを複製」をクリックします。

今回は5枚の写真を用意したので、5回クリックして、

5枚のタイムラインを作成します。

6)各フレームの写真を設定する

各フレームをクリックして、そのフレームで表示させるレイヤーを変更します。

一つ目のフレームをクリックして選択し、表示させるレイヤーを選びます。(この後の作業を考えると1番下が良いでしょう)
二つ目のフレームをクリックして選択し、表示させるレイヤーを選びます。

この繰り返しで、五つ目のフレームまで設定します。

ちなみに「フレーム1を反映」にチェックが入っていると、フレーム1に行ったレイヤー設定が反映されます。
あるいは「フレームアニメーションを作成」を実施した後で、タイムラインのメニューを表示し「レイヤーからフレームを作成」をクリックすることで、一度にフレームを作成することもできます。

7)再生して動きを確認する

アニメーションの動きを確認するにはタイムラインの、

「再生」アイコンをクリックします。

8)トゥイーンを使ってコマ間のつながりを滑らかにする

5個の写真をつなげただけではカタカタしたアニメーションとなるので、トゥイーン機能を使ってコマ間のつながりを滑らかにします。

まず、5フレーム目から、4フレーム目へのつながりを滑らかにします。

(1) 5フレームを選択し、レイヤー表示に前のフレームのレイヤーも含める
タイムラインで第5フレームを選択し、
レイヤーで前のフレームで表示させているレイヤーも裏側で表示させるように選択します。
(2) 第5フレームが選択されている状態でタイムラインのトゥイーンをクリックする
タイムラインの「トゥイーン」のアイコンをクリックします。
(3) トゥイーンの条件を設定する

トゥイーン条件の設定パネルが表示されるので、

今回は、「前のフレーム」との間で、「1」フレームを「すべてのレイヤー」で「不透明度」をパラメータとして設定します。
(4) 1コマが前のコマとの間に不透明度の点で補間処理されて作成される

同様の操作を全フレームで繰り返します。それぞれのフレームで同様に、一つ前のフレームで表示させているレイヤーを含めて保管処理をさせます。

9)アニメーション Gif として保存する

作成した画像をアニメーションGifとして保存するには、

「ファイル」メニューの「書き出し」をクリックし「Web用に保存」をクリックします。
プリセットで「Gif 128 ディザ」を選び、画像サイズ背設定して「保存」をクリックします。

 

下記のように Gif ファイルとして保存されます。

ワードプレス(WordPress)の写真関連情報 画像表示情報

ワードプレスで写真サイトを構築する際に役に立ちそうな設定や情報をまとめています。こちらはワードプレスの写真設定や画像表示に関連する情報の目次ページとしています。なるべく図を用いて簡単に解説するようにしようと思っています。参考にどうぞ。

Photo Gallery by 10Web レスポンシブギャラリー設定

WordPress(ワードプレス)の標準機能にもギャラリーの作成機能はありますが、プラグインを追加することで、より見栄えの良いギャラリーサイトを作成することができます。今回はプラグイン「...

ワードプレスの素敵なギャラリー Unite Gallery にできること

今回はWordpress(ワードプレス)のギャラリープラグイン「Unite Gallery」について図解説したいと思います。Unite Gallery には無料の「Unite Galley...

ワードプレスで WebP を簡単に作成する方法 EWWW Image

WordPress(ワードプレス)初心者向けに、今回はワードプレスで次世代フォーマットでの画像配信を簡単に行う方法、「EWWW Image...

簡単綺麗な写真ギャラリー Envira Photo Gallery 2019 ワードプレス

WordPress(ワードプレス)で写真を綺麗に魅せるサイトを作るには、ギャラリープラグインを使うのも有効です。今回は、数あるギャラリープラグインの中から「Gallery Plugin for...

Pin It on Pinterest