見た目は写真でも、よく見ると被写体の一部が動いている、何とも不思議な感覚の「シネマグラフ」。今、SNSでも注目を集めているシネマグラフですが、実はPhotoshopだけで簡単に作成することができます。

難易度2/5

 

本チュートリアル内で使用する主な機能

ビデオの読み込み、タイムラインパネル、選択とマスク、Web用に保存

 

手順

  1. ビデオをPhotoshopに読み込む
  2. ビデオレイヤーを複製する
  3. 複製したビデオレイヤーを静止画に変換する
  4. レイヤーマスクを作成する
  5. 動画の長さを調整する
  6. Web用に書き出す

手順1/6

ビデオをPhotoshopに読み込む

Photoshopを起動し、「ファイル」→「開く」をクリックして、ダウンロードしたサンプルファイル(coffee-cup-hands.mp4)を開きます。カンバス上にビデオ画像が表示され、下部には「タイムライン」パネルが表示されます。「タイムライン」パネルの再生ボタンをクリックして、ビデオが再生してみましょう。

動く写真一シネマグラフの作り方

手順2/6

ビデオレイヤーを複製する

画面上部の「ウィンドウ」メニューから「レイヤー」をクリックして、「レイヤー」パネルを開きます。ビデオレイヤーグループの中の「レイヤー1」を選択し、名前を「Coffee Video」としておきます。

「Coffee Video」レイヤーをビデオレイヤーグループの上にドラッグして外に出します。ビデオレイヤーグループは、パネル下部の「レイヤーを削除」ボタンをクリックして削除しておきましょう。

※レイヤーについて詳しくは、PhotoshopことはじめStep 1のStep 1-2「レイヤーとは」の動画を参照してください。

続いて、「Coffee Video」レイヤーを選択し、そのままドラッグしてパネル下部の「新規レイヤーを作成」ボタンにドロップします。「Coffee Videoのコピー」レイヤーが作成されました。タイムラインパネルにも、新しいレイヤーが作成されたことを確認します。

動く写真一シネマグラフの作り方

手順3/6

複製したビデオレイヤーを静止画に変換する

タイムラインパネルの「時間インジケーター」をドラッグして、静止画として採用するフレームまで移動します。フレームとは、動画のもとになる静止画像の1コマ1コマのことです。ここでは[02:14]のあたりまで移動します。

動く写真一シネマグラフの作り方

 

次に、「レイヤー」パネルの「Coffee Videoのコピー」レイヤーを選択した状態で、「レイヤー」→「ラスタライズ」→「ビデオ」をクリックします。これで、「Coffee Videoのコピー」レイヤーが静止画として固定されました。

動く写真一シネマグラフの作り方

手順4/6

レイヤーマスクを作成する

画面上部にある「選択範囲」メニューから、「選択とマスク」をクリックします。画面右に「属性パネル」が表示されるので、「表示モード」の「表示:」プルダウンメニューをクリックし、「オーバーレイ」を選択します。

画面左にある「ブラシツール」を選択し、カップの中のコーヒーの部分をなぞります。多少カップにかかるぐらいに、大まかになぞってみましょう。

続いて、「属性パネル」の「グローバル調整」の下部にある「反転」ボタンをクリックします。マスクの選択範囲が反転しました。

次に「出力設定」の「出力先:」プルダウンメニューから「レイヤーマスク」を選択し、パネル下部の「OK」をクリックします。

動く写真一シネマグラフの作り方

手順5/6

動画の長さを調整する

「タイムライン」パネルの再生ボタンをクリックして、再生してみましょう。静止画の中で、コーヒーだけが揺れ動いているシネマグラフが完成しました。

シネマグラフでは、動画を繰り返し再生するループ再生が一般的です。その場合、動画の終わりと始まりのつなぎ目がスムーズに再生されることが重要になります。「タイムライン」パネル右上のオプションメニューから「ループ再生」を選択し、再生してみましょう。動画が繰り返し再生されます。

動く写真一シネマグラフの作り方

 

ループ再生してつなぎ目に違和感がある場合は、動画の始まりと終わりのタイミングを調整します。タイムライン上で「ワークエリア 開始時間/終了時間を指定」をそれぞれドラッグして、任意の始点(インポイント)および終点(アウトポイント)まで移動します。

動く写真一シネマグラフの作り方

手順6/6

Web用に書き出す

最後に完成したシネマグラフを、Webで表示させるために書き出してみましょう。「ファイル」→「書き出し」→「Web用に保存(従来)」をクリックします。「Web用に保存」ウインドウで、ファイル形式を「GIF」に設定し、サイズや画質、アニメーションのループ回数などを指定して、「保存」をクリックします。

動く写真一シネマグラフの作り方

 

Photoshopで作成したシネマグラフィが、GIFアニメとして書き出されました。完成した作品を見てみましょう。

動く写真一シネマグラフの作り方

 

いかがでしたか、ビデオ動画をPhotoshopで読み込んで、簡単なステップでシネマグラフを作成することができました。シネマグラフは、今やInstargramやTwitterなどでも大人気。アイデアを活かして、楽しい作品をつくってみてください。また、ここで学んだテクニックは、シネマグラフ以外にも、Webサイトやバナー広告の制作などにも幅広く活用できます。


シネマグラフのその他の作例もご覧ください。

動く写真一シネマグラフの作り方
動く写真一シネマグラフの作り方
動く写真一シネマグラフの作り方
動く写真一シネマグラフの作り方
このページは役に立ちましたか。