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

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

ワードプレス画質比較 ImageMagick と Compress JPEG

WordPress(ワードプレス)の画像圧縮方法の違いによる写真画質の比較を行います。今回はワードプレス標準のGDと、プラグイン「Compress JPEG & PNG...

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

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

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

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

サイトの高速化 写真のWebP化の方法 Photoshop利用

サイトの高速化の方法のひとつに、表示させる写真や画像に次世代フォーマットを利用するというものがあります。次世代フォーマットにはいくつか案があるのですが、今回はGoogleが開発している WebP...

次世代フォーマットWebPの画質比較 Jpeg2000とJpeg

今回は次世代フォーマットでの画像配信のために、実際に次世代フォーマットとされる「WebP、Jpeg2000」の画像を作成し、Jpegでの保存画質とを比較をしてみようと思います。次世代フォーマット...

Pin It on Pinterest