今回は 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)の写真関連情報 画像表示情報

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

NextGEN Gallery 設定図解 ワードプレスプラグイン

WordPress(ワードプレス)には標準の状態でもサイトに写真ギャラリー表示する機能はありますが、使い勝手としても、美しさとしても今一歩です。そこで今回は写真ギャラリーを作成するプラグイン「...

画質比較 Compress JPEG & PNG プラグインのインストール

WordPress(ワードプレス)に画像圧縮のためのプラグイン「 Compress JPEG & PNG images...

ImageMagick の設定方法と写真画質比較

さくらのレンタルサーバーを使い WordPress(ワードプレス)のクイックインストールを行うと、標準で ImageMagick Engine...

表示の綺麗な写真ギャラリー 無料プラグイン Top 5 2019 ワードプレス

今回は2019年春現在で、WordPress(ワードプレス)の無料の写真ギャラリープラグインのうちから、表示が綺麗で設定管理の簡単なプラグインを5つご紹介します。全てレスポンシブ対応のギャラリーを作成...

オンラインでWebMに動画変換する方法 Convertioを利用

動画を次世代フォーマットの WebM に変換する方法はいろいろありますが、オンラインファイルコンバーターの「Convertio」を利用することで、オンライン上で簡単に WebM...

Pin It on Pinterest